From b353bcfaea70be6975318ba59e122782345e03ee Mon Sep 17 00:00:00 2001 From: Patrick Brosset Date: Mon, 12 Oct 2015 11:39:21 +0200 Subject: [PATCH] Bug 1205681 - 3 - Tests for the timeline rewind button; r=tromey --- .../animationinspector/test/browser.ini | 1 + ...browser_animation_timeline_pause_button.js | 40 ++-------------- ...rowser_animation_timeline_rewind_button.js | 48 +++++++++++++++++++ .../client/animationinspector/test/head.js | 47 ++++++++++++++++++ 4 files changed, 100 insertions(+), 36 deletions(-) create mode 100644 devtools/client/animationinspector/test/browser_animation_timeline_rewind_button.js diff --git a/devtools/client/animationinspector/test/browser.ini b/devtools/client/animationinspector/test/browser.ini index a1536b32577..0b47a45f125 100644 --- a/devtools/client/animationinspector/test/browser.ini +++ b/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] diff --git a/devtools/client/animationinspector/test/browser_animation_timeline_pause_button.js b/devtools/client/animationinspector/test/browser_animation_timeline_pause_button.js index 470d56c3afb..2c53ecd1d86 100644 --- a/devtools/client/animationinspector/test/browser_animation_timeline_pause_button.js +++ b/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"); - } -} diff --git a/devtools/client/animationinspector/test/browser_animation_timeline_rewind_button.js b/devtools/client/animationinspector/test/browser_animation_timeline_rewind_button.js new file mode 100644 index 00000000000..7e42e1b1688 --- /dev/null +++ b/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"); +}); diff --git a/devtools/client/animationinspector/test/head.js b/devtools/client/animationinspector/test/head.js index e3c9fcfa883..673c6264088 100644 --- a/devtools/client/animationinspector/test/head.js +++ b/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); +}