Bug 1468475 - Part 3. Add negative current time tests. r=daisuke

This patch will add tests which is related with negative current time.
 * Rewind the animations which has negative delay.
 * Replay the animations which has negative delay.
 * Inspect the negative current time animation.

MozReview-Commit-ID: JACPqc19FpZ

--HG--
extra : rebase_source : c244f54b8d83bdb6291e363dfb00d1aa56bf5efc

devtools/client/inspector/animation/test/browser.ini

@@ -43,6 +43,7 @@ support-files =
 [browser_animation_current-time-scrubber.js]
 [browser_animation_current-time-scrubber-rtl.js]
 [browser_animation_current-time-scrubber_each-different-creation-time-animations.js]
+[browser_animation_current-time-scrubber-with-negative-delay.js]
 [browser_animation_empty_on_invalid_nodes.js]
 [browser_animation_indication-bar.js]
 [browser_animation_infinity-duration_current-time-scrubber.js]

devtools/client/inspector/animation/test/browser_animation_current-time-scrubber-with-negative-delay.js

@@ -0,0 +1,30 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test whether the most left position means negative current time.
+
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_multi_timings.html");
+  await removeAnimatedElementsExcept([".cssanimation-normal", ".delay-negative"]);
+  const { animationInspector, panel, inspector } = await openAnimationInspector();
+
+  info("Checking scrubber controller existence");
+  const controllerEl = panel.querySelector(".current-time-scrubber-area");
+  ok(controllerEl, "scrubber controller should exist");
+
+  info("Checking the current time of most left scrubber position");
+  const timeScale = animationInspector.state.timeScale;
+  await clickOnCurrentTimeScrubberController(animationInspector, panel, 0);
+  assertAnimationsCurrentTime(animationInspector, -1 * timeScale.zeroPositionTime);
+
+  info("Select negative current time animation");
+  await selectNodeAndWaitForAnimations(".cssanimation-normal", inspector);
+  assertAnimationsCurrentTime(animationInspector, -1 * timeScale.zeroPositionTime);
+
+  info("Back to 'body' and rewind the animation");
+  await selectNodeAndWaitForAnimations("body", inspector);
+  await clickOnRewindButton(animationInspector, panel);
+  assertAnimationsCurrentTime(animationInspector, 0);
+});

devtools/client/inspector/animation/test/browser_animation_pause-resume-button_end-time.js

@@ -8,7 +8,10 @@
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_simple_animation.html");
-  await removeAnimatedElementsExcept([".animated", ".end-delay", ".long"]);
+  await removeAnimatedElementsExcept([".animated",
+                                      ".end-delay",
+                                      ".long",
+                                      ".negative-delay"]);
   const { animationInspector, panel } = await openAnimationInspector();
 
   info("Check animations state after resuming with infinite animation");
@@ -18,7 +21,7 @@ add_task(async function() {
   await clickOnPauseResumeButton(animationInspector, panel);
   await wait(1000);
   assertPlayState(animationInspector.state.animations,
-                  ["running", "finished", "finished"]);
+                  ["running", "finished", "finished", "finished"]);
   await clickOnCurrentTimeScrubberController(animationInspector, panel, 0);
 
   info("Check animations state after resuming without infinite animation");
@@ -29,7 +32,7 @@ add_task(async function() {
   await clickOnPlaybackRateSelector(animationInspector, panel, 10);
   info("Resume animations");
   await clickOnPauseResumeButton(animationInspector, panel);
-  assertPlayState(animationInspector.state.animations, ["running", "running"]);
+  assertPlayState(animationInspector.state.animations, ["running", "running", "running"]);
   assertCurrentTimeLessThanDuration(animationInspector.state.animations);
   assertScrubberPosition(panel);
 });

devtools/client/inspector/animation/test/browser_animation_rewind-button.js

@@ -9,8 +9,10 @@
 // * the state should be always paused after rewinding
 
 add_task(async function() {
-  await addTab(URL_ROOT + "doc_custom_playback_rate.html");
+  await addTab(URL_ROOT + "doc_multi_timings.html");
   const { animationInspector, panel } = await openAnimationInspector();
+  await removeAnimatedElementsExcept([".animated",
+                                      ".negative-delay"]);
 
   info("Checking button existence");
   ok(panel.querySelector(".rewind-button"), "Rewind button should exist");

devtools/client/inspector/animation/test/head.js

@@ -188,8 +188,7 @@ const clickOnRewindButton = async function(animationInspector, panel) {
  */
 const clickOnCurrentTimeScrubberController = async function(animationInspector,
                                                             panel,
-                                                            mouseDownPosition,
-                                                            mouseMovePosition) {
+                                                            mouseDownPosition) {
   const controllerEl = panel.querySelector(".current-time-scrubber-area");
   const bounds = controllerEl.getBoundingClientRect();
   const mousedonwX = bounds.width * mouseDownPosition;