Bug 1231945 - Display animation.id when it exists; r=tromey
--- a/devtools/server/actors/animation.js
+++ b/devtools/server/actors/animation.js
@@ -133,23 +133,25 @@ var AnimationPlayerActor = ActorClass({
} else if (this.isTransition()) {
return ANIMATION_TYPES.CSS_TRANSITION;
}
return ANIMATION_TYPES.UNKNOWN;
},
/**
- * Get the name associated with the player. This is used to match
- * up the player with values in the computed animation-name or
- * transition-property property.
+ * Get the name of this animation. This can be either the animation.id
+ * property if it was set, or the keyframe rule name or the transition
+ * property.
* @return {String}
*/
getName: function() {
- if (this.isAnimation()) {
+ if (this.player.id) {
+ return this.player.id;
+ } else if (this.isAnimation()) {
return this.player.animationName;
} else if (this.isTransition()) {
return this.player.transitionProperty;
}
return "";
},
--- a/devtools/server/tests/browser/animation.html
+++ b/devtools/server/tests/browser/animation.html
@@ -140,28 +140,56 @@
}
}
@keyframes grow {
100% {
width: 100px;
}
}
+
+ .script-generated {
+ display: inline-block;
+
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ background-color: black;
+ background-image:
+ repeating-linear-gradient(45deg, transparent 0, transparent 5px, #f06 5px, #f06 10px);
+ border: 5px solid #f06;
+ box-sizing: border-box;
+ }
</style>
<div class="not-animated"></div>
<div class="simple-animation"></div>
<div class="multiple-animations"></div>
<div class="transition"></div>
<div class="long-animation"></div>
<div class="short-animation"></div>
<div class="delayed-animation"></div>
<div class="delayed-transition"></div>
<div class="delayed-multiple-animations"></div>
<div class="multiple-animations-2"></div>
<div class="all-transitions"></div>
+<div class="script-generated"></div>
<script type="text/javascript">
// Get the transitions started when the page loads
var players;
addEventListener("load", function() {
document.querySelector(".transition").classList.add("get-round");
document.querySelector(".delayed-transition").classList.add("get-round");
+
+ // Create a script-generated animation.
+ var animation = document.querySelector(".script-generated").animate({
+ backgroundColor: ["black", "gold"]
+ }, {
+ duration: 500,
+ iterations: Infinity,
+ direction: "alternate"
+ });
+ animation.id = "custom-animation-name";
+
+ // Add a custom animation id to an existing css animation.
+ document.querySelector(".delayed-animation")
+ .getAnimations()[0].id = "cssanimation-custom-name";
});
</script>
--- a/devtools/server/tests/browser/browser.ini
+++ b/devtools/server/tests/browser/browser.ini
@@ -23,16 +23,17 @@ support-files =
[browser_animation_emitMutations.js]
[browser_animation_getFrames.js]
[browser_animation_getMultipleStates.js]
[browser_animation_getPlayers.js]
[browser_animation_getStateAfterFinished.js]
[browser_animation_getSubTreeAnimations.js]
[browser_animation_keepFinished.js]
+[browser_animation_name.js]
[browser_animation_playerState.js]
[browser_animation_playPauseIframe.js]
[browser_animation_playPauseSeveral.js]
[browser_animation_reconstructState.js]
[browser_animation_refreshTransitions.js]
[browser_animation_setCurrentTime.js]
[browser_animation_setPlaybackRate.js]
[browser_animation_simple.js]
new file mode 100644
--- /dev/null
+++ b/devtools/server/tests/browser/browser_animation_name.js
@@ -0,0 +1,51 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the AnimationPlayerActor provides the correct name for an
+// animation. Whether this animation is a CSSAnimation, CSSTransition or a
+// script-based animation that has been given an id, or even a CSSAnimation that
+// has been given an id.
+
+const TEST_DATA = [{
+ selector: ".simple-animation",
+ animationIndex: 0,
+ expectedName: "move"
+}, {
+ selector: ".transition",
+ animationIndex: 0,
+ expectedName: "width"
+}, {
+ selector: ".script-generated",
+ animationIndex: 0,
+ expectedName: "custom-animation-name"
+}, {
+ selector: ".delayed-animation",
+ animationIndex: 0,
+ expectedName: "cssanimation-custom-name"
+}];
+
+add_task(function*() {
+ let {client, walker, animations} =
+ yield initAnimationsFrontForUrl(MAIN_DOMAIN + "animation.html");
+
+ for (let {selector, animationIndex, expectedName} of TEST_DATA) {
+ let {name} = yield getAnimationStateForNode(walker, animations, selector,
+ animationIndex);
+ is(name, expectedName, "The animation has the expected name");
+ }
+
+ yield closeDebuggerClient(client);
+ gBrowser.removeCurrentTab();
+});
+
+function* getAnimationStateForNode(walker, animations, nodeSelector, index) {
+ let node = yield walker.querySelector(walker.rootNode, nodeSelector);
+ let players = yield animations.getAnimationPlayersForNode(node);
+ let player = players[index];
+ yield player.ready();
+ let state = yield player.getCurrentState();
+ return state;
+}