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
--- a/devtools/client/inspector/animation/test/browser.ini
+++ b/devtools/client/inspector/animation/test/browser.ini
@@ -38,16 +38,17 @@ support-files =
[browser_animation_animation-target_highlight.js]
[browser_animation_animation-target_select.js]
[browser_animation_animation-timeline-tick.js]
[browser_animation_css-transition-with-playstate-idle.js]
[browser_animation_current-time-label.js]
[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]
[browser_animation_infinity-duration_summary-graph.js]
[browser_animation_infinity-duration_tick-label.js]
[browser_animation_inspector_exists.js]
[browser_animation_keyframes-graph_computed-value-path-01.js]
[browser_animation_keyframes-graph_computed-value-path-02.js]
new file mode 100644
--- /dev/null
+++ b/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);
+});
--- a/devtools/client/inspector/animation/test/browser_animation_pause-resume-button_end-time.js
+++ b/devtools/client/inspector/animation/test/browser_animation_pause-resume-button_end-time.js
@@ -3,38 +3,41 @@
"use strict";
// Test whether the animation can rewind if the current time is over end time when
// the resume button clicked.
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");
info("Make the current time of animation to be over its end time");
await clickOnCurrentTimeScrubberController(animationInspector, panel, 1);
info("Resume animations");
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");
info("Remove infinite animation");
await setClassAttribute(animationInspector, ".animated", "ball still");
info("Make the current time of animation to be over its end time");
await clickOnCurrentTimeScrubberController(animationInspector, panel, 1);
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);
});
function assertPlayState(animations, expectedState) {
animations.forEach((animation, index) => {
is(animation.state.playState, expectedState[index],
`The playState of animation [${ index }] should be ${ expectedState[index] }`);
--- a/devtools/client/inspector/animation/test/browser_animation_rewind-button.js
+++ b/devtools/client/inspector/animation/test/browser_animation_rewind-button.js
@@ -4,18 +4,20 @@
"use strict";
// Test for following RewindButton component:
// * element existence
// * make animations to rewind to zero
// * 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");
info("Checking rewind button makes animations to rewind to zero");
await clickOnRewindButton(animationInspector, panel);
assertAnimationsCurrentTime(animationInspector, 0);
assertAnimationsPausing(animationInspector, panel);
--- a/devtools/client/inspector/animation/test/head.js
+++ b/devtools/client/inspector/animation/test/head.js
@@ -183,18 +183,17 @@ const clickOnRewindButton = async functi
* @param {Number} mouseDownPosition
* rate on scrubber controller pane.
* This method calculates
* `mouseDownPosition * offsetWidth + offsetLeft of scrubber controller pane`
* as the clientX of MouseEvent.
*/
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;
info(`Click ${ mousedonwX } on scrubber controller`);
EventUtils.synthesizeMouse(controllerEl, mousedonwX, 0, {}, controllerEl.ownerGlobal);
await waitForSummaryAndDetail(animationInspector);
};