Bug 1468364 - Part 2. Add animation inspector test which checks the created time when changing the playback rate and current time. r?daisuke
MozReview-Commit-ID: HvLl67GaOhi
--- a/devtools/client/inspector/animation/test/browser.ini
+++ b/devtools/client/inspector/animation/test/browser.ini
@@ -52,16 +52,18 @@ support-files =
[browser_animation_keyframes-graph_computed-value-path-01.js]
[browser_animation_keyframes-graph_computed-value-path-02.js]
[browser_animation_keyframes-graph_computed-value-path_easing-hint.js]
skip-if = (verify && !debug)
[browser_animation_keyframes-graph_keyframe-marker.js]
[browser_animation_keyframes-graph_keyframe-marker-rtl.js]
[browser_animation_keyframes-progress-bar.js]
[browser_animation_keyframes-progress-bar_after-resuming.js]
+[browser_animation_logic_adjust-time.js]
+[browser_animation_logic_adjust-time-with-playback-rate.js]
[browser_animation_logic_auto-stop.js]
[browser_animation_logic_avoid-updating-during-hiding.js]
[browser_animation_logic_created-time.js]
[browser_animation_logic_mutations.js]
[browser_animation_logic_mutations_fast.js]
[browser_animation_logic_scroll-amount.js]
[browser_animation_pause-resume-button.js]
[browser_animation_pause-resume-button_end-time.js]
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_logic_adjust-time-with-playback-rate.js
@@ -0,0 +1,34 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test adjusting the created time with different playback rate of animation.
+
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_custom_playback_rate.html");
+ const { animationInspector, inspector, panel } = await openAnimationInspector();
+
+ info("Pause the all animation and set current time to middle in order to check " +
+ "the adjusting time");
+ await clickOnPauseResumeButton(animationInspector, panel);
+ await clickOnCurrentTimeScrubberController(animationInspector, panel, 0.5);
+
+ info("Check the created times of all animation are same");
+ checkAdjustingTheTime(animationInspector.state.animations[0].state,
+ animationInspector.state.animations[1].state);
+
+ info("Change the playback rate to x10 after selecting '.div2'");
+ await selectNodeAndWaitForAnimations(".div2", inspector);
+ await clickOnPlaybackRateSelector(animationInspector, panel, 10);
+
+ info("Check each adjusted result of animations after selecting 'body' again");
+ await selectNodeAndWaitForAnimations("body", inspector);
+
+ checkAdjustingTheTime(animationInspector.state.animations[0].state,
+ animationInspector.state.animations[1].state);
+ is(animationInspector.state.animations[0].state.currentTime, 50000,
+ "The current time of '.div1' animation is 50%");
+ is(animationInspector.state.animations[1].state.currentTime, 50000,
+ "The current time of '.div2' animation is 50%");
+});
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_logic_adjust-time.js
@@ -0,0 +1,35 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test adjusting the created time with different current times of animation.
+
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_custom_playback_rate.html");
+ const { animationInspector, inspector, panel } = await openAnimationInspector();
+
+ info("Pause the all animation and set current time to middle time in order to " +
+ "check the adjusting time");
+ await clickOnPauseResumeButton(animationInspector, panel);
+ await clickOnCurrentTimeScrubberController(animationInspector, panel, 0.5);
+
+ info("Check the created times of all animation are same");
+ checkAdjustingTheTime(animationInspector.state.animations[0].state,
+ animationInspector.state.animations[1].state);
+
+ info("Change the current time to 75% after selecting '.div2'");
+ await selectNodeAndWaitForAnimations(".div2", inspector);
+ await clickOnCurrentTimeScrubberController(animationInspector, panel, 0.75);
+
+ info("Check each adjusted result of animations after selecting 'body' again");
+ await selectNodeAndWaitForAnimations("body", inspector);
+
+ checkAdjustingTheTime(animationInspector.state.animations[0].state,
+ animationInspector.state.animations[1].state);
+ is(animationInspector.state.animations[0].state.currentTime, 50000,
+ "The current time of '.div1' animation is 50%");
+ is(animationInspector.state.animations[1].state.currentTime, 75000,
+ "The current time of '.div2' animation is 75%");
+});
+
--- a/devtools/client/inspector/animation/test/head.js
+++ b/devtools/client/inspector/animation/test/head.js
@@ -816,8 +816,22 @@ async function testKeyframesGraphCompute
for (const expectedStopColor of expectedStopColors) {
const { offset, color } = expectedStopColor;
assertLinearGradient(linearGradientEl, offset, color);
}
}
}
}
+
+/**
+ * Check the adjusted current time and created time from specified two animations.
+ *
+ * @param {AnimationPlayerFront.state} animation1
+ * @param {AnimationPlayerFront.state} animation2
+ */
+function checkAdjustingTheTime(animation1, animation2) {
+ const adjustedCurrentTimeDiff = animation2.currentTime / animation2.playbackRate
+ - animation1.currentTime / animation1.playbackRate;
+ const createdTimeDiff = animation1.createdTime - animation2.createdTime;
+ ok(Math.abs(adjustedCurrentTimeDiff - createdTimeDiff) < 0.1,
+ "Adjusted time is correct");
+}