Bug 1468364 - Part 2. Add animation inspector test which checks the created time when changing the playback rate and current time. r=daisuke
authorMantaroh Yoshinaga <mantaroh@gmail.com>
Mon, 02 Jul 2018 15:08:58 +0900
changeset 424623 2d8fac92ff52f3b001c80dbca0638d3fd6ed4f8b
parent 424622 ed54e921f535c0f789e37e22418c7d5fe2b7faff
child 424624 7902372b229975d54a706ad4ab6ae23cdea9e3ad
push id34220
push usertoros@mozilla.com
push dateMon, 02 Jul 2018 21:52:37 +0000
treeherdermozilla-central@959983b7d19e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdaisuke
bugs1468364
milestone63.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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
devtools/client/inspector/animation/test/browser.ini
devtools/client/inspector/animation/test/browser_animation_logic_adjust-time-with-playback-rate.js
devtools/client/inspector/animation/test/browser_animation_logic_adjust-time.js
devtools/client/inspector/animation/test/head.js
--- 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");
+}