Bug 1466031 - Re-arrange tests in test_animations-currenttime.html; r?hiro
A number of these tests are redundant with other tests or are otherwise
unnecessary. Other tests should be moved to a more appropriate file.
Some notable examples:
* A number of the tests relate to dispatching events in various phases and have
been moved to test_event-dispatch.html.
* The "Seeking finished -> paused dispatches animationstart" test is covered
by the "After -> Active" test in test_event-dispatch.html (which also
operates on a paused animation).
* The "Animation.currentTime clamping" is really just testing finishing
behavior and is covered by the updating-the-finished-state.html tests in the
Web Animations web-platform-tests (specifically the "Updating the finished
state when playing past end" test).
* Likewise for the "Animation.currentTime clamping for reversed animation"
test.
MozReview-Commit-ID: sGorWfceQa
--- a/dom/animation/test/css-animations/test_animation-currenttime.html
+++ b/dom/animation/test/css-animations/test_animation-currenttime.html
@@ -11,327 +11,62 @@
animation-timing-function: linear ! important;
}
@keyframes anim {
from { margin-left: 100px; }
to { margin-left: 200px; }
}
- </style>
- <script src="/resources/testharness.js"></script>
- <script src="/resources/testharnessreport.js"></script>
- <script src="../testcommon.js"></script>
- </head>
- <body>
- <div id="log"></div>
- <script type="text/javascript">
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../testcommon.js"></script>
+</head>
+<body>
+<div id="log"></div>
+<script type="text/javascript">
'use strict';
-// TODO: We should separate this test(Testing for CSS Animation events /
-// Testing for currentTime of Web Animation).
-// e.g:
-// CSS Animation events test :
-// - check the firing an event using Animation.currentTime
-// The current Time of Web Animation test :
-// - check an current time value on several situation(init / processing..)
-// - Based on W3C Spec, check the behavior of setting current time.
-
-// TODO: Once the computedTiming property is implemented, add checks to the
-// checker helpers to ensure that computedTiming's properties are updated as
-// expected.
-// See https://bugzilla.mozilla.org/show_bug.cgi?id=1108055
-
-const CSS_ANIM_EVENTS =
- ['animationstart', 'animationiteration', 'animationend'];
-
-test(t => {
- const div = addDiv(t, {'class': 'animated-div'});
- div.style.animation = "anim 100s";
+promise_test(async t => {
+ const div = addDiv(t, { class: 'animated-div' });
+ div.style.animation = 'anim 100s';
const animation = div.getAnimations()[0];
- // Animations shouldn't start until the next paint tick, so:
- assert_equals(animation.currentTime, 0,
+ assert_equals(
+ animation.currentTime,
+ 0,
'Animation.currentTime should be zero when an animation ' +
- 'is initially created');
-
- // Make sure the animation is running before we set the current time.
- animation.startTime = animation.timeline.currentTime;
-
- animation.currentTime = 50 * MS_PER_SEC;
- assert_time_equals_literal(animation.currentTime, 50 * MS_PER_SEC,
- 'Check setting of currentTime actually works');
-}, 'Sanity test to check round-tripping assigning to new animation\'s ' +
- 'currentTime');
-
-promise_test(async t => {
- const div = addDiv(t, {'class': 'animated-div'});
- const eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
- div.style.animation = "anim 100s 100s";
- const animation = div.getAnimations()[0];
+ 'is initially created'
+ );
await animation.ready;
- assert_less_than_equal(animation.currentTime,
- animation.timeline.currentTime - animation.startTime + 0.0001,
- 'Animation.currentTime should be less than the local time ' +
- 'equivalent of the timeline\'s currentTime on the first paint tick ' +
- 'after animation creation');
-
- animation.currentTime = 100 * MS_PER_SEC;
- await eventWatcher.wait_for('animationstart');
-
- animation.currentTime = 200 * MS_PER_SEC;
- await eventWatcher.wait_for('animationend');
-}, 'Skipping forward through animation');
-
-promise_test(async t => {
- const div = addDiv(t, {'class': 'animated-div'});
- const eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
- div.style.animation = "anim 100s 100s";
- const animation = div.getAnimations()[0];
- animation.currentTime = 200 * MS_PER_SEC;
- const previousTimelineTime = animation.timeline.currentTime;
-
- await eventWatcher.wait_for(['animationstart', 'animationend']);
-
- assert_true(document.timeline.currentTime - previousTimelineTime <
- 100 * MS_PER_SEC,
- 'Sanity check that seeking worked rather than the events ' +
- 'firing after normal playback through the very long ' +
- 'animation duration');
-
- animation.currentTime = 150 * MS_PER_SEC;
- await eventWatcher.wait_for('animationstart');
-
- animation.currentTime = 0;
- await eventWatcher.wait_for('animationend');
-}, 'Skipping backwards through animation');
-
-// Next we have multiple tests to check that redundant currentTime changes do
-// NOT dispatch events. It's impossible to distinguish between events not being
-// dispatched and events just taking an incredibly long time to dispatch
-// without waiting an infinitely long time. Obviously we don't want to do that
-// (block this test from finishing forever), so instead we just listen for
-// events until two animation frames (i.e. requestAnimationFrame callbacks)
-// have happened, then assume that no events will ever be dispatched for the
-// redundant changes if no events were detected in that time.
-
-promise_test(async t => {
- const div = addDiv(t, {'class': 'animated-div'});
- const eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
- div.style.animation = "anim 100s 100s";
- const animation = div.getAnimations()[0];
-
- animation.currentTime = 150 * MS_PER_SEC;
animation.currentTime = 50 * MS_PER_SEC;
- // Check there are no events
- await waitForAnimationFrames(2);
-}, 'Redundant change, before -> active, then back');
-
-promise_test(async t => {
- const div = addDiv(t, {'class': 'animated-div'});
- const eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
- div.style.animation = "anim 100s 100s";
- const animation = div.getAnimations()[0];
-
- animation.currentTime = 250 * MS_PER_SEC;
- animation.currentTime = 50 * MS_PER_SEC;
-
- // Check there are no events
- await waitForAnimationFrames(2);
-}, 'Redundant change, before -> after, then back');
-
-promise_test(async t => {
- const div = addDiv(t, {'class': 'animated-div'});
- const eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
- div.style.animation = "anim 100s 100s";
- const animation = div.getAnimations()[0];
-
- // Get us into the initial state:
- animation.currentTime = 150 * MS_PER_SEC;
-
- await eventWatcher.wait_for('animationstart');
-
- animation.currentTime = 50 * MS_PER_SEC;
- animation.currentTime = 150 * MS_PER_SEC;
-
- // Check there are no further events
- await waitForAnimationFrames(2);
-}, 'Redundant change, active -> before, then back');
+ assert_time_equals_literal(
+ animation.currentTime,
+ 50 * MS_PER_SEC,
+ 'Check setting of currentTime actually works'
+ );
+ assert_equals(getComputedStyle(div).marginLeft, '150px');
+}, 'currentTime can be used to seek a CSS animation');
promise_test(async t => {
- const div = addDiv(t, {'class': 'animated-div'});
- const eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
- div.style.animation = "anim 100s 100s";
- const animation = div.getAnimations()[0];
-
- // Get us into the initial state:
- animation.currentTime = 150 * MS_PER_SEC;
-
- await eventWatcher.wait_for('animationstart');
-
- animation.currentTime = 250 * MS_PER_SEC;
- animation.currentTime = 150 * MS_PER_SEC;
-
- // Check there are no further events
- await waitForAnimationFrames(2);
-}, 'Redundant change, active -> after, then back');
-
-promise_test(async t => {
- const div = addDiv(t, {'class': 'animated-div'});
- const eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
- div.style.animation = "anim 100s 100s";
- const animation = div.getAnimations()[0];
-
- // Get us into the initial state:
- animation.currentTime = 250 * MS_PER_SEC;
-
- await eventWatcher.wait_for(['animationstart', 'animationend']);
-
- animation.currentTime = 50 * MS_PER_SEC;
- animation.currentTime = 250 * MS_PER_SEC;
-
- // Check there are no further events
- await waitForAnimationFrames(2);
-}, 'Redundant change, after -> before, then back');
-
-promise_test(async t => {
- const div = addDiv(t, {'class': 'animated-div'});
- const eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
- div.style.animation = "anim 100s 100s";
- const animation = div.getAnimations()[0];
-
- // Get us into the initial state:
- animation.currentTime = 250 * MS_PER_SEC;
-
- await eventWatcher.wait_for(['animationstart', 'animationend']);
-
- animation.currentTime = 150 * MS_PER_SEC;
- animation.currentTime = 250 * MS_PER_SEC;
-
- // Check there are no further events
- await waitForAnimationFrames(2);
-}, 'Redundant change, after -> active, then back');
-
-promise_test(async t => {
- const div = addDiv(t, {'class': 'animated-div'});
- const eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
- div.style.animation = "anim 100s"
- const animation = div.getAnimations()[0];
-
- animation.pause();
- animation.currentTime = 150 * MS_PER_SEC;
-
- await eventWatcher.wait_for(['animationstart', 'animationend']);
-
- animation.currentTime = 50 * MS_PER_SEC;
-
- await eventWatcher.wait_for('animationstart');
-}, 'Seeking finished -> paused dispatches animationstart');
-
-promise_test(async t => {
- const div = addDiv(t, {'class': 'animated-div'});
- div.style.animation = "anim 100s";
-
- const animation = div.getAnimations()[0];
- await animation.ready;
-
- let exception;
- try {
- animation.currentTime = null;
- } catch (e) {
- exception = e;
- }
- assert_equals(exception.name, 'TypeError',
- 'Expect TypeError exception on trying to set ' +
- 'Animation.currentTime to null');
-}, 'Setting currentTime to null');
-
-promise_test(async t => {
- const div = addDiv(t, {'class': 'animated-div'});
+ const div = addDiv(t, { class: 'animated-div' });
div.style.animation = 'anim 100s';
const animation = div.getAnimations()[0];
await animation.ready;
- assert_not_equals(animation.currentTime, null,
- 'Animation.currentTime not null on ready Promise resolve');
- animation.pause();
- await animation.ready;
-
- const pauseTime = animation.currentTime;
- await waitForFrame();
-
- assert_equals(animation.currentTime, pauseTime,
- 'Animation.currentTime is unchanged after pausing');
-}, 'Animation.currentTime after pausing');
-
-promise_test(async t => {
- const div = addDiv(t, {'class': 'animated-div'});
- div.style.animation = "anim 100s";
- const animation = div.getAnimations()[0];
- await animation.ready;
-
- // Seek to just before animation ends:
- animation.currentTime = 100 * MS_PER_SEC - 1;
- await waitForAnimationFrames(2);
-
- assert_equals(animation.currentTime, 100 * MS_PER_SEC,
- 'Animation.currentTime should not continue to increase after the ' +
- 'animation has finished');
-}, 'Animation.currentTime clamping');
-
-promise_test(async t => {
- const div = addDiv(t, {'class': 'animated-div'});
- div.style.animation = "anim 100s";
- const animation = div.getAnimations()[0];
- await animation.ready;
-
- // Play backwards:
- animation.playbackRate = -1;
-
- // Seek to just before the animation ends (at the "start"):
- animation.currentTime = 1;
+ assert_throws(
+ new TypeError(),
+ () => {
+ animation.currentTime = null;
+ },
+ 'Expect TypeError exception on trying to set Animation.currentTime to null'
+ );
+}, 'Setting currentTime to null on a CSS animation throws');
- await waitForAnimationFrames(2);
-
- assert_equals(animation.currentTime, 0,
- 'Animation.currentTime should not continue to decrease after an ' +
- 'animation running in reverse has finished and currentTime is zero');
-}, 'Animation.currentTime clamping for reversed animation');
-
-test(t => {
- const div = addDiv(t, {'class': 'animated-div'});
- div.style.animation = 'anim 100s';
- const animation = div.getAnimations()[0];
- animation.cancel();
-
- assert_equals(animation.currentTime, null,
- 'The currentTime of a canceled animation should be null');
-}, 'Animation.currentTime after canceling');
-
-promise_test(async t => {
- const div = addDiv(t, {'class': 'animated-div'});
- div.style.animation = 'anim 100s';
- const animation = div.getAnimations()[0];
- await animation.ready;
-
- animation.finish();
-
- // Initiate a pause then abort it
- animation.pause();
- animation.play();
-
- // Wait to return to running state
- await animation.ready;
-
- assert_true(animation.currentTime < 100 * 1000,
- 'After aborting a pause when finished, the currentTime should'
- + ' jump back towards the start of the animation');
-}, 'After aborting a pause when finished, the call to play() should rewind'
- + ' the current time');
-
- </script>
- </body>
+</script>
+</body>
</html>
--- a/dom/animation/test/css-animations/test_event-dispatch.html
+++ b/dom/animation/test/css-animations/test_event-dispatch.html
@@ -285,16 +285,96 @@ promise_test(async t => {
animation.currentTime = 100 * MS_PER_SEC - 1;
evt = await watcher.wait_for('animationend');
assert_equals(evt.elapsedTime, 0);
assert_equals(animation.playState, 'running'); // delay
}, 'Negative playbackRate sanity test(Before -> Active -> Before)');
promise_test(async t => {
+ const { animation, watcher } = setupAnimation(t, 'anim 100s 100s');
+
+ animation.currentTime = 150 * MS_PER_SEC;
+ animation.currentTime = 50 * MS_PER_SEC;
+
+ // Then wait a couple of frames and check that no event was dispatched.
+ await waitForAnimationFrames(2);
+}, 'Redundant change, before -> active, then back');
+
+promise_test(async t => {
+ const { animation, watcher } = setupAnimation(t, 'anim 100s 100s');
+
+ animation.currentTime = 250 * MS_PER_SEC;
+ animation.currentTime = 50 * MS_PER_SEC;
+
+ // Then wait a couple of frames and check that no event was dispatched.
+ await waitForAnimationFrames(2);
+}, 'Redundant change, before -> after, then back');
+
+promise_test(async t => {
+ const { animation, watcher } = setupAnimation(t, 'anim 100s 100s');
+
+ // Get us into the initial state:
+ animation.currentTime = 150 * MS_PER_SEC;
+
+ await watcher.wait_for('animationstart');
+
+ animation.currentTime = 50 * MS_PER_SEC;
+ animation.currentTime = 150 * MS_PER_SEC;
+
+ // Then wait a couple of frames and check that no event was dispatched.
+ await waitForAnimationFrames(2);
+}, 'Redundant change, active -> before, then back');
+
+promise_test(async t => {
+ const { animation, watcher } = setupAnimation(t, 'anim 100s 100s');
+
+ // Get us into the initial state:
+ animation.currentTime = 150 * MS_PER_SEC;
+
+ await watcher.wait_for('animationstart');
+
+ animation.currentTime = 250 * MS_PER_SEC;
+ animation.currentTime = 150 * MS_PER_SEC;
+
+ // Then wait a couple of frames and check that no event was dispatched.
+ await waitForAnimationFrames(2);
+}, 'Redundant change, active -> after, then back');
+
+promise_test(async t => {
+ const { animation, watcher } = setupAnimation(t, 'anim 100s 100s');
+
+ // Get us into the initial state:
+ animation.currentTime = 250 * MS_PER_SEC;
+
+ await watcher.wait_for(['animationstart', 'animationend']);
+
+ animation.currentTime = 50 * MS_PER_SEC;
+ animation.currentTime = 250 * MS_PER_SEC;
+
+ // Then wait a couple of frames and check that no event was dispatched.
+ await waitForAnimationFrames(2);
+}, 'Redundant change, after -> before, then back');
+
+promise_test(async t => {
+ const { animation, watcher } = setupAnimation(t, 'anim 100s 100s');
+
+ // Get us into the initial state:
+ animation.currentTime = 250 * MS_PER_SEC;
+
+ await watcher.wait_for(['animationstart', 'animationend']);
+
+ animation.currentTime = 150 * MS_PER_SEC;
+ animation.currentTime = 250 * MS_PER_SEC;
+
+ // Then wait a couple of frames and check that no event was dispatched.
+ await waitForAnimationFrames(2);
+}, 'Redundant change, after -> active, then back');
+
+promise_test(async t => {
const { animation, watcher } = setupAnimation(t, 'anim 100s');
await watcher.wait_for('animationstart');
// Make idle
animation.cancel();
await watcher.wait_for('animationcancel');
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -615876,33 +615876,33 @@
"b8cc580e3e8d17961ffff4b693857f6c333dd57f",
"testharness"
],
"web-animations/timing-model/animation-effects/simple-iteration-progress.html": [
"602fe7e6880e0b18329262699872c696f451d744",
"testharness"
],
"web-animations/timing-model/animations/canceling-an-animation.html": [
- "e03baa30d438529a0ebe39f0f623563aa9850d74",
+ "cb9e7f8e950fad65783149d2c8014c567bf077a9",
"testharness"
],
"web-animations/timing-model/animations/finishing-an-animation.html": [
"afe654435332e798b3771b6ec6ca13bcca99e421",
"testharness"
],
"web-animations/timing-model/animations/pausing-an-animation.html": [
- "a4cb7b89c778ad5c294eeb55e94461e19ca8eb4b",
+ "27e4132548fc430fae19f3bab9cc8dc8c5a263ca",
"testharness"
],
"web-animations/timing-model/animations/play-states.html": [
"0ab2fa3a464001272d1af541ea769fa967490c3b",
"testharness"
],
"web-animations/timing-model/animations/playing-an-animation.html": [
- "10580a1e72892208a14c6fe55091e998edf0171c",
+ "386ed5ae920f51b80b9f7dc3a0fdf4526081817f",
"testharness"
],
"web-animations/timing-model/animations/reversing-an-animation.html": [
"72b89e78ca7dac261af8de370389d89c810b3718",
"testharness"
],
"web-animations/timing-model/animations/seamlessly-updating-the-playback-rate-of-an-animation.html": [
"a7e28aa0b40a39b00da257e347cb6ecf8d1d2882",
--- a/testing/web-platform/tests/web-animations/timing-model/animations/canceling-an-animation.html
+++ b/testing/web-platform/tests/web-animations/timing-model/animations/canceling-an-animation.html
@@ -6,16 +6,24 @@
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
<body>
<div id="log"></div>
<script>
'use strict';
+test(t => {
+ const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
+ animation.cancel();
+
+ assert_equals(animation.currentTime, null,
+ 'The current time of a canceled animation should be null');
+}, 'Canceling an animation should cause its current time to be unresolved');
+
promise_test(t => {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
const retPromise = animation.ready.then(() => {
assert_unreached('ready promise was fulfilled');
}).catch(err => {
assert_equals(err.name, 'AbortError',
'ready promise is rejected with AbortError');
});
--- a/testing/web-platform/tests/web-animations/timing-model/animations/pausing-an-animation.html
+++ b/testing/web-platform/tests/web-animations/timing-model/animations/pausing-an-animation.html
@@ -37,10 +37,28 @@ promise_test(async t => {
await animation.ready;
// If the current time was updated using the new playback rate it will jump
// back to 25s but if we correctly used the old playback rate the current time
// will be >50s.
assert_greater_than(animation.currentTime, 50 * MS_PER_SEC);
}, 'A pause-pending animation maintains the current time when applying a'
+ ' pending playback rate');
+promise_test(async t => {
+ // This test does not cover a specific step in the algorithm but serves as a
+ // high-level sanity check that pausing does, in fact, freeze the current
+ // time.
+ const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
+ await animation.ready;
+
+ animation.pause();
+ await animation.ready;
+
+ const currentTimeAfterPausing = animation.currentTime;
+
+ await waitForNextFrame();
+
+ assert_equals(animation.currentTime, currentTimeAfterPausing,
+ 'Animation.currentTime is unchanged after pausing');
+}, 'The animation\'s current time remains fixed after pausing');
+
</script>
</body>
--- a/testing/web-platform/tests/web-animations/timing-model/animations/playing-an-animation.html
+++ b/testing/web-platform/tests/web-animations/timing-model/animations/playing-an-animation.html
@@ -31,16 +31,33 @@ test(t => {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
animation.playbackRate = -1;
animation.currentTime = 0;
assert_time_equals_literal(animation.currentTime, 0);
animation.play();
assert_time_equals_literal(animation.currentTime, 100 * MS_PER_SEC);
}, 'Playing a finished and reversed animation seeks to end');
+promise_test(async t => {
+ const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
+ animation.finish();
+
+ // Initiate a pause then abort it
+ animation.pause();
+ animation.play();
+
+ // Wait to return to running state
+ await animation.ready;
+
+ assert_true(animation.currentTime < 100 * 1000,
+ 'After aborting a pause when finished, the current time should'
+ + ' jump back to the start of the animation');
+}, 'Playing a pause-pending but previously finished animation seeks back to'
+ + ' to the start');
+
test(t => {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
animation.cancel();
const promise = animation.ready;
animation.play();
assert_not_equals(animation.ready, promise);
}, 'The ready promise should be replaced if the animation is not already'
+ ' pending');