Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-09 03:15:11 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1220974 - Split browser_animation_timeline_pause_button.js into 3 tests; r=miker

Browse Source 
MozReview-Commit-ID: GyGH9THSY0J

--HG--
rename : devtools/client/animationinspector/test/browser_animation_timeline_pause_button.js => devtools/client/animationinspector/test/browser_animation_timeline_pause_button_01.js
extra : rebase_source : 7a0a3d86b3f68532763e1dc29e387f3d53f28420
This commit is contained in:
Patrick Brosset 2016-10-20 17:19:10 +02:00
parent c04bd7aa0e
commit 9d38bea730
5 changed files with 139 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
devtools/client/animationinspector/test/browser.ini
View File

@ -48,8 +48,9 @@ skip-if = os == "linux" && !debug # Bug 1227792
[browser_animation_timeline_currentTime.js]
[browser_animation_timeline_header.js]
[browser_animation_timeline_iterationStart.js]
[browser_animation_timeline_pause_button.js]
skip-if = os == "linux" && bits == 32 # Bug 1220974
[browser_animation_timeline_pause_button_01.js]
[browser_animation_timeline_pause_button_02.js]
[browser_animation_timeline_pause_button_03.js]
[browser_animation_timeline_rate_selector.js]
[browser_animation_timeline_rewind_button.js]
[browser_animation_timeline_scrubber_exists.js]

110
devtools/client/animationinspector/test/browser_animation_timeline_pause_button.js
View File

@ -1,110 +0,0 @@
/* 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 timeline toolbar contains a pause button and that this pause
// button can be clicked. Check that when it is, the current animations
// displayed in the timeline get their playstates changed accordingly, and check
// that the scrubber resumes/stops moving.
// Also checks that the button goes to the right state when the scrubber has
// reached the end of the timeline: continues to be in playing mode for infinite
// animations, goes to paused mode otherwise.
// And test that clicking the button once the scrubber has reached the end of
// the timeline does the right thing.
add_task(function* () {
yield addTab(URL_ROOT + "doc_simple_animation.html");
let {panel, inspector} = yield openAnimationInspector();
let timeline = panel.animationsTimelineComponent;
let btn = panel.playTimelineButtonEl;
ok(btn, "The play/pause button exists");
ok(!btn.classList.contains("paused"),
"The play/pause button is in its playing state");
info("Click on the button to pause all timeline animations");
yield clickTimelinePlayPauseButton(panel);
ok(btn.classList.contains("paused"),
"The play/pause button is in its paused state");
yield assertScrubberMoving(panel, false);
info("Click again on the button to play all timeline animations");
yield clickTimelinePlayPauseButton(panel);
ok(!btn.classList.contains("paused"),
"The play/pause button is in its playing state again");
yield assertScrubberMoving(panel, true);
// Some animations on the test page are infinite, so the scrubber won't stop
// at the end of the timeline, and the button should remain in play mode.
info("Select an infinite animation, reload the page and wait for the " +
"animation to complete");
yield selectNodeAndWaitForAnimations(".multi", inspector);
yield reloadTab(inspector);
yield waitForOutOfBoundScrubber(timeline);
ok(!btn.classList.contains("paused"),
"The button is in its playing state still, animations are infinite.");
yield assertScrubberMoving(panel, true);
info("Click on the button after the scrubber has moved out of bounds");
yield clickTimelinePlayPauseButton(panel);
ok(btn.classList.contains("paused"),
"The button can be paused after the scrubber has moved out of bounds");
yield assertScrubberMoving(panel, false);
// For a finite animation though, once the scrubber reaches the end of the
// timeline, it should go back to paused mode.
info("Select a finite animation, reload the page and wait for the " +
"animation to complete");
yield selectNodeAndWaitForAnimations(".negative-delay", inspector);
let onScrubberStopped = waitForScrubberStopped(timeline);
yield reloadTab(inspector);
yield onScrubberStopped;
ok(btn.classList.contains("paused"),
"The button is in paused state once finite animations are done");
yield assertScrubberMoving(panel, false);
info("Click again on the button to play the animation from the start again");
yield clickTimelinePlayPauseButton(panel);
ok(!btn.classList.contains("paused"),
"Clicking the button once finite animations are done should restart them");
yield assertScrubberMoving(panel, true);
});
function waitForOutOfBoundScrubber({win, scrubberEl}) {
return new Promise(resolve => {
function check() {
let pos = scrubberEl.getBoxQuads()[0].bounds.right;
let width = win.document.documentElement.offsetWidth;
if (pos >= width) {
setTimeout(resolve, 50);
} else {
setTimeout(check, 50);
}
}
check();
});
}
function waitForScrubberStopped(timeline) {
return new Promise(resolve => {
timeline.on("timeline-data-changed",
function onTimelineData(e, {isMoving}) {
if (!isMoving) {
timeline.off("timeline-data-changed", onTimelineData);
resolve();
}
});
});
}

34
devtools/client/animationinspector/test/browser_animation_timeline_pause_button_01.js Normal file
View File

@ -0,0 +1,34 @@
/* 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 timeline toolbar contains a pause button and that this pause button can
// be clicked. Check that when it is, the button changes state and the scrubber stops and
// resumes.
add_task(function* () {
yield addTab(URL_ROOT + "doc_simple_animation.html");
let {panel} = yield openAnimationInspector();
let btn = panel.playTimelineButtonEl;
ok(btn, "The play/pause button exists");
ok(!btn.classList.contains("paused"), "The play/pause button is in its playing state");
info("Click on the button to pause all timeline animations");
yield clickTimelinePlayPauseButton(panel);
ok(btn.classList.contains("paused"), "The play/pause button is in its paused state");
yield assertScrubberMoving(panel, false);
info("Click again on the button to play all timeline animations");
yield clickTimelinePlayPauseButton(panel);
ok(!btn.classList.contains("paused"),
"The play/pause button is in its playing state again");
yield assertScrubberMoving(panel, true);
});

48
devtools/client/animationinspector/test/browser_animation_timeline_pause_button_02.js Normal file
View File

@ -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";
requestLongerTimeout(2);
// Checks that the play/pause button goes to the right state when the scrubber has reached
// the end of the timeline but there are infinite animations playing.
add_task(function* () {
yield addTab(URL_ROOT + "doc_simple_animation.html");
let {panel, inspector} = yield openAnimationInspector();
let timeline = panel.animationsTimelineComponent;
let btn = panel.playTimelineButtonEl;
info("Select an infinite animation and wait for the scrubber to reach the end");
yield selectNodeAndWaitForAnimations(".multi", inspector);
yield waitForOutOfBoundScrubber(timeline);
ok(!btn.classList.contains("paused"),
"The button is in its playing state still, animations are infinite.");
yield assertScrubberMoving(panel, true);
info("Click on the button after the scrubber has moved out of bounds");
yield clickTimelinePlayPauseButton(panel);
ok(btn.classList.contains("paused"),
"The button can be paused after the scrubber has moved out of bounds");
yield assertScrubberMoving(panel, false);
});
function waitForOutOfBoundScrubber({win, scrubberEl}) {
return new Promise(resolve => {
function check() {
let pos = scrubberEl.getBoxQuads()[0].bounds.right;
let width = win.document.documentElement.offsetWidth;
if (pos >= width) {
setTimeout(resolve, 50);
} else {
setTimeout(check, 50);
}
}
check();
});
}

54
devtools/client/animationinspector/test/browser_animation_timeline_pause_button_03.js Normal file
View File

@ -0,0 +1,54 @@
/* 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);
// Also checks that the button goes to the right state when the scrubber has
// reached the end of the timeline: continues to be in playing mode for infinite
// animations, goes to paused mode otherwise.
// And test that clicking the button once the scrubber has reached the end of
// the timeline does the right thing.
add_task(function* () {
yield addTab(URL_ROOT + "doc_simple_animation.html");
let {panel, inspector} = yield openAnimationInspector();
let timeline = panel.animationsTimelineComponent;
let btn = panel.playTimelineButtonEl;
// For a finite animation, once the scrubber reaches the end of the timeline, the pause
// button should go back to paused mode.
info("Select a finite animation and wait for the animation to complete");
yield selectNodeAndWaitForAnimations(".negative-delay", inspector);
let onScrubberStopped = waitForScrubberStopped(timeline);
// The page is reloaded to avoid missing the animation.
yield reloadTab(inspector);
yield onScrubberStopped;
ok(btn.classList.contains("paused"),
"The button is in paused state once finite animations are done");
yield assertScrubberMoving(panel, false);
info("Click again on the button to play the animation from the start again");
yield clickTimelinePlayPauseButton(panel);
ok(!btn.classList.contains("paused"),
"Clicking the button once finite animations are done should restart them");
yield assertScrubberMoving(panel, true);
});
function waitForScrubberStopped(timeline) {
return new Promise(resolve => {
timeline.on("timeline-data-changed",
function onTimelineData(e, {isMoving}) {
if (!isMoving) {
timeline.off("timeline-data-changed", onTimelineData);
resolve();
}
});
});
}