diff options
Diffstat (limited to 'devtools/client/animationinspector/test/browser_animation_timeline_scrubber_movable.js')
-rw-r--r-- | devtools/client/animationinspector/test/browser_animation_timeline_scrubber_movable.js | 70 |
1 files changed, 70 insertions, 0 deletions
diff --git a/devtools/client/animationinspector/test/browser_animation_timeline_scrubber_movable.js b/devtools/client/animationinspector/test/browser_animation_timeline_scrubber_movable.js new file mode 100644 index 000000000..a690dd78e --- /dev/null +++ b/devtools/client/animationinspector/test/browser_animation_timeline_scrubber_movable.js @@ -0,0 +1,70 @@ +/* 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"; + +requestLongerTimeout(2); + +// Check that the scrubber in the timeline can be moved by clicking & dragging +// in the header area. +// Also check that doing so changes the timeline's play/pause button to paused +// state. +// Finally, also check that the scrubber can be moved using the scrubber handle. + +add_task(function* () { + yield addTab(URL_ROOT + "doc_simple_animation.html"); + + let {panel} = yield openAnimationInspector(); + let timeline = panel.animationsTimelineComponent; + let {win, timeHeaderEl, scrubberEl, scrubberHandleEl} = timeline; + let playTimelineButtonEl = panel.playTimelineButtonEl; + + ok(!playTimelineButtonEl.classList.contains("paused"), + "The timeline play button is in its playing state by default"); + + info("Mousedown in the header to move the scrubber"); + yield synthesizeInHeaderAndWaitForChange(timeline, 50, 1, "mousedown"); + checkScrubberIsAt(scrubberEl, timeHeaderEl, 50); + + ok(playTimelineButtonEl.classList.contains("paused"), + "The timeline play button is in its paused state after mousedown"); + + info("Continue moving the mouse and verify that the scrubber tracks it"); + yield synthesizeInHeaderAndWaitForChange(timeline, 100, 1, "mousemove"); + checkScrubberIsAt(scrubberEl, timeHeaderEl, 100); + + ok(playTimelineButtonEl.classList.contains("paused"), + "The timeline play button is in its paused state after mousemove"); + + info("Release the mouse and move again and verify that the scrubber stays"); + EventUtils.synthesizeMouse(timeHeaderEl, 100, 1, {type: "mouseup"}, win); + EventUtils.synthesizeMouse(timeHeaderEl, 200, 1, {type: "mousemove"}, win); + checkScrubberIsAt(scrubberEl, timeHeaderEl, 100); + + info("Try to drag the scrubber handle and check that the scrubber moves"); + let onDataChanged = timeline.once("timeline-data-changed"); + EventUtils.synthesizeMouse(scrubberHandleEl, 1, 20, {type: "mousedown"}, win); + EventUtils.synthesizeMouse(timeHeaderEl, 0, 0, {type: "mousemove"}, win); + EventUtils.synthesizeMouse(timeHeaderEl, 0, 0, {type: "mouseup"}, win); + yield onDataChanged; + + checkScrubberIsAt(scrubberEl, timeHeaderEl, 0); +}); + +function* synthesizeInHeaderAndWaitForChange(timeline, x, y, type) { + let onDataChanged = timeline.once("timeline-data-changed"); + EventUtils.synthesizeMouse(timeline.timeHeaderEl, x, y, {type}, timeline.win); + yield onDataChanged; +} + +function getPositionPercentage(pos, headerEl) { + return pos * 100 / headerEl.offsetWidth; +} + +function checkScrubberIsAt(scrubberEl, timeHeaderEl, pos) { + let newPos = Math.round(parseFloat(scrubberEl.style.left)); + let expectedPos = Math.round(getPositionPercentage(pos, timeHeaderEl)); + is(newPos, expectedPos, + `The scrubber is at position ${pos} (${expectedPos}%)`); +} |