--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -591713,57 +591713,57 @@
"3edd2c4bdd8409c2c12f08bc998dd8d532e0fd7d",
"testharness"
],
"web-animations/timing-model/animation-effects/simple-iteration-progress.html": [
"602fe7e6880e0b18329262699872c696f451d744",
"testharness"
],
"web-animations/timing-model/animations/canceling-an-animation.html": [
- "d82cbc5caf654b9811c90d5165fb0429891cb149",
+ "e03baa30d438529a0ebe39f0f623563aa9850d74",
"testharness"
],
"web-animations/timing-model/animations/finishing-an-animation.html": [
- "8d430adcb97bf3dab9703bc2d31be23e1adaec85",
+ "0debe6efc8608778c81a88608284a45077ec3276",
"testharness"
],
"web-animations/timing-model/animations/pausing-an-animation.html": [
- "c46fbcb8bc40fc3ee26e10802a205926ab97a84f",
+ "982440e635a0c5a437febac0e53a6eb7442db495",
"testharness"
],
"web-animations/timing-model/animations/play-states.html": [
"0ab2fa3a464001272d1af541ea769fa967490c3b",
"testharness"
],
"web-animations/timing-model/animations/playing-an-animation.html": [
- "1ae05a904e5b4fbcf1d904f02825f836da7b4c18",
+ "8a5f14ba7712e33bc2450d9ab9198f4865ef9244",
"testharness"
],
"web-animations/timing-model/animations/reversing-an-animation.html": [
- "195b9f36bf4d9a4c5d413b3fe7f7e544922d3f74",
+ "bba3a71bfcf0b2c9ab38af6a2d0bd98954becf95",
"testharness"
],
"web-animations/timing-model/animations/setting-the-start-time-of-an-animation.html": [
- "a7e9924aad3402e02cf65127a64c72d8a8be24e2",
+ "80bf466ba3d657200c2f2b6e783c56ba04b87390",
"testharness"
],
"web-animations/timing-model/animations/setting-the-target-effect-of-an-animation.html": [
- "cd2d4deb14300c5907b92bffd1866e64db04e537",
+ "13df24037116368b688d7d20c1dffdac027021b3",
"testharness"
],
"web-animations/timing-model/animations/setting-the-timeline-of-an-animation.html": [
- "31ccb50ef2d05090d698a4db521f10df66f14740",
+ "e4e134b566327c9d7316aee4f3e7fe4eeb2116ba",
"testharness"
],
"web-animations/timing-model/animations/the-current-time-of-an-animation.html": [
- "24feb084d66db8ec16b9c20785d17027f4754d9f",
+ "90ba3d81ee9e32b1f13845301c4ad1c8ad47f2f7",
"testharness"
],
"web-animations/timing-model/animations/updating-the-finished-state.html": [
- "c30161f7d5a20db616ade354133ae6a8989d149f",
+ "935ee51c2bb69cf7083d7e91311cc8adc95043c0",
"testharness"
],
"web-animations/timing-model/time-transformations/transformed-progress.html": [
"2e55f43def584a67eeb313f050154cd146002938",
"testharness"
],
"web-animations/timing-model/timelines/document-timelines.html": [
"d0fcb390c19c9ede7288278dc11ea5b3d33671cb",
--- 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
@@ -21,39 +21,38 @@ promise_test(t => {
});
animation.cancel();
return retPromise;
}, 'A play-pending ready promise should be rejected when the animation is'
+ ' canceled');
-promise_test(t => {
+promise_test(async t => {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
- return animation.ready.then(() => {
- animation.pause();
- // Set up listeners on pause-pending ready promise
- const retPromise = animation.ready.then(() => {
- assert_unreached('ready promise was fulfilled');
- }).catch(err => {
- assert_equals(err.name, 'AbortError',
- 'ready promise is rejected with AbortError');
- });
- animation.cancel();
- return retPromise;
- });
+ await animation.ready;
+
+ // Make it pause-pending
+ animation.pause();
+
+ // We need to store the original ready promise since cancel() will
+ // replace it
+ const originalPromise = animation.ready;
+ animation.cancel();
+
+ await promise_rejects(t, 'AbortError', originalPromise,
+ 'Cancel should abort ready promise');
}, 'A pause-pending ready promise should be rejected when the animation is'
+ ' canceled');
-promise_test(t => {
+promise_test(async t => {
const animation = createDiv(t).animate(null);
animation.cancel();
- return animation.ready.then(p => {
- assert_equals(p, animation);
- });
+ const promiseResult = await animation.ready;
+ assert_equals(promiseResult, animation);
}, 'When an animation is canceled, it should create a resolved Promise');
test(t => {
const animation = createDiv(t).animate(null);
const promise = animation.ready;
animation.cancel();
assert_not_equals(animation.ready, promise);
}, 'The ready promise should be replaced when the animation is canceled');
--- a/testing/web-platform/tests/web-animations/timing-model/animations/finishing-an-animation.html
+++ b/testing/web-platform/tests/web-animations/timing-model/animations/finishing-an-animation.html
@@ -6,26 +6,26 @@
<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';
-promise_test(t => {
+promise_test(async t => {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
const promise = animation.ready;
let readyResolved = false;
animation.finish();
animation.ready.then(() => { readyResolved = true; });
- return animation.finished.then(p => {
- assert_equals(p, animation);
- assert_equals(animation.ready, promise);
- assert_true(readyResolved);
- });
+ const promiseResult = await animation.finished;
+
+ assert_equals(promiseResult, animation);
+ assert_equals(animation.ready, promise);
+ assert_true(readyResolved);
}, 'A pending ready promise should be resolved and not replaced when the'
+ ' animation is finished');
</script>
</body>
--- 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
@@ -6,22 +6,23 @@
<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';
-promise_test(t => {
+promise_test(async t => {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
const promise = animation.ready;
animation.pause();
- return promise.then(p => {
- assert_equals(p, animation);
- assert_equals(animation.ready, promise);
- assert_false(animation.pending, 'No longer pause-pending');
- });
+
+ const promiseResult = await promise;
+
+ assert_equals(promiseResult, animation);
+ assert_equals(animation.ready, promise);
+ assert_false(animation.pending, 'No longer pause-pending');
}, 'A pending ready promise should be resolved and not replaced when the'
+ ' animation is paused');
</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
@@ -40,20 +40,19 @@ 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');
-promise_test(t => {
+promise_test(async t => {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
const promise = animation.ready;
- return promise.then(p => {
- assert_equals(p, animation);
- assert_equals(animation.ready, promise);
- });
+ const promiseResult = await promise;
+ assert_equals(promiseResult, animation);
+ assert_equals(animation.ready, promise);
}, 'A pending ready promise should be resolved and not replaced when the'
+ ' animation enters the running state');
</script>
</body>
--- a/testing/web-platform/tests/web-animations/timing-model/animations/reversing-an-animation.html
+++ b/testing/web-platform/tests/web-animations/timing-model/animations/reversing-an-animation.html
@@ -6,48 +6,49 @@
<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';
-promise_test(t => {
+promise_test(async t => {
const div = createDiv(t);
const animation = div.animate({}, { duration: 100 * MS_PER_SEC,
iterations: Infinity });
+ await animation.ready;
// Wait a frame because if currentTime is still 0 when we call
// reverse(), it will throw (per spec).
- return animation.ready.then(waitForAnimationFrames(1)).then(() => {
- assert_greater_than_equal(animation.currentTime, 0,
- 'currentTime expected to be greater than 0, one frame after starting');
- animation.currentTime = 50 * MS_PER_SEC;
- const previousPlaybackRate = animation.playbackRate;
- animation.reverse();
- assert_equals(animation.playbackRate, -previousPlaybackRate,
- 'playbackRate should be inverted');
- });
+ await waitForAnimationFrames(1);
+
+ assert_greater_than_equal(animation.currentTime, 0,
+ 'currentTime expected to be greater than 0, one frame after starting');
+ animation.currentTime = 50 * MS_PER_SEC;
+ const previousPlaybackRate = animation.playbackRate;
+ animation.reverse();
+ assert_equals(animation.playbackRate, -previousPlaybackRate,
+ 'playbackRate should be inverted');
}, 'Reversing an animation inverts the playback rate');
-promise_test(t => {
+promise_test(async t => {
const div = createDiv(t);
const animation = div.animate({}, { duration: 100 * MS_PER_SEC,
iterations: Infinity });
animation.currentTime = 50 * MS_PER_SEC;
animation.pause();
- return animation.ready.then(() => {
- animation.reverse();
- return animation.ready;
- }).then(() => {
- assert_equals(animation.playState, 'running',
- 'Animation.playState should be "running" after reverse()');
- });
+ await animation.ready;
+
+ animation.reverse();
+ await animation.ready;
+
+ assert_equals(animation.playState, 'running',
+ 'Animation.playState should be "running" after reverse()');
}, 'Reversing an animation plays a pausing animation');
test(t => {
const div = createDiv(t);
const animation = div.animate({}, 100 * MS_PER_SEC);
animation.currentTime = 50 * MS_PER_SEC;
animation.reverse();
@@ -64,29 +65,28 @@ test(t => {
'The animation is pending before we call reverse');
animation.reverse();
assert_true(animation.pending,
'The animation is still pending after calling reverse');
}, 'Reversing an animation does not cause it to leave the pending state');
-promise_test(t => {
+promise_test(async t => {
const div = createDiv(t);
const animation = div.animate({}, { duration: 200 * MS_PER_SEC,
delay: -100 * MS_PER_SEC });
let readyResolved = false;
animation.ready.then(() => { readyResolved = true; });
animation.reverse();
- return Promise.resolve(() => {
- assert_false(readyResolved,
- 'ready promise should not have been resolved yet');
- });
+ await Promise.resolve();
+ assert_false(readyResolved,
+ 'ready promise should not have been resolved yet');
}, 'Reversing an animation does not cause it to resolve the ready promise');
test(t => {
const div = createDiv(t);
const animation = div.animate({}, 100 * MS_PER_SEC);
animation.currentTime = 200 * MS_PER_SEC;
animation.reverse();
--- a/testing/web-platform/tests/web-animations/timing-model/animations/setting-the-start-time-of-an-animation.html
+++ b/testing/web-platform/tests/web-animations/timing-model/animations/setting-the-start-time-of-an-animation.html
@@ -107,17 +107,17 @@ test(t => {
assert_time_equals_literal(animation.currentTime, 1000,
'Hold time is set after start time is made'
+ ' unresolved');
assert_equals(animation.playState, 'paused',
'Animation reports it is paused after setting an unresolved'
+ ' start time');
}, 'Setting an unresolved start time sets the hold time');
-promise_test(t => {
+promise_test(async t => {
const animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
document.timeline);
let readyPromiseCallbackCalled = false;
animation.ready.then(() => { readyPromiseCallbackCalled = true; } );
// Put the animation in the play-pending state
@@ -130,23 +130,22 @@ promise_test(t => {
// Setting the start time should resolve the 'ready' promise, i.e.
// it should schedule a microtask to run the promise callbacks.
animation.startTime = document.timeline.currentTime;
assert_false(readyPromiseCallbackCalled,
'Ready promise callback is not called synchronously');
// If we schedule another microtask then it should run immediately after
// the ready promise resolution microtask.
- return Promise.resolve().then(() => {
- assert_true(readyPromiseCallbackCalled,
- 'Ready promise callback called after setting startTime');
- });
+ await Promise.resolve();
+ assert_true(readyPromiseCallbackCalled,
+ 'Ready promise callback called after setting startTime');
}, 'Setting the start time resolves a pending ready promise');
-promise_test(t => {
+promise_test(async t => {
const animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
document.timeline);
let readyPromiseCallbackCalled = false;
animation.ready.then(() => { readyPromiseCallbackCalled = true; } );
// Put the animation in the pause-pending state
@@ -158,23 +157,22 @@ promise_test(t => {
'Animation is in pause-pending state');
// Setting the start time should resolve the 'ready' promise although
// the resolution callbacks when be run in a separate microtask.
animation.startTime = null;
assert_false(readyPromiseCallbackCalled,
'Ready promise callback is not called synchronously');
- return Promise.resolve().then(() => {
- assert_true(readyPromiseCallbackCalled,
- 'Ready promise callback called after setting startTime');
- });
+ await Promise.resolve();
+ assert_true(readyPromiseCallbackCalled,
+ 'Ready promise callback called after setting startTime');
}, 'Setting the start time resolves a pending pause task');
-promise_test(t => {
+promise_test(async t => {
const animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
document.timeline);
// Set start time such that the current time is past the end time
animation.startTime = document.timeline.currentTime
- 110 * MS_PER_SEC;
assert_equals(animation.playState, 'finished',
@@ -185,17 +183,16 @@ promise_test(t => {
assert_greater_than(animation.currentTime,
animation.effect.getComputedTiming().endTime,
'Setting the start time updated the finished state with'
+ ' the \'did seek\' flag set to true');
// Furthermore, that time should persist if we have correctly updated
// the hold time
const finishedCurrentTime = animation.currentTime;
- return waitForAnimationFrames(1).then(() => {
- assert_equals(animation.currentTime, finishedCurrentTime,
- 'Current time does not change after seeking past the effect'
- + ' end time by setting the current time');
- });
+ await waitForAnimationFrames(1);
+ assert_equals(animation.currentTime, finishedCurrentTime,
+ 'Current time does not change after seeking past the effect'
+ + ' end time by setting the current time');
}, 'Setting the start time updates the finished state');
</script>
</body>
--- a/testing/web-platform/tests/web-animations/timing-model/animations/setting-the-target-effect-of-an-animation.html
+++ b/testing/web-platform/tests/web-animations/timing-model/animations/setting-the-target-effect-of-an-animation.html
@@ -26,60 +26,58 @@ promise_test(t => {
// This is a bit odd, see: https://github.com/w3c/web-animations/issues/207
assert_equals(anim.playState, 'paused');
assert_false(anim.pending);
return retPromise;
}, 'If new effect is null and old effect is not null, we reset the pending ' +
'tasks and ready promise is rejected');
-promise_test(t => {
+promise_test(async t => {
const anim = new Animation();
anim.pause();
assert_true(anim.pending);
anim.effect = new KeyframeEffectReadOnly(createDiv(t),
{ marginLeft: [ '0px', '100px' ] },
100 * MS_PER_SEC);
assert_true(anim.pending);
+ await anim.ready;
- return anim.ready.then(() => {
- assert_false(anim.pending);
- assert_equals(anim.playState, 'paused');
- });
+ assert_false(anim.pending);
+ assert_equals(anim.playState, 'paused');
}, 'If animation has a pending pause task, reschedule that task to run ' +
'as soon as animation is ready.');
-promise_test(t => {
+promise_test(async t => {
const anim = new Animation();
anim.play();
assert_true(anim.pending);
anim.effect = new KeyframeEffectReadOnly(createDiv(t),
{ marginLeft: [ '0px', '100px' ] },
100 * MS_PER_SEC);
assert_true(anim.pending);
+ await anim.ready;
- return anim.ready.then(() => {
- assert_false(anim.pending);
- assert_equals(anim.playState, 'running');
- });
+ assert_false(anim.pending);
+ assert_equals(anim.playState, 'running');
}, 'If animation has a pending play task, reschedule that task to run ' +
'as soon as animation is ready to play new effect.');
-promise_test(t => {
+promise_test(async t => {
const animA = createDiv(t).animate({ marginLeft: [ '0px', '100px' ] },
100 * MS_PER_SEC);
const animB = new Animation();
- return animA.ready.then(() => {
- animB.effect = animA.effect;
- assert_equals(animA.effect, null);
- assert_equals(animA.playState, 'finished');
- });
+ await animA.ready;
+
+ animB.effect = animA.effect;
+ assert_equals(animA.effect, null);
+ assert_equals(animA.playState, 'finished');
}, 'When setting the effect of an animation to the effect of an existing ' +
'animation, the existing animation\'s target effect should be set to null.');
test(t => {
const animA = createDiv(t).animate({ marginLeft: [ '0px', '100px' ] },
100 * MS_PER_SEC);
const animB = new Animation();
const effect = animA.effect;
--- a/testing/web-platform/tests/web-animations/timing-model/animations/setting-the-timeline-of-an-animation.html
+++ b/testing/web-platform/tests/web-animations/timing-model/animations/setting-the-timeline-of-an-animation.html
@@ -76,55 +76,53 @@ test(t => {
assert_equals(animation.playState, 'idle');
animation.timeline = document.timeline;
assert_equals(animation.playState, 'finished');
}, 'After setting timeline on an idle animation with a sufficiently ancient'
+ ' start time it is finished');
-promise_test(t => {
+promise_test(async t => {
const animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
null);
animation.play();
assert_true(animation.pending && animation.playState === 'running',
'Animation is initially play-pending');
animation.timeline = document.timeline;
assert_true(animation.pending && animation.playState === 'running',
'Animation is still play-pending after setting timeline');
- return animation.ready.then(() => {
- assert_true(!animation.pending && animation.playState === 'running',
- 'Animation plays after it finishes pending');
- });
+ await animation.ready;
+ assert_true(!animation.pending && animation.playState === 'running',
+ 'Animation plays after it finishes pending');
}, 'After setting timeline on a play-pending animation it begins playing'
+ ' after pending');
-promise_test(t => {
+promise_test(async t => {
const animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
null);
animation.startTime = document.timeline.currentTime;
animation.pause();
animation.timeline = null;
assert_true(animation.pending && animation.playState === 'paused',
'Animation is initially pause-pending');
animation.timeline = document.timeline;
assert_true(animation.pending && animation.playState === 'paused',
'Animation is still pause-pending after setting timeline');
- return animation.ready.then(() => {
- assert_true(!animation.pending && animation.playState === 'paused',
- 'Animation pauses after it finishes pending');
- });
+ await animation.ready;
+ assert_true(!animation.pending && animation.playState === 'paused',
+ 'Animation pauses after it finishes pending');
}, 'After setting timeline on a pause-pending animation it becomes paused'
+ ' after pending');
// ---------------------------------------------------------------------
//
// Tests from timeline to no timeline
//
// ---------------------------------------------------------------------
@@ -188,73 +186,70 @@ test(t => {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
assert_true(animation.pending && animation.playState === 'running');
animation.timeline = null;
assert_true(animation.pending && animation.playState === 'running');
}, 'After clearing timeline on play-pending animation it is still pending');
-promise_test(t => {
+promise_test(async t => {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
assert_true(animation.pending && animation.playState === 'running');
animation.timeline = null;
animation.timeline = document.timeline;
assert_true(animation.pending && animation.playState === 'running');
- return animation.ready.then(() => {
- assert_true(!animation.pending && animation.playState === 'running');
- });
+ await animation.ready;
+ assert_true(!animation.pending && animation.playState === 'running');
}, 'After clearing and re-setting timeline on play-pending animation it'
+ ' begins to play');
test(t => {
const animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
document.timeline);
animation.startTime = document.timeline.currentTime;
animation.pause();
assert_true(animation.pending && animation.playState === 'paused');
animation.timeline = null;
assert_true(animation.pending && animation.playState === 'paused');
}, 'After clearing timeline on a pause-pending animation it is still pending');
-promise_test(t => {
+promise_test(async t => {
const animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
document.timeline);
animation.startTime = document.timeline.currentTime;
animation.pause();
assert_true(animation.pending && animation.playState === 'paused');
animation.timeline = null;
animation.timeline = document.timeline;
assert_true(animation.pending && animation.playState === 'paused');
- return animation.ready.then(() => {
- assert_true(!animation.pending && animation.playState === 'paused');
- });
+ await animation.ready;
+ assert_true(!animation.pending && animation.playState === 'paused');
}, 'After clearing and re-setting timeline on a pause-pending animation it'
+ ' completes pausing');
-promise_test(t => {
+promise_test(async t => {
const animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
document.timeline);
const initialStartTime = document.timeline.currentTime - 50 * MS_PER_SEC;
animation.startTime = initialStartTime;
animation.pause();
animation.play();
animation.timeline = null;
animation.timeline = document.timeline;
- return animation.ready.then(() => {
- assert_times_equal(animation.startTime, initialStartTime);
- });
+ await animation.ready;
+ assert_times_equal(animation.startTime, initialStartTime);
}, 'After clearing and re-setting timeline on an animation in the middle of'
+ ' an aborted pause, it continues playing using the same start time');
</script>
</body>
--- a/testing/web-platform/tests/web-animations/timing-model/animations/the-current-time-of-an-animation.html
+++ b/testing/web-platform/tests/web-animations/timing-model/animations/the-current-time-of-an-animation.html
@@ -16,24 +16,23 @@ test(t => {
document.timeline);
animation.play();
assert_equals(animation.currentTime, 0,
'Current time returns the hold time set when entering the play-pending ' +
'state');
}, 'The current time returns the hold time when set');
-promise_test(t => {
+promise_test(async t => {
const animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
null);
- return animation.ready.then(() => {
- assert_equals(animation.currentTime, null);
- });
+ await animation.ready;
+ assert_equals(animation.currentTime, null);
}, 'The current time is unresolved when there is no associated timeline ' +
'(and no hold time is set)');
// FIXME: Test that the current time is unresolved when we have an inactive
// timeline if we find a way of creating an inactive timeline!
test(t => {
const animation =
@@ -57,20 +56,19 @@ test(t => {
const startTime = animation.startTime;
const playbackRate = animation.playbackRate;
assert_times_equal(animation.currentTime,
(timelineTime - startTime) * playbackRate,
'Animation has a unresolved start time');
}, 'The current time is calculated from the timeline time, start time and ' +
'playback rate');
-promise_test(t => {
+promise_test(async t => {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
animation.playbackRate = 0;
- return animation.ready.then(() => waitForAnimationFrames(1))
- .then(() => {
- assert_time_equals_literal(animation.currentTime, 0);
- });
+ await animation.ready;
+ await waitForAnimationFrames(1);
+ assert_time_equals_literal(animation.currentTime, 0);
}, 'The current time does not progress if playback rate is 0');
</script>
</body>
--- a/testing/web-platform/tests/web-animations/timing-model/animations/updating-the-finished-state.html
+++ b/testing/web-platform/tests/web-animations/timing-model/animations/updating-the-finished-state.html
@@ -15,251 +15,254 @@
// TESTS FOR UPDATING THE HOLD TIME
//
// --------------------------------------------------------------------
// CASE 1: playback rate > 0 and current time >= target effect end
// (Also the start time is resolved and there is pending task)
// Did seek = false
-promise_test(t => {
+promise_test(async t => {
const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
// Here and in the following tests we wait until ready resolves as
// otherwise we don't have a resolved start time. We test the case
// where the start time is unresolved in a subsequent test.
- return anim.ready.then(() => {
- // Seek to 1ms before the target end and then wait 1ms
- anim.currentTime = 100 * MS_PER_SEC - 1;
- return waitForAnimationFramesWithDelay(1);
- }).then(() => {
- assert_equals(anim.currentTime, 100 * MS_PER_SEC,
- 'Hold time is set to target end clamping current time');
- });
+ await anim.ready;
+
+ // Seek to 1ms before the target end and then wait 1ms
+ anim.currentTime = 100 * MS_PER_SEC - 1;
+ await waitForAnimationFramesWithDelay(1);
+
+ assert_equals(anim.currentTime, 100 * MS_PER_SEC,
+ 'Hold time is set to target end clamping current time');
}, 'Updating the finished state when playing past end');
// Did seek = true
-promise_test(t => {
+promise_test(async t => {
const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
- return anim.ready.then(() => {
- anim.currentTime = 200 * MS_PER_SEC;
- return waitForNextFrame();
- }).then(() => {
- assert_equals(anim.currentTime, 200 * MS_PER_SEC,
- 'Hold time is set so current time should NOT change');
- });
+
+ await anim.ready;
+
+ anim.currentTime = 200 * MS_PER_SEC;
+ await waitForNextFrame();
+
+ assert_equals(anim.currentTime, 200 * MS_PER_SEC,
+ 'Hold time is set so current time should NOT change');
}, 'Updating the finished state when seeking past end');
// Test current time == target end
//
// We can't really write a test for current time == target end with
// did seek = false since that would imply setting up an animation where
// the next animation frame time happens to exactly align with the target end.
//
// Fortunately, we don't need to test that case since even if the implementation
// fails to set the hold time on such a tick, it should be mostly unobservable
// (on the subsequent tick the hold time will be set to the same value anyway).
// Did seek = true
-promise_test(t => {
+promise_test(async t => {
const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
- return anim.ready.then(() => {
- anim.currentTime = 100 * MS_PER_SEC;
- return waitForNextFrame();
- }).then(() => {
- assert_equals(anim.currentTime, 100 * MS_PER_SEC,
- 'Hold time is set so current time should NOT change');
- });
+ await anim.ready;
+
+ anim.currentTime = 100 * MS_PER_SEC;
+ await waitForNextFrame();
+
+ assert_equals(anim.currentTime, 100 * MS_PER_SEC,
+ 'Hold time is set so current time should NOT change');
}, 'Updating the finished state when seeking exactly to end');
// CASE 2: playback rate < 0 and current time <= 0
// (Also the start time is resolved and there is pending task)
// Did seek = false
-promise_test(t => {
+promise_test(async t => {
const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
anim.playbackRate = -1;
anim.play(); // Make sure animation is not initially finished
- return anim.ready.then(() => {
- // Seek to 1ms before 0 and then wait 1ms
- anim.currentTime = 1;
- return waitForAnimationFramesWithDelay(1);
- }).then(() => {
- assert_equals(anim.currentTime, 0 * MS_PER_SEC,
- 'Hold time is set to zero clamping current time');
- });
+
+ await anim.ready;
+
+ // Seek to 1ms before 0 and then wait 1ms
+ anim.currentTime = 1;
+ await waitForAnimationFramesWithDelay(1);
+
+ assert_equals(anim.currentTime, 0 * MS_PER_SEC,
+ 'Hold time is set to zero clamping current time');
}, 'Updating the finished state when playing in reverse past zero');
// Did seek = true
-promise_test(t => {
+promise_test(async t => {
const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
anim.playbackRate = -1;
anim.play();
- return anim.ready.then(() => {
- anim.currentTime = -100 * MS_PER_SEC;
- return waitForNextFrame();
- }).then(() => {
- assert_equals(anim.currentTime, -100 * MS_PER_SEC,
- 'Hold time is set so current time should NOT change');
- });
+
+ await anim.ready;
+
+ anim.currentTime = -100 * MS_PER_SEC;
+ await waitForNextFrame();
+
+ assert_equals(anim.currentTime, -100 * MS_PER_SEC,
+ 'Hold time is set so current time should NOT change');
}, 'Updating the finished state when seeking a reversed animation past zero');
// As before, it's difficult to test current time == 0 for did seek = false but
// it doesn't really matter.
// Did seek = true
-promise_test(t => {
+promise_test(async t => {
const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
anim.playbackRate = -1;
anim.play();
- return anim.ready.then(() => {
- anim.currentTime = 0;
- return waitForNextFrame();
- }).then(() => {
- assert_equals(anim.currentTime, 0 * MS_PER_SEC,
- 'Hold time is set so current time should NOT change');
- });
+ await anim.ready;
+
+ anim.currentTime = 0;
+ await waitForNextFrame();
+
+ assert_equals(anim.currentTime, 0 * MS_PER_SEC,
+ 'Hold time is set so current time should NOT change');
}, 'Updating the finished state when seeking a reversed animation exactly'
+ ' to zero');
// CASE 3: playback rate > 0 and current time < target end OR
// playback rate < 0 and current time > 0
// (Also the start time is resolved and there is pending task)
// Did seek = false; playback rate > 0
-promise_test(t => {
+promise_test(async t => {
const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
// We want to test that the hold time is cleared so first we need to
// put the animation in a state where the hold time is set.
anim.finish();
- return anim.ready.then(() => {
- assert_equals(anim.currentTime, 100 * MS_PER_SEC,
- 'Hold time is initially set');
- // Then extend the duration so that the hold time is cleared and on
- // the next tick the current time will increase.
- anim.effect.timing.duration *= 2;
- return waitForNextFrame();
- }).then(() => {
- assert_greater_than(anim.currentTime, 100 * MS_PER_SEC,
- 'Hold time is not set so current time should increase');
- });
+ await anim.ready;
+
+ assert_equals(anim.currentTime, 100 * MS_PER_SEC,
+ 'Hold time is initially set');
+ // Then extend the duration so that the hold time is cleared and on
+ // the next tick the current time will increase.
+ anim.effect.timing.duration *= 2;
+ await waitForNextFrame();
+
+ assert_greater_than(anim.currentTime, 100 * MS_PER_SEC,
+ 'Hold time is not set so current time should increase');
}, 'Updating the finished state when playing before end');
// Did seek = true; playback rate > 0
-promise_test(t => {
+promise_test(async t => {
const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
anim.finish();
- return anim.ready.then(() => {
- anim.currentTime = 50 * MS_PER_SEC;
- // When did seek = true, updating the finished state: (i) updates
- // the animation's start time and (ii) clears the hold time.
- // We can test both by checking that the currentTime is initially
- // updated and then increases.
- assert_equals(anim.currentTime, 50 * MS_PER_SEC, 'Start time is updated');
- return waitForNextFrame();
- }).then(() => {
- assert_greater_than(anim.currentTime, 50 * MS_PER_SEC,
- 'Hold time is not set so current time should increase');
- });
+ await anim.ready;
+
+ anim.currentTime = 50 * MS_PER_SEC;
+ // When did seek = true, updating the finished state: (i) updates
+ // the animation's start time and (ii) clears the hold time.
+ // We can test both by checking that the currentTime is initially
+ // updated and then increases.
+ assert_equals(anim.currentTime, 50 * MS_PER_SEC, 'Start time is updated');
+ await waitForNextFrame();
+
+ assert_greater_than(anim.currentTime, 50 * MS_PER_SEC,
+ 'Hold time is not set so current time should increase');
}, 'Updating the finished state when seeking before end');
// Did seek = false; playback rate < 0
//
// Unfortunately it is not possible to test this case. We need to have
// a hold time set, a resolved start time, and then perform some
// operation that updates the finished state with did seek set to true.
//
// However, the only situation where this could arrive is when we
// replace the timeline and that procedure is likely to change. For all
// other cases we either have an unresolved start time (e.g. when
// paused), we don't have a set hold time (e.g. regular playback), or
// the current time is zero (and anything that gets us out of that state
// will set did seek = true).
// Did seek = true; playback rate < 0
-promise_test(t => {
+promise_test(async t => {
const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
anim.playbackRate = -1;
- return anim.ready.then(() => {
- anim.currentTime = 50 * MS_PER_SEC;
- assert_equals(anim.currentTime, 50 * MS_PER_SEC, 'Start time is updated');
- return waitForNextFrame();
- }).then(() => {
- assert_less_than(anim.currentTime, 50 * MS_PER_SEC,
- 'Hold time is not set so current time should decrease');
- });
+ await anim.ready;
+
+ anim.currentTime = 50 * MS_PER_SEC;
+ assert_equals(anim.currentTime, 50 * MS_PER_SEC, 'Start time is updated');
+ await waitForNextFrame();
+
+ assert_less_than(anim.currentTime, 50 * MS_PER_SEC,
+ 'Hold time is not set so current time should decrease');
}, 'Updating the finished state when seeking a reversed animation before end');
// CASE 4: playback rate == 0
// current time < 0
-promise_test(t => {
+promise_test(async t => {
const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
anim.playbackRate = 0;
- return anim.ready.then(() => {
- anim.currentTime = -100 * MS_PER_SEC;
- return waitForNextFrame();
- }).then(() => {
- assert_equals(anim.currentTime, -100 * MS_PER_SEC,
- 'Hold time should not be cleared so current time should'
- + ' NOT change');
- });
+ await anim.ready;
+
+ anim.currentTime = -100 * MS_PER_SEC;
+ await waitForNextFrame();
+
+ assert_equals(anim.currentTime, -100 * MS_PER_SEC,
+ 'Hold time should not be cleared so current time should'
+ + ' NOT change');
}, 'Updating the finished state when playback rate is zero and the'
+ ' current time is less than zero');
// current time < target end
-promise_test(t => {
+promise_test(async t => {
const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
anim.playbackRate = 0;
- return anim.ready.then(() => {
- anim.currentTime = 50 * MS_PER_SEC;
- return waitForNextFrame();
- }).then(() => {
- assert_equals(anim.currentTime, 50 * MS_PER_SEC,
- 'Hold time should not be cleared so current time should'
- + ' NOT change');
- });
+ await anim.ready;
+
+ anim.currentTime = 50 * MS_PER_SEC;
+ await waitForNextFrame();
+
+ assert_equals(anim.currentTime, 50 * MS_PER_SEC,
+ 'Hold time should not be cleared so current time should'
+ + ' NOT change');
}, 'Updating the finished state when playback rate is zero and the'
+ ' current time is less than end');
// current time > target end
-promise_test(t => {
+promise_test(async t => {
const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
anim.playbackRate = 0;
- return anim.ready.then(() => {
- anim.currentTime = 200 * MS_PER_SEC;
- return waitForNextFrame();
- }).then(() => {
- assert_equals(anim.currentTime, 200 * MS_PER_SEC,
- 'Hold time should not be cleared so current time should'
- + ' NOT change');
- });
+ await anim.ready;
+
+ anim.currentTime = 200 * MS_PER_SEC;
+ await waitForNextFrame();
+
+ assert_equals(anim.currentTime, 200 * MS_PER_SEC,
+ 'Hold time should not be cleared so current time should'
+ + ' NOT change');
}, 'Updating the finished state when playback rate is zero and the'
+ ' current time is greater than end');
// CASE 5: current time unresolved
-promise_test(t => {
+promise_test(async t => {
const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
anim.cancel();
// Trigger a change that will cause the "update the finished state"
// procedure to run.
anim.effect.timing.duration = 200 * MS_PER_SEC;
assert_equals(anim.currentTime, null,
'The animation hold time / start time should not be updated');
// The "update the finished state" procedure is supposed to run after any
// change to timing, but just in case an implementation defers that, let's
// wait a frame and check that the hold time / start time has still not been
// updated.
- return waitForAnimationFrames(1).then(() => {
- assert_equals(anim.currentTime, null,
- 'The animation hold time / start time should not be updated');
- });
+ await waitForAnimationFrames(1);
+
+ assert_equals(anim.currentTime, null,
+ 'The animation hold time / start time should not be updated');
}, 'Updating the finished state when current time is unresolved');
// CASE 6: has a pending task
test(t => {
const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
anim.cancel();
anim.currentTime = 75 * MS_PER_SEC;
@@ -273,31 +276,31 @@ test(t => {
anim.effect.timing.duration = 50 * MS_PER_SEC;
assert_equals(anim.currentTime, 75 * MS_PER_SEC,
'Hold time should not be updated');
}, 'Updating the finished state when there is a pending task');
// CASE 7: start time unresolved
// Did seek = false
-promise_test(t => {
+promise_test(async t => {
const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
anim.cancel();
// Make it so that only the start time is unresolved (to avoid overlapping
// with the test case where current time is unresolved)
anim.currentTime = 150 * MS_PER_SEC;
// Trigger a change that will cause the "update the finished state"
// procedure to run (did seek = false).
anim.effect.timing.duration = 200 * MS_PER_SEC;
- return waitForAnimationFrames(1).then(() => {
- assert_equals(anim.currentTime, 150 * MS_PER_SEC,
- 'The animation hold time should not be updated');
- assert_equals(anim.startTime, null,
- 'The animation start time should not be updated');
- });
+ await waitForAnimationFrames(1);
+
+ assert_equals(anim.currentTime, 150 * MS_PER_SEC,
+ 'The animation hold time should not be updated');
+ assert_equals(anim.startTime, null,
+ 'The animation start time should not be updated');
}, 'Updating the finished state when start time is unresolved and'
+ ' did seek = false');
// Did seek = true
test(t => {
const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
anim.cancel();
anim.currentTime = 150 * MS_PER_SEC;
@@ -332,63 +335,61 @@ promise_test(t => {
t.unreached_func('Seeking to finish should not resolve finished promise'));
animation.currentTime = 1;
animation.currentTime = 0;
animation.pause();
return waitForAnimationFrames(3);
}, 'Finish notification steps don\'t run when the animation seeks to finish'
+ ' and then seeks back again');
-promise_test(t => {
+promise_test(async t => {
const animation = createDiv(t).animate(null, 1);
- return animation.ready.then(() => {
- return waitForFinishEventAndPromise(animation);
- });
+ await animation.ready;
+
+ return waitForFinishEventAndPromise(animation);
}, 'Finish notification steps run when the animation completes normally');
-promise_test(t => {
+promise_test(async t => {
const animation = createDiv(t).animate(null, 1);
- return animation.ready.then(() => {
- animation.currentTime = 10;
- return waitForFinishEventAndPromise(animation);
- });
+ await animation.ready;
+
+ animation.currentTime = 10;
+ return waitForFinishEventAndPromise(animation);
}, 'Finish notification steps run when the animation seeks past finish');
-promise_test(t => {
+promise_test(async t => {
const animation = createDiv(t).animate(null, 1);
- return animation.ready.then(() => {
- // Register for notifications now since once we seek away from being
- // finished the 'finished' promise will be replaced.
- const finishNotificationSteps = waitForFinishEventAndPromise(animation);
- animation.finish();
- animation.currentTime = 0;
- animation.pause();
- return finishNotificationSteps;
- });
+ await animation.ready;
+
+ // Register for notifications now since once we seek away from being
+ // finished the 'finished' promise will be replaced.
+ const finishNotificationSteps = waitForFinishEventAndPromise(animation);
+ animation.finish();
+ animation.currentTime = 0;
+ animation.pause();
+ return finishNotificationSteps;
}, 'Finish notification steps run when the animation completes with .finish(),'
+ ' even if we then seek away');
-promise_test(t => {
+promise_test(async t => {
const animation = createDiv(t).animate(null, 1);
const initialFinishedPromise = animation.finished;
+ await animation.finished;
- return animation.finished.then(target => {
- animation.currentTime = 0;
- assert_not_equals(initialFinishedPromise, animation.finished);
- });
+ animation.currentTime = 0;
+ assert_not_equals(initialFinishedPromise, animation.finished);
}, 'Animation finished promise is replaced after seeking back to start');
-promise_test(t => {
+promise_test(async t => {
const animation = createDiv(t).animate(null, 1);
const initialFinishedPromise = animation.finished;
+ await animation.finished;
- return animation.finished.then(target => {
- animation.play();
- assert_not_equals(initialFinishedPromise, animation.finished);
- });
+ animation.play();
+ assert_not_equals(initialFinishedPromise, animation.finished);
}, 'Animation finished promise is replaced after replaying from start');
async_test(t => {
const animation = createDiv(t).animate(null, 1);
animation.onfinish = event => {
animation.currentTime = 0;
animation.onfinish = event => {
t.done();