Bug 1205681 - 3 - Tests for the timeline rewind button; r=tromey

devtools/client/animationinspector/test/browser.ini

@@ -26,6 +26,7 @@ support-files =
 [browser_animation_target_highlighter_lock.js]
 [browser_animation_timeline_header.js]
 [browser_animation_timeline_pause_button.js]
+[browser_animation_timeline_rewind_button.js]
 [browser_animation_timeline_scrubber_exists.js]
 [browser_animation_timeline_scrubber_movable.js]
 [browser_animation_timeline_scrubber_moves.js]

devtools/client/animationinspector/test/browser_animation_timeline_pause_button.js

@@ -20,48 +20,16 @@ add_task(function*() {
      "The play/pause button is in its playing state");
 
   info("Click on the button to pause all timeline animations");
-  yield clickPlayPauseButton(panel);
+  yield clickTimelinePlayPauseButton(panel);
 
   ok(btn.classList.contains("paused"),
      "The play/pause button is in its paused state");
-  yield checkIfScrubberMoving(panel, false);
+  yield assertScrubberMoving(panel, false);
 
   info("Click again on the button to play all timeline animations");
-  yield clickPlayPauseButton(panel);
+  yield clickTimelinePlayPauseButton(panel);
 
   ok(!btn.classList.contains("paused"),
      "The play/pause button is in its playing state again");
-  yield checkIfScrubberMoving(panel, true);
+  yield assertScrubberMoving(panel, true);
 });
-
-function* clickPlayPauseButton(panel) {
-  let onUiUpdated = panel.once(panel.UI_UPDATED_EVENT);
-
-  let btn = panel.playTimelineButtonEl;
-  let win = btn.ownerDocument.defaultView;
-  EventUtils.sendMouseEvent({type: "click"}, btn, win);
-
-  yield onUiUpdated;
-  yield waitForAllAnimationTargets(panel);
-}
-
-function* checkIfScrubberMoving(panel, isMoving) {
-  let timeline = panel.animationsTimelineComponent;
-  let scrubberEl = timeline.scrubberEl;
-
-  if (isMoving) {
-    // If we expect the scrubber to move, just wait for a couple of
-    // timeline-data-changed events and compare times.
-    let {time: time1} = yield timeline.once("timeline-data-changed");
-    let {time: time2} = yield timeline.once("timeline-data-changed");
-    ok(time2 > time1, "The scrubber is moving");
-  } else {
-    // If instead we expect the scrubber to remain at its position, just wait
-    // for some time. A relatively long timeout is used because the test page
-    // has long running animations, so the scrubber doesn't move that quickly.
-    let startOffset = scrubberEl.offsetLeft;
-    yield new Promise(r => setTimeout(r, 2000));
-    let endOffset = scrubberEl.offsetLeft;
-    is(startOffset, endOffset, "The scrubber is not moving");
-  }
-}

devtools/client/animationinspector/test/browser_animation_timeline_rewind_button.js

@@ -0,0 +1,48 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Check that the timeline toolbar contains a rewind button and that it can be
+// clicked. Check that when it is, the current animations displayed in the
+// timeline get their playstates changed to paused, and their currentTimes
+// reset to 0, and that the scrubber stops moving and is positioned to the
+// start.
+
+add_task(function*() {
+  yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
+
+  let {panel, controller} = yield openAnimationInspector();
+  let btn = panel.rewindTimelineButtonEl;
+
+  ok(btn, "The rewind button exists");
+
+  info("Click on the button to rewind all timeline animations");
+  yield clickTimelineRewindButton(panel);
+
+  info("Check that the scrubber has stopped moving");
+  yield assertScrubberMoving(panel, false);
+
+  ok(controller.animationPlayers.every(({state}) => state.currentTime === 0),
+     "All animations' currentTimes have been set to 0");
+  ok(controller.animationPlayers.every(({state}) => state.playState === "paused"),
+     "All animations have been paused");
+
+  info("Play the animations again");
+  yield clickTimelinePlayPauseButton(panel);
+
+  info("And pause them after a short while");
+  yield new Promise(r => setTimeout(r, 200));
+
+  info("Check that rewinding when animations are paused works too");
+  yield clickTimelineRewindButton(panel);
+
+  info("Check that the scrubber has stopped moving");
+  yield assertScrubberMoving(panel, false);
+
+  ok(controller.animationPlayers.every(({state}) => state.currentTime === 0),
+     "All animations' currentTimes have been set to 0");
+  ok(controller.animationPlayers.every(({state}) => state.playState === "paused"),
+     "All animations have been paused");
+});

devtools/client/animationinspector/test/head.js

@@ -449,3 +449,50 @@ var waitForAllAnimationTargets = Task.async(function*(panel) {
   }));
   return targets;
 });
+
+/**
+ * Check the scrubber element in the timeline is moving.
+ * @param {AnimationPanel} panel
+ * @param {Boolean} isMoving
+ */
+function* assertScrubberMoving(panel, isMoving) {
+  let timeline = panel.animationsTimelineComponent;
+  let scrubberEl = timeline.scrubberEl;
+
+  if (isMoving) {
+    // If we expect the scrubber to move, just wait for a couple of
+    // timeline-data-changed events and compare times.
+    let {time: time1} = yield timeline.once("timeline-data-changed");
+    let {time: time2} = yield timeline.once("timeline-data-changed");
+    ok(time2 > time1, "The scrubber is moving");
+  } else {
+    // If instead we expect the scrubber to remain at its position, just wait
+    // for some time and make sure timeline-data-changed isn't emitted.
+    let hasMoved = false;
+    timeline.once("timeline-data-changed", () => hasMoved = true);
+    yield new Promise(r => setTimeout(r, 500));
+    ok(!hasMoved, "The scrubber is not moving");
+  }
+}
+
+function* clickTimelinePlayPauseButton(panel) {
+  let onUiUpdated = panel.once(panel.UI_UPDATED_EVENT);
+
+  let btn = panel.playTimelineButtonEl;
+  let win = btn.ownerDocument.defaultView;
+  EventUtils.sendMouseEvent({type: "click"}, btn, win);
+
+  yield onUiUpdated;
+  yield waitForAllAnimationTargets(panel);
+}
+
+function* clickTimelineRewindButton(panel) {
+  let onUiUpdated = panel.once(panel.UI_UPDATED_EVENT);
+
+  let btn = panel.rewindTimelineButtonEl;
+  let win = btn.ownerDocument.defaultView;
+  EventUtils.sendMouseEvent({type: "click"}, btn, win);
+
+  yield onUiUpdated;
+  yield waitForAllAnimationTargets(panel);
+}