--- a/dom/animation/test/css-animations/test_animation-cancel.html
+++ b/dom/animation/test/css-animations/test_animation-cancel.html
@@ -15,74 +15,75 @@
to { margin-left: 200px }
}
</style>
<body>
<div id="log"></div>
<script>
'use strict';
-promise_test(t => {
+promise_test(async t => {
const div = addDiv(t, { style: 'animation: translateAnim 100s' });
const animation = div.getAnimations()[0];
- return animation.ready.then(() => {
- assert_not_equals(getComputedStyle(div).transform, 'none',
- 'transform style is animated before cancelling');
- animation.cancel();
- assert_equals(getComputedStyle(div).transform, 'none',
- 'transform style is no longer animated after cancelling');
- });
+ await animation.ready;
+
+ assert_not_equals(getComputedStyle(div).transform, 'none',
+ 'transform style is animated before cancelling');
+ animation.cancel();
+ assert_equals(getComputedStyle(div).transform, 'none',
+ 'transform style is no longer animated after cancelling');
}, 'Animated style is cleared after cancelling a running CSS animation');
-promise_test(t => {
+promise_test(async t => {
const div = addDiv(t, { style: 'animation: translateAnim 100s forwards' });
const animation = div.getAnimations()[0];
animation.finish();
- return animation.ready.then(() => {
- assert_not_equals(getComputedStyle(div).transform, 'none',
- 'transform style is filling before cancelling');
- animation.cancel();
- assert_equals(getComputedStyle(div).transform, 'none',
- 'fill style is cleared after cancelling');
- });
+ await animation.ready;
+
+ assert_not_equals(getComputedStyle(div).transform, 'none',
+ 'transform style is filling before cancelling');
+ animation.cancel();
+ assert_equals(getComputedStyle(div).transform, 'none',
+ 'fill style is cleared after cancelling');
}, 'Animated style is cleared after cancelling a filling CSS animation');
test(t => {
const div = addDiv(t, { style: 'animation: marginLeftAnim 100s linear' });
const animation = div.getAnimations()[0];
animation.cancel();
assert_equals(getComputedStyle(div).marginLeft, '0px',
'margin-left style is not animated after cancelling');
animation.currentTime = 50 * 1000;
assert_equals(getComputedStyle(div).marginLeft, '50px',
'margin-left style is updated when cancelled animation is'
+ ' seeked');
}, 'After canceling an animation, it can still be seeked');
-promise_test(t => {
+promise_test(async t => {
const div =
addDiv(t, { style: 'animation: marginLeftAnim100To200 100s linear' });
const animation = div.getAnimations()[0];
- return animation.ready.then(() => {
- animation.cancel();
- assert_equals(getComputedStyle(div).marginLeft, '0px',
- 'margin-left style is not animated after cancelling');
- animation.play();
- assert_equals(getComputedStyle(div).marginLeft, '100px',
- 'margin-left style is animated after re-starting animation');
- return animation.ready;
- }).then(() => {
- assert_equals(animation.playState, 'running',
- 'Animation succeeds in running after being re-started');
- });
+ await animation.ready;
+
+ animation.cancel();
+ assert_equals(getComputedStyle(div).marginLeft, '0px',
+ 'margin-left style is not animated after cancelling');
+ animation.play();
+ assert_equals(getComputedStyle(div).marginLeft, '100px',
+ 'margin-left style is animated after re-starting animation');
+
+ await animation.ready;
+
+ assert_equals(animation.playState, 'running',
+ 'Animation succeeds in running after being re-started');
}, 'After cancelling an animation, it can still be re-used');
test(t => {
const div =
addDiv(t, { style: 'animation: marginLeftAnim100To200 100s linear' });
const animation = div.getAnimations()[0];
animation.cancel();
assert_equals(getComputedStyle(div).marginLeft, '0px',
@@ -128,66 +129,68 @@ test(t => {
div.style.animationPlayState = 'running';
assert_equals(animation.playState, 'idle',
'Animation is still idle after re-setting'
+ ' animation-play-state: running');
}, 'After cancelling an animation, updating animation-play-state doesn\'t'
+ ' make it live again');
-promise_test(t => {
+promise_test(async t => {
const div = addDiv(t, { style: 'animation: translateAnim 10s both' });
div.style.marginLeft = '0px';
const animation = div.getAnimations()[0];
- return animation.ready.then(() => {
- assert_equals(animation.playState, 'running');
+ await animation.ready;
+
+ assert_equals(animation.playState, 'running');
- div.style.animationName = 'none';
- flushComputedStyle(div);
- return waitForFrame();
- }).then(() => {
- assert_equals(animation.playState, 'idle');
- assert_equals(getComputedStyle(div).marginLeft, '0px');
- });
+ div.style.animationName = 'none';
+ flushComputedStyle(div);
+
+ await waitForFrame();
+
+ assert_equals(animation.playState, 'idle');
+ assert_equals(getComputedStyle(div).marginLeft, '0px');
}, 'Setting animation-name to \'none\' cancels the animation');
-promise_test(t => {
+promise_test(async t => {
const div = addDiv(t, { style: 'animation: translateAnim 10s both' });
const animation = div.getAnimations()[0];
- return animation.ready.then(() => {
- assert_equals(animation.playState, 'running');
+ await animation.ready;
+
+ assert_equals(animation.playState, 'running');
- div.style.display = 'none';
- return waitForFrame();
- }).then(() => {
- assert_equals(animation.playState, 'idle');
- assert_equals(getComputedStyle(div).marginLeft, '0px');
- });
+ div.style.display = 'none';
+
+ await waitForFrame();
+
+ assert_equals(animation.playState, 'idle');
+ assert_equals(getComputedStyle(div).marginLeft, '0px');
}, 'Setting display:none on an element cancel its animations');
-promise_test(t => {
+promise_test(async t => {
const parentDiv = addDiv(t);
const childDiv = document.createElement('div');
parentDiv.appendChild(childDiv);
childDiv.setAttribute('style', 'animation: translateAnim 10s both');
flushComputedStyle(childDiv);
const animation = childDiv.getAnimations()[0];
- return animation.ready.then(() => {
- assert_equals(animation.playState, 'running');
+ await animation.ready;
+
+ assert_equals(animation.playState, 'running');
- parentDiv.style.display = 'none';
- return waitForFrame();
- }).then(() => {
- assert_equals(animation.playState, 'idle');
- assert_equals(getComputedStyle(childDiv).marginLeft, '0px');
- });
+ parentDiv.style.display = 'none';
+ await waitForFrame();
+
+ assert_equals(animation.playState, 'idle');
+ assert_equals(getComputedStyle(childDiv).marginLeft, '0px');
}, 'Setting display:none on an ancestor element cancels animations on ' +
'descendants');
</script>
</body>
</html>
--- a/dom/animation/test/css-animations/test_animation-computed-timing.html
+++ b/dom/animation/test/css-animations/test_animation-computed-timing.html
@@ -262,30 +262,31 @@ test(t => {
test(t => {
const div = addDiv(t, {style: 'animation: moveAnimation 100s'});
const anim = div.getAnimations()[0];
anim.currentTime = 5 * MS_PER_SEC;
assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
'current localTime after setting currentTime');
}, 'localTime of an animation is always equal to currentTime');
-promise_test(t => {
+promise_test(async t => {
const div = addDiv(t, {style: 'animation: moveAnimation 100s'});
const anim = div.getAnimations()[0];
anim.playbackRate = 2; // 2 times faster
- return anim.ready.then(() => {
- assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
- 'localTime is equal to currentTime');
- return waitForFrame();
- }).then(() => {
- assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
- 'localTime is equal to currentTime');
- });
+ await anim.ready;
+
+ assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
+ 'localTime is equal to currentTime');
+
+ await waitForFrame();
+
+ assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
+ 'localTime is equal to currentTime');
}, 'localTime reflects playbackRate immediately');
test(t => {
const div = addDiv(t);
const effect = new KeyframeEffect(div, {left: ["0px", "100px"]});
assert_equals(effect.getComputedTiming().localTime, null,
'localTime for orphaned effect');
--- a/dom/animation/test/css-animations/test_animation-currenttime.html
+++ b/dom/animation/test/css-animations/test_animation-currenttime.html
@@ -59,286 +59,280 @@ test(t => {
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(t => {
+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];
- return animation.ready.then(() => {
- // the 0.0001 here is for rounding error
- 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');
+ await animation.ready;
- animation.currentTime = 100 * MS_PER_SEC;
- return eventWatcher.wait_for('animationstart');
- }).then(() => {
- animation.currentTime = 200 * MS_PER_SEC;
- return eventWatcher.wait_for('animationend');
- });
+ 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(t => {
+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;
- return eventWatcher.wait_for(['animationstart', 'animationend']).then(() => {
- 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');
+ await eventWatcher.wait_for(['animationstart', 'animationend']);
- animation.currentTime = 150 * MS_PER_SEC;
- return eventWatcher.wait_for('animationstart');
- }).then(() => {
- animation.currentTime = 0;
- return eventWatcher.wait_for('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(t => {
+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;
- return waitForAnimationFrames(2);
+ // Check there are no events
+ await waitForAnimationFrames(2);
}, 'Redundant change, before -> active, then back');
-promise_test(t => {
+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;
- return waitForAnimationFrames(2);
+ // Check there are no events
+ await waitForAnimationFrames(2);
}, 'Redundant change, before -> after, then back');
-promise_test(t => {
+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];
- const retPromise = eventWatcher.wait_for('animationstart').then(() => {
- animation.currentTime = 50 * MS_PER_SEC;
- animation.currentTime = 150 * MS_PER_SEC;
-
- return waitForAnimationFrames(2);
- });
- // get us into the initial state:
+ // Get us into the initial state:
animation.currentTime = 150 * MS_PER_SEC;
- return retPromise;
+ 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');
-promise_test(t => {
+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];
- const retPromise = eventWatcher.wait_for('animationstart').then(() => {
- animation.currentTime = 250 * MS_PER_SEC;
- animation.currentTime = 150 * MS_PER_SEC;
-
- return waitForAnimationFrames(2);
- });
- // get us into the initial state:
+ // Get us into the initial state:
animation.currentTime = 150 * MS_PER_SEC;
- return retPromise;
+ 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(t => {
+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];
- const retPromise = eventWatcher.wait_for(['animationstart',
- 'animationend']).then(() => {
- animation.currentTime = 50 * MS_PER_SEC;
- animation.currentTime = 250 * MS_PER_SEC;
-
- return waitForAnimationFrames(2);
- });
- // get us into the initial state:
+ // Get us into the initial state:
animation.currentTime = 250 * MS_PER_SEC;
- return retPromise;
+ 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(t => {
+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];
- const retPromise = eventWatcher.wait_for(['animationstart',
- 'animationend']).then(() => {
- animation.currentTime = 150 * MS_PER_SEC;
- animation.currentTime = 250 * MS_PER_SEC;
-
- return waitForAnimationFrames(2);
- });
- // get us into the initial state:
+ // Get us into the initial state:
animation.currentTime = 250 * MS_PER_SEC;
- return retPromise;
+ 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(t => {
+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;
- return eventWatcher.wait_for(['animationstart', 'animationend']).then(() => {
- animation.currentTime = 50 * MS_PER_SEC;
- return eventWatcher.wait_for('animationstart');
- });
+ await eventWatcher.wait_for(['animationstart', 'animationend']);
+
+ animation.currentTime = 50 * MS_PER_SEC;
+
+ await eventWatcher.wait_for('animationstart');
}, 'Seeking finished -> paused dispatches animationstart');
-promise_test(t => {
+promise_test(async t => {
const div = addDiv(t, {'class': 'animated-div'});
div.style.animation = "anim 100s";
const animation = div.getAnimations()[0];
+ await animation.ready;
- return animation.ready.then(() => {
- 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');
- });
+ 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(t => {
+promise_test(async t => {
const div = addDiv(t, {'class': 'animated-div'});
div.style.animation = 'anim 100s';
const animation = div.getAnimations()[0];
- let pauseTime;
+ await animation.ready;
- return animation.ready.then(() => {
- assert_not_equals(animation.currentTime, null,
- 'Animation.currentTime not null on ready Promise resolve');
- animation.pause();
- return animation.ready;
- }).then(() => {
- pauseTime = animation.currentTime;
- return waitForFrame();
- }).then(() => {
- assert_equals(animation.currentTime, pauseTime,
- 'Animation.currentTime is unchanged after pausing');
- });
+ 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(t => {
+promise_test(async t => {
const div = addDiv(t, {'class': 'animated-div'});
div.style.animation = "anim 100s";
const animation = div.getAnimations()[0];
+ await animation.ready;
- return animation.ready.then(() => {
- // just before animation ends:
- animation.currentTime = 100 * MS_PER_SEC - 1;
- return waitForAnimationFrames(2);
- }).then(() => {
- assert_equals(animation.currentTime, 100 * MS_PER_SEC,
- 'Animation.currentTime should not continue to increase after the ' +
- 'animation has finished');
- });
+ // 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(t => {
+promise_test(async t => {
const div = addDiv(t, {'class': 'animated-div'});
div.style.animation = "anim 100s";
const animation = div.getAnimations()[0];
+ await animation.ready;
- return animation.ready.then(() => {
- // play backwards:
- animation.playbackRate = -1;
+ // Play backwards:
+ animation.playbackRate = -1;
- // just before animation ends (at the "start"):
- animation.currentTime = 1;
+ // Seek to just before the animation ends (at the "start"):
+ animation.currentTime = 1;
- return waitForAnimationFrames(2);
- }).then(() => {
- assert_equals(animation.currentTime, 0,
- 'Animation.currentTime should not continue to decrease after an ' +
- 'animation running in reverse has finished and currentTime is zero');
- });
+ 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 cancelled animation should be null');
}, 'Animation.currentTime after cancelling');
-promise_test(t => {
+promise_test(async t => {
const div = addDiv(t, {'class': 'animated-div'});
div.style.animation = 'anim 100s';
const animation = div.getAnimations()[0];
-
- return animation.ready.then(() => {
- animation.finish();
+ await animation.ready;
- // Initiate a pause then abort it
- animation.pause();
- animation.play();
+ animation.finish();
- // Wait to return to running state
- return animation.ready;
- }).then(() => {
- assert_true(animation.currentTime < 100 * 1000,
- 'After aborting a pause when finished, the currentTime should'
- + ' jump back towards the start of the animation');
- });
+ // 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>
</html>
--- a/dom/animation/test/css-animations/test_animation-finish.html
+++ b/dom/animation/test/css-animations/test_animation-finish.html
@@ -33,32 +33,30 @@ test(t => {
'Exception should be an InvalidStateError exception when ' +
'trying to finish an infinite animation');
}
assert_true(threw,
'Expect InvalidStateError exception trying to finish an ' +
'infinite animation');
}, 'Test exceptions when finishing infinite animation');
-async_test(t => {
+promise_test(async t => {
const div = addDiv(t);
div.style.animation = ANIM_PROP_VAL + ' paused';
const animation = div.getAnimations()[0];
+ await animation.ready;
- animation.ready.then(t.step_func(() => {
- animation.finish();
- assert_equals(animation.playState, 'finished',
- 'The play state of a paused animation should become ' +
- '"finished" after finish() is called');
- assert_times_equal(animation.startTime,
- animation.timeline.currentTime - ANIM_DURATION,
- 'The start time of a paused animation should be set ' +
- 'after calling finish()');
- t.done();
- }));
+ animation.finish();
+ assert_equals(animation.playState, 'finished',
+ 'The play state of a paused animation should become ' +
+ '"finished" after finish() is called');
+ assert_times_equal(animation.startTime,
+ animation.timeline.currentTime - ANIM_DURATION,
+ 'The start time of a paused animation should be set ' +
+ 'after calling finish()');
}, 'Test finish() while paused');
test(t => {
const div = addDiv(t);
div.style.animation = ANIM_PROP_VAL + ' paused';
const animation = div.getAnimations()[0];
// Update playbackRate so we can test that the calculated startTime
--- a/dom/animation/test/css-animations/test_animation-finished.html
+++ b/dom/animation/test/css-animations/test_animation-finished.html
@@ -12,84 +12,82 @@
<body>
<div id="log"></div>
<script>
'use strict';
const ANIM_PROP_VAL = 'abc 100s';
const ANIM_DURATION = 100 * MS_PER_SEC;
-promise_test(t => {
+promise_test(async t => {
const div = addDiv(t);
// Set up pending animation
div.style.animation = ANIM_PROP_VAL;
const animation = div.getAnimations()[0];
- const previousFinishedPromise = animation.finished;
- // Set up listeners on finished promise
- const retPromise = animation.finished.then(() => {
- assert_unreached('finished promise is fulfilled');
- }).catch(err => {
- assert_equals(err.name, 'AbortError',
- 'finished promise is rejected with AbortError');
- assert_not_equals(animation.finished, previousFinishedPromise,
- 'Finished promise should change after the original is ' +
- 'rejected');
- });
+ const originalFinishedPromise = animation.finished;
- // Now cancel the animation and flush styles
+ // Cancel the animation and flush styles
div.style.animation = '';
getComputedStyle(div).animation;
- return retPromise;
+ try {
+ await originalFinishedPromise;
+ assert_unreached('Original finished promise should not be fulfilled');
+ } catch (err) {
+ assert_equals(err.name, 'AbortError',
+ 'finished promise is rejected with AbortError');
+ assert_not_equals(animation.finished, originalFinishedPromise,
+ 'Finished promise should change after the original is ' +
+ 'rejected');
+ }
}, 'finished promise is rejected when an animation is cancelled by resetting ' +
'the animation property');
-promise_test(t => {
+promise_test(async t => {
const div = addDiv(t);
// As before, but this time instead of removing all animations, simply update
// the list of animations. At least for Firefox, updating is a different
// code path.
// Set up pending animation
div.style.animation = ANIM_PROP_VAL;
const animation = div.getAnimations()[0];
- const previousFinishedPromise = animation.finished;
+ const originalFinishedPromise = animation.finished;
- // Set up listeners on finished promise
- const retPromise = animation.finished.then(() => {
- assert_unreached('finished promise was fulfilled');
- }).catch(err => {
- assert_equals(err.name, 'AbortError',
- 'finished promise is rejected with AbortError');
- assert_not_equals(animation.finished, previousFinishedPromise,
- 'Finished promise should change after the original is ' +
- 'rejected');
- });
-
- // Now update the animation and flush styles
+ // Update the animation and flush styles
div.style.animation = 'def 100s';
getComputedStyle(div).animation;
- return retPromise;
+ try {
+ await originalFinishedPromise;
+ assert_unreached('Original finished promise should not be fulfilled');
+ } catch (err) {
+ assert_equals(err.name, 'AbortError',
+ 'finished promise is rejected with AbortError');
+ assert_not_equals(animation.finished, originalFinishedPromise,
+ 'Finished promise should change after the original is ' +
+ 'rejected');
+ }
}, 'finished promise is rejected when an animation is cancelled by changing ' +
'the animation property');
-promise_test(t => {
+promise_test(async t => {
const div = addDiv(t);
div.style.animation = ANIM_PROP_VAL;
const animation = div.getAnimations()[0];
- const previousFinishedPromise = animation.finished;
+ const originalFinishedPromise = animation.finished;
animation.currentTime = ANIM_DURATION;
- return animation.finished.then(() => {
- div.style.animationPlayState = 'running';
- return waitForAnimationFrames(2);
- }).then(() => {
- assert_equals(animation.finished, previousFinishedPromise,
- 'Should not replay when animation-play-state changes to ' +
- '"running" on finished animation');
- assert_equals(animation.currentTime, ANIM_DURATION,
- 'currentTime should not change when animation-play-state ' +
- 'changes to "running" on finished animation');
- });
+
+ await animation.finished;
+
+ div.style.animationPlayState = 'running';
+ await waitForAnimationFrames(2);
+
+ assert_equals(animation.finished, originalFinishedPromise,
+ 'Should not replay when animation-play-state changes to ' +
+ '"running" on finished animation');
+ assert_equals(animation.currentTime, ANIM_DURATION,
+ 'currentTime should not change when animation-play-state ' +
+ 'changes to "running" on finished animation');
}, 'Test finished promise changes when animationPlayState set to running');
</script>
</body>
--- a/dom/animation/test/css-animations/test_animation-pausing.html
+++ b/dom/animation/test/css-animations/test_animation-pausing.html
@@ -11,105 +11,107 @@
</style>
<body>
<div id="log"></div>
<script>
'use strict';
const getMarginLeft = cs => parseFloat(cs.marginLeft);
-promise_test(t => {
+promise_test(async t => {
const div = addDiv(t);
const cs = getComputedStyle(div);
div.style.animation = 'anim 1000s paused';
const animation = div.getAnimations()[0];
assert_equals(getMarginLeft(cs), 0,
'Initial value of margin-left is zero');
animation.play();
- return animation.ready.then(waitForNextFrame).then(() => {
- assert_greater_than(getMarginLeft(cs), 0,
- 'Playing value of margin-left is greater than zero');
- });
+ await animation.ready;
+ await waitForNextFrame();
+
+ assert_greater_than(getMarginLeft(cs), 0,
+ 'Playing value of margin-left is greater than zero');
}, 'play() overrides animation-play-state');
-promise_test(t => {
+promise_test(async t => {
const div = addDiv(t);
const cs = getComputedStyle(div);
div.style.animation = 'anim 1000s paused';
const animation = div.getAnimations()[0];
assert_equals(getMarginLeft(cs), 0,
'Initial value of margin-left is zero');
animation.pause();
div.style.animationPlayState = 'running';
- return animation.ready.then(waitForNextFrame).then(() => {
- assert_equals(cs.animationPlayState, 'running',
- 'animation-play-state is running');
- assert_equals(getMarginLeft(cs), 0,
- 'Paused value of margin-left is zero');
- });
+ await animation.ready;
+ await waitForNextFrame();
+
+ assert_equals(cs.animationPlayState, 'running',
+ 'animation-play-state is running');
+ assert_equals(getMarginLeft(cs), 0,
+ 'Paused value of margin-left is zero');
}, 'pause() overrides animation-play-state');
-promise_test(t => {
+promise_test(async t => {
const div = addDiv(t);
const cs = getComputedStyle(div);
div.style.animation = 'anim 1000s paused';
const animation = div.getAnimations()[0];
assert_equals(getMarginLeft(cs), 0,
'Initial value of margin-left is zero');
animation.play();
- let previousAnimVal;
+
+ await animation.ready;
+
+ div.style.animationPlayState = 'running';
+ cs.animationPlayState; // Trigger style resolution
+ await waitForNextFrame();
- return animation.ready.then(() => {
- div.style.animationPlayState = 'running';
- cs.animationPlayState; // Trigger style resolution
- return waitForNextFrame();
- }).then(() => {
- assert_equals(cs.animationPlayState, 'running',
- 'animation-play-state is running');
- div.style.animationPlayState = 'paused';
- return animation.ready;
- }).then(() => {
- assert_equals(cs.animationPlayState, 'paused',
- 'animation-play-state is paused');
- previousAnimVal = getMarginLeft(cs);
- return waitForNextFrame();
- }).then(() => {
- assert_equals(getMarginLeft(cs), previousAnimVal,
- 'Animated value of margin-left does not change when'
- + ' paused by style');
- });
+ assert_equals(cs.animationPlayState, 'running',
+ 'animation-play-state is running');
+ div.style.animationPlayState = 'paused';
+ await animation.ready;
+
+ assert_equals(cs.animationPlayState, 'paused',
+ 'animation-play-state is paused');
+ const previousAnimVal = getMarginLeft(cs);
+ await waitForNextFrame();
+
+ assert_equals(getMarginLeft(cs), previousAnimVal,
+ 'Animated value of margin-left does not change when'
+ + ' paused by style');
}, 'play() is overridden by later setting "animation-play-state: paused"');
-promise_test(t => {
+promise_test(async t => {
const div = addDiv(t);
const cs = getComputedStyle(div);
div.style.animation = 'anim 1000s';
const animation = div.getAnimations()[0];
assert_equals(getMarginLeft(cs), 0,
'Initial value of margin-left is zero');
// Set the specified style first. If implementations fail to
// apply the style changes first, they will ignore the redundant
// call to play() and fail to correctly override the pause style.
div.style.animationPlayState = 'paused';
animation.play();
const previousAnimVal = getMarginLeft(cs);
- return animation.ready.then(waitForNextFrame).then(() => {
- assert_equals(cs.animationPlayState, 'paused',
- 'animation-play-state is paused');
- assert_greater_than(getMarginLeft(cs), previousAnimVal,
- 'Playing value of margin-left is increasing');
- });
+ await animation.ready;
+ await waitForNextFrame();
+
+ assert_equals(cs.animationPlayState, 'paused',
+ 'animation-play-state is paused');
+ assert_greater_than(getMarginLeft(cs), previousAnimVal,
+ 'Playing value of margin-left is increasing');
}, 'play() flushes pending changes to animation-play-state first');
-promise_test(t => {
+promise_test(async t => {
const div = addDiv(t);
const cs = getComputedStyle(div);
div.style.animation = 'anim 1000s paused';
const animation = div.getAnimations()[0];
assert_equals(getMarginLeft(cs), 0,
'Initial value of margin-left is zero');
// Unlike the previous test for play(), since calling pause() is sticky,
@@ -121,46 +123,47 @@ promise_test(t => {
// (e.g. if we introduce animation-timeline or animation-playback-rate etc.).
//
// For now this just serves as a sanity check that we do the same thing
// even if we set style before calling the API.
div.style.animationPlayState = 'running';
animation.pause();
const previousAnimVal = getMarginLeft(cs);
- return animation.ready.then(waitForNextFrame).then(() => {
- assert_equals(cs.animationPlayState, 'running',
- 'animation-play-state is running');
- assert_equals(getMarginLeft(cs), previousAnimVal,
- 'Paused value of margin-left does not change');
- });
+ await animation.ready;
+ await waitForNextFrame();
+
+ assert_equals(cs.animationPlayState, 'running',
+ 'animation-play-state is running');
+ assert_equals(getMarginLeft(cs), previousAnimVal,
+ 'Paused value of margin-left does not change');
}, 'pause() applies pending changes to animation-play-state first');
// (Note that we can't actually test for this; see comment above, in test-body.)
-promise_test(t => {
+promise_test(async t => {
const div = addDiv(t, { style: 'animation: anim 1000s' });
const animation = div.getAnimations()[0];
let readyPromiseRun = false;
- return animation.ready.then(() => {
- div.style.animationPlayState = 'paused';
- assert_true(animation.pending && animation.playState === 'paused',
- 'Animation is pause-pending');
+ await animation.ready;
+
+ div.style.animationPlayState = 'paused';
+ assert_true(animation.pending && animation.playState === 'paused',
+ 'Animation is pause-pending');
- // Set current time
- animation.currentTime = 5 * MS_PER_SEC;
- assert_equals(animation.playState, 'paused',
- 'Animation is paused immediately after setting currentTime');
- assert_equals(animation.startTime, null,
- 'Animation startTime is unresolved immediately after ' +
- 'setting currentTime');
- assert_equals(animation.currentTime, 5 * MS_PER_SEC,
- 'Animation currentTime does not change when forcing a ' +
- 'pause operation to complete');
+ // Set current time
+ animation.currentTime = 5 * MS_PER_SEC;
+ assert_equals(animation.playState, 'paused',
+ 'Animation is paused immediately after setting currentTime');
+ assert_equals(animation.startTime, null,
+ 'Animation startTime is unresolved immediately after ' +
+ 'setting currentTime');
+ assert_equals(animation.currentTime, 5 * MS_PER_SEC,
+ 'Animation currentTime does not change when forcing a ' +
+ 'pause operation to complete');
- // The ready promise should now be resolved. If it's not then test will
- // probably time out before anything else happens that causes it to resolve.
- return animation.ready;
- });
+ // The ready promise should now be resolved. If it's not then test will
+ // probably time out before anything else happens that causes it to resolve.
+ await animation.ready;
}, 'Setting the current time completes a pending pause');
</script>
</body>
--- a/dom/animation/test/css-animations/test_animation-ready.html
+++ b/dom/animation/test/css-animations/test_animation-ready.html
@@ -8,142 +8,141 @@
to { transform: translate(10px) }
}
</style>
<body>
<div id="log"></div>
<script>
'use strict';
-promise_test(t => {
+promise_test(async t => {
const div = addDiv(t);
div.style.animation = 'abc 100s paused';
const animation = div.getAnimations()[0];
const originalReadyPromise = animation.ready;
- return animation.ready.then(() => {
- div.style.animationPlayState = 'running';
- assert_not_equals(animation.ready, originalReadyPromise,
- 'After updating animation-play-state a new ready promise'
- + ' object is created');
- });
+ await animation.ready;
+
+ div.style.animationPlayState = 'running';
+ assert_not_equals(animation.ready, originalReadyPromise,
+ 'After updating animation-play-state a new ready promise'
+ + ' object is created');
}, 'A new ready promise is created when setting animation-play-state: running');
-promise_test(t => {
+promise_test(async t => {
const div = addDiv(t);
// Set up pending animation
div.style.animation = 'abc 100s';
const animation = div.getAnimations()[0];
assert_true(animation.pending, 'Animation is initially pending');
+ const readyPromise = animation.ready;
- // Set up listeners on ready promise
- const retPromise = animation.ready.then(() => {
- assert_unreached('ready promise is fulfilled');
- }).catch(err => {
- assert_equals(err.name, 'AbortError',
- 'ready promise is rejected with AbortError');
- });
-
- // Now cancel the animation and flush styles
+ // Cancel the animation and flush styles
div.style.animation = '';
getComputedStyle(div).animation;
- return retPromise;
+ try {
+ await readyPromise;
+ assert_unreached('ready promise is fulfilled');
+ } catch(err) {
+ assert_equals(err.name, 'AbortError',
+ 'ready promise is rejected with AbortError');
+ }
}, 'ready promise is rejected when an animation is canceled by resetting'
+ ' the animation property');
-promise_test(t => {
+promise_test(async t => {
const div = addDiv(t);
// As before, but this time instead of removing all animations, simply update
// the list of animations. At least for Firefox, updating is a different
// code path.
// Set up pending animation
div.style.animation = 'abc 100s';
const animation = div.getAnimations()[0];
assert_true(animation.pending, 'Animation is initially pending');
+ const readyPromise = animation.ready;
- // Set up listeners on 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');
- });
-
- // Now update the animation and flush styles
+ // Update the animation and flush styles
div.style.animation = 'def 100s';
getComputedStyle(div).animation;
- return retPromise;
+ try {
+ await readyPromise;
+ assert_unreached('ready promise is fulfilled');
+ } catch(err) {
+ assert_equals(err.name, 'AbortError',
+ 'ready promise is rejected with AbortError');
+ }
}, 'ready promise is rejected when an animation is cancelled by updating'
+ ' the animation property');
-promise_test(t => {
+promise_test(async t => {
const div = addDiv(t, { style: 'animation: abc 100s' });
const animation = div.getAnimations()[0];
const originalReadyPromise = animation.ready;
- return animation.ready.then(() => {
- div.style.animationPlayState = 'paused';
- assert_not_equals(animation.ready, originalReadyPromise,
- 'A new Promise object is generated when setting'
- + ' animation-play-state: paused');
- });
+ await animation.ready;
+
+ div.style.animationPlayState = 'paused';
+ assert_not_equals(animation.ready, originalReadyPromise,
+ 'A new Promise object is generated when setting'
+ + ' animation-play-state: paused');
}, 'A new ready promise is created when setting animation-play-state: paused');
-promise_test(t => {
+promise_test(async t => {
const div = addDiv(t, { style: 'animation: abc 100s' });
const animation = div.getAnimations()[0];
- return animation.ready.then(() => {
- div.style.animationPlayState = 'paused';
- const firstReadyPromise = animation.ready;
- animation.pause();
- assert_equals(animation.ready, firstReadyPromise,
- 'Ready promise objects are identical after redundant pause');
- });
+ await animation.ready;
+
+ div.style.animationPlayState = 'paused';
+ const firstReadyPromise = animation.ready;
+ animation.pause();
+ assert_equals(animation.ready, firstReadyPromise,
+ 'Ready promise objects are identical after redundant pause');
}, 'Pausing twice re-uses the same Promise');
-promise_test(t => {
+promise_test(async t => {
const div = addDiv(t, { style: 'animation: abc 100s' });
const animation = div.getAnimations()[0];
- return animation.ready.then(() => {
- div.style.animationPlayState = 'paused';
+ await animation.ready;
+
+ div.style.animationPlayState = 'paused';
- // Flush style and verify we're pending at the same time
- assert_true(animation.pending, 'Animation is pending');
- const pauseReadyPromise = animation.ready;
+ // Flush style and verify we're pending at the same time
+ assert_true(animation.pending, 'Animation is pending');
+ const pauseReadyPromise = animation.ready;
- // Now play again immediately
- div.style.animationPlayState = 'running';
- assert_true(animation.pending, 'Animation is still pending');
- assert_equals(animation.ready, pauseReadyPromise,
- 'The pause Promise is re-used when playing while waiting'
- + ' to pause');
+ // Now play again immediately
+ div.style.animationPlayState = 'running';
+ assert_true(animation.pending, 'Animation is still pending');
+ assert_equals(animation.ready, pauseReadyPromise,
+ 'The pause Promise is re-used when playing while waiting'
+ + ' to pause');
- return animation.ready;
- }).then(() => {
- assert_true(!animation.pending && animation.playState === 'running',
- 'Animation is running after aborting a pause');
- });
+ await animation.ready;
+
+ assert_true(!animation.pending && animation.playState === 'running',
+ 'Animation is running after aborting a pause');
}, 'If a pause operation is interrupted, the ready promise is reused');
-promise_test(t => {
+promise_test(async t => {
const div = addDiv(t, { style: 'animation: abc 100s' });
const animation = div.getAnimations()[0];
- return animation.ready.then(() => {
- div.style.animationPlayState = 'paused';
- return animation.ready;
- }).then(resolvedAnimation => {
- assert_equals(resolvedAnimation, animation,
- 'Promise received when ready Promise for a pause operation'
- + ' is completed is the animation on which the pause was'
- + ' performed');
- });
+ await animation.ready;
+
+ div.style.animationPlayState = 'paused';
+
+ const resolvedAnimation = await animation.ready;
+
+ assert_equals(resolvedAnimation, animation,
+ 'Promise received when ready Promise for a pause operation'
+ + ' is completed is the animation on which the pause was'
+ + ' performed');
}, 'When a pause is complete the Promise callback gets the correct animation');
</script>
</body>
--- a/dom/animation/test/css-animations/test_animation-starttime.html
+++ b/dom/animation/test/css-animations/test_animation-starttime.html
@@ -53,327 +53,312 @@ test(t => {
}, 'startTime of a newly created (play-pending) animation is unresolved');
test(t => {
const div = addDiv(t, { 'style': 'animation: anim 100s paused' });
const animation = div.getAnimations()[0];
assert_equals(animation.startTime, null, 'startTime is unresolved');
}, 'startTime of a newly created (pause-pending) animation is unresolved');
-promise_test(t => {
+promise_test(async t => {
const div = addDiv(t, { 'style': 'animation: anim 100s' });
const animation = div.getAnimations()[0];
- return animation.ready.then(() => {
- assert_true(animation.startTime > 0,
- 'startTime is resolved when running');
- });
+ await animation.ready;
+
+ assert_true(animation.startTime > 0, 'startTime is resolved when running');
}, 'startTime is resolved when running');
-promise_test(t => {
+promise_test(async t => {
const div = addDiv(t, { 'style': 'animation: anim 100s paused' });
const animation = div.getAnimations()[0];
- return animation.ready.then(() => {
- assert_equals(animation.startTime, null,
- 'startTime is unresolved when paused');
- });
+ await animation.ready;
+
+ assert_equals(animation.startTime, null,
+ 'startTime is unresolved when paused');
}, 'startTime is unresolved when paused');
-promise_test(t => {
+promise_test(async t => {
const div = addDiv(t, { 'style': 'animation: anim 100s' });
const animation = div.getAnimations()[0];
- return animation.ready.then(() => {
- div.style.animationPlayState = 'paused';
- getComputedStyle(div).animationPlayState;
+ await animation.ready;
- assert_not_equals(animation.startTime, null,
- 'startTime is resolved when pause-pending');
+ div.style.animationPlayState = 'paused';
+ getComputedStyle(div).animationPlayState;
- div.style.animationPlayState = 'running';
- getComputedStyle(div).animationPlayState;
+ assert_not_equals(animation.startTime, null,
+ 'startTime is resolved when pause-pending');
- assert_not_equals(animation.startTime, null,
- 'startTime is preserved when a pause is aborted');
- });
+ div.style.animationPlayState = 'running';
+ getComputedStyle(div).animationPlayState;
+
+ assert_not_equals(animation.startTime, null,
+ 'startTime is preserved when a pause is aborted');
}, 'startTime while pause-pending and play-pending');
-promise_test(t => {
+promise_test(async t => {
const div = addDiv(t, { 'style': 'animation: anim 100s' });
const animation = div.getAnimations()[0];
// Seek to end to put us in the finished state
animation.currentTime = 100 * MS_PER_SEC;
- return animation.ready.then(() => {
- // Call play() which puts us back in the running state
- animation.play();
+ await animation.ready;
- assert_equals(animation.startTime, null, 'startTime is unresolved');
- });
+ // Call play() which puts us back in the running state
+ animation.play();
+
+ assert_equals(animation.startTime, null, 'startTime is unresolved');
}, 'startTime while play-pending from finished state');
test(t => {
const div = addDiv(t, { 'style': 'animation: anim 100s' });
const animation = div.getAnimations()[0];
animation.finish();
// Call play() which puts us back in the running state
animation.play();
assert_equals(animation.startTime, null, 'startTime is unresolved');
}, 'startTime while play-pending from finished state using finish()');
-promise_test(t => {
+promise_test(async t => {
const div = addDiv(t, { style: 'animation: anim 100s' });
const animation = div.getAnimations()[0];
assert_equals(animation.startTime, null, 'The initial startTime is null');
const initialTimelineTime = document.timeline.currentTime;
- return animation.ready.then(() => {
- assert_true(animation.startTime > initialTimelineTime,
- 'After the animation has started, startTime is greater than ' +
- 'the time when it was started');
- const startTimeBeforePausing = animation.startTime;
+ await animation.ready;
+
+ assert_true(animation.startTime > initialTimelineTime,
+ 'After the animation has started, startTime is greater than ' +
+ 'the time when it was started');
+ const startTimeBeforePausing = animation.startTime;
- div.style.animationPlayState = 'paused';
- // Flush styles just in case querying animation.startTime doesn't flush
- // styles (which would be a bug in of itself and could mask a further bug
- // by causing startTime to appear to not change).
- getComputedStyle(div).animationPlayState;
+ div.style.animationPlayState = 'paused';
+ // Flush styles just in case querying animation.startTime doesn't flush
+ // styles (which would be a bug in of itself and could mask a further bug
+ // by causing startTime to appear to not change).
+ getComputedStyle(div).animationPlayState;
- assert_equals(animation.startTime, startTimeBeforePausing,
- 'The startTime does not change when pausing-pending');
- return animation.ready;
- }).then(() => {
- assert_equals(animation.startTime, null,
- 'After actually pausing, the startTime of an animation ' +
- 'is null');
- });
+ assert_equals(animation.startTime, startTimeBeforePausing,
+ 'The startTime does not change when pausing-pending');
+ await animation.ready;
+
+ assert_equals(animation.startTime, null,
+ 'After actually pausing, the startTime of an animation ' +
+ 'is null');
}, 'Pausing should make the startTime become null');
test(t => {
const div = addDiv(t, {'class': 'animated-div'});
div.style.animation = 'anim 100s 100s';
const animation = div.getAnimations()[0];
const currentTime = animation.timeline.currentTime;
animation.startTime = currentTime;
assert_times_equal(animation.startTime, currentTime,
'Check setting of startTime actually works');
}, 'Sanity test to check round-tripping assigning to a new animation\'s ' +
'startTime');
-promise_test(t => {
+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];
- return animation.ready.then(() => {
- assert_less_than_equal(animation.startTime, animation.timeline.currentTime,
- 'Animation.startTime should be less than the timeline\'s ' +
- 'currentTime on the first paint tick after animation creation');
+ await animation.ready;
+
+ assert_less_than_equal(animation.startTime, animation.timeline.currentTime,
+ 'Animation.startTime should be less than the timeline\'s ' +
+ 'currentTime on the first paint tick after animation creation');
- animation.startTime = animation.timeline.currentTime - 100 * MS_PER_SEC;
- return eventWatcher.wait_for('animationstart');
- }).then(() => {
- animation.startTime = animation.timeline.currentTime - 200 * MS_PER_SEC;
- return eventWatcher.wait_for('animationend');
- });
+ animation.startTime = animation.timeline.currentTime - 100 * MS_PER_SEC;
+ await eventWatcher.wait_for('animationstart');
+
+ animation.startTime = animation.timeline.currentTime - 200 * MS_PER_SEC;
+ await eventWatcher.wait_for('animationend');
}, 'Skipping forward through animation');
-promise_test(t => {
+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.startTime = animation.timeline.currentTime - 200 * MS_PER_SEC;
const previousTimelineTime = animation.timeline.currentTime;
- return eventWatcher.wait_for(['animationstart',
- 'animationend']).then(() => {
- 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');
+ await eventWatcher.wait_for(['animationstart', 'animationend']);
- animation.startTime = animation.timeline.currentTime - 150 * MS_PER_SEC;
+ 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.startTime = animation.timeline.currentTime - 150 * MS_PER_SEC;
- // Despite going backwards from after the end of the animation (to being
- // in the active interval), we now expect an 'animationstart' event
- // because the animation should go from being inactive to active.
- return eventWatcher.wait_for('animationstart');
- }).then(() => {
- animation.startTime = animation.timeline.currentTime;
+ // Despite going backwards from after the end of the animation (to being
+ // in the active interval), we now expect an 'animationstart' event
+ // because the animation should go from being inactive to active.
+ await eventWatcher.wait_for('animationstart');
+
+ animation.startTime = animation.timeline.currentTime;
- // Despite going backwards from just after the active interval starts to
- // the animation start time, we now expect an animationend event
- // because we went from inside to outside the active interval.
- return eventWatcher.wait_for('animationend');
- }).then(() => {
- assert_less_than_equal(animation.startTime, animation.timeline.currentTime,
- 'Animation.startTime should be less than the timeline\'s ' +
- 'currentTime on the first paint tick after animation creation');
- });
+ // Despite going backwards from just after the active interval starts to
+ // the animation start time, we now expect an animationend event
+ // because we went from inside to outside the active interval.
+ await eventWatcher.wait_for('animationend');
+
+ assert_less_than_equal(animation.startTime, animation.timeline.currentTime,
+ 'Animation.startTime should be less than the timeline\'s ' +
+ 'currentTime on the first paint tick after animation creation');
}, 'Skipping backwards through animation');
// Next we have multiple tests to check that redundant startTime 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(t => {
+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.startTime = animation.timeline.currentTime - 150 * MS_PER_SEC;
animation.startTime = animation.timeline.currentTime - 50 * MS_PER_SEC;
- return waitForAnimationFrames(2);
+ await waitForAnimationFrames(2);
}, 'Redundant change, before -> active, then back');
-promise_test(t => {
+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.startTime = animation.timeline.currentTime - 250 * MS_PER_SEC;
animation.startTime = animation.timeline.currentTime - 50 * MS_PER_SEC;
- return waitForAnimationFrames(2);
+ await waitForAnimationFrames(2);
}, 'Redundant change, before -> after, then back');
-promise_test(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];
-
- const retPromise = eventWatcher.wait_for('animationstart').then(() => {
- animation.startTime = animation.timeline.currentTime - 50 * MS_PER_SEC;
- animation.startTime = animation.timeline.currentTime - 150 * MS_PER_SEC;
-
- return waitForAnimationFrames(2);
- });
- // get us into the initial state:
- animation.startTime = animation.timeline.currentTime - 150 * MS_PER_SEC;
-
- return retPromise;
-}, 'Redundant change, active -> before, then back');
-
-promise_test(t => {
+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];
- const retPromise = eventWatcher.wait_for('animationstart').then(() => {
- animation.startTime = animation.timeline.currentTime - 250 * MS_PER_SEC;
- animation.startTime = animation.timeline.currentTime - 150 * MS_PER_SEC;
-
- return waitForAnimationFrames(2);
- });
- // get us into the initial state:
+ // Get us into the initial state:
animation.startTime = animation.timeline.currentTime - 150 * MS_PER_SEC;
- return retPromise;
-}, 'Redundant change, active -> after, then back');
+ eventWatcher.wait_for('animationstart');
+
+ animation.startTime = animation.timeline.currentTime - 50 * MS_PER_SEC;
+ animation.startTime = animation.timeline.currentTime - 150 * MS_PER_SEC;
-promise_test(t => {
+ await waitForAnimationFrames(2);
+}, 'Redundant change, active -> 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];
- const retPromise = eventWatcher.wait_for(['animationstart',
- 'animationend']).then(() => {
- animation.startTime = animation.timeline.currentTime - 50 * MS_PER_SEC;
- animation.startTime = animation.timeline.currentTime - 250 * MS_PER_SEC;
+ // Get us into the initial state:
+ animation.startTime = animation.timeline.currentTime - 150 * MS_PER_SEC;
+
+ eventWatcher.wait_for('animationstart');
- return waitForAnimationFrames(2);
- });
- // get us into the initial state:
animation.startTime = animation.timeline.currentTime - 250 * MS_PER_SEC;
+ animation.startTime = animation.timeline.currentTime - 150 * MS_PER_SEC;
- return retPromise;
-}, 'Redundant change, after -> before, then back');
+ await waitForAnimationFrames(2);
+}, 'Redundant change, active -> after, then back');
-promise_test(t => {
+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];
- const retPromise = eventWatcher.wait_for(['animationstart',
- 'animationend']).then(() => {
- animation.startTime = animation.timeline.currentTime - 150 * MS_PER_SEC;
- animation.startTime = animation.timeline.currentTime - 250 * MS_PER_SEC;
+ // Get us into the initial state:
+ animation.startTime = animation.timeline.currentTime - 250 * MS_PER_SEC;
- return waitForAnimationFrames(2);
+ eventWatcher.wait_for(['animationstart', 'animationend']);
- });
- // get us into the initial state:
+ animation.startTime = animation.timeline.currentTime - 50 * MS_PER_SEC;
animation.startTime = animation.timeline.currentTime - 250 * MS_PER_SEC;
- return retPromise;
+ 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.startTime = animation.timeline.currentTime - 250 * MS_PER_SEC;
+
+ eventWatcher.wait_for(['animationstart', 'animationend']);
+
+ animation.startTime = animation.timeline.currentTime - 150 * MS_PER_SEC;
+ animation.startTime = animation.timeline.currentTime - 250 * MS_PER_SEC;
+
+ await waitForAnimationFrames(2);
}, 'Redundant change, after -> active, then back');
-promise_test(t => {
+promise_test(async t => {
const div = addDiv(t, {'class': 'animated-div'});
div.style.animation = 'anim 100s 100s';
const animation = div.getAnimations()[0];
- let storedCurrentTime;
+ await animation.ready;
- return animation.ready.then(() => {
- storedCurrentTime = animation.currentTime;
- animation.startTime = null;
- return animation.ready;
- }).then(() => {
- assert_equals(animation.currentTime, storedCurrentTime,
- 'Test that hold time is correct');
- });
+ const storedCurrentTime = animation.currentTime;
+ animation.startTime = null;
+ await animation.ready;
+
+ assert_equals(animation.currentTime, storedCurrentTime,
+ 'Test that hold time is correct');
}, 'Setting startTime to null');
-promise_test(t => {
+promise_test(async t => {
const div = addDiv(t, {'class': 'animated-div'});
div.style.animation = 'anim 100s';
const animation = div.getAnimations()[0];
- return animation.ready.then(() => {
- const savedStartTime = animation.startTime;
-
- assert_not_equals(animation.startTime, null,
- 'Animation.startTime not null on ready Promise resolve');
+ await animation.ready;
+ assert_not_equals(animation.startTime, null,
+ 'Animation.startTime not null on ready Promise resolve');
- animation.pause();
- return animation.ready;
- }).then(() => {
- assert_equals(animation.startTime, null,
- 'Animation.startTime is null after paused');
- assert_equals(animation.playState, 'paused',
- 'Animation.playState is "paused" after pause() call');
- });
+ animation.pause();
+ await animation.ready;
+
+ assert_equals(animation.startTime, null,
+ 'Animation.startTime is null after paused');
+ assert_equals(animation.playState, 'paused',
+ 'Animation.playState is "paused" after pause() call');
}, 'Animation.startTime after pausing');
-promise_test(t => {
+promise_test(async t => {
const div = addDiv(t, {'class': 'animated-div'});
div.style.animation = 'anim 100s';
const animation = div.getAnimations()[0];
+ await animation.ready;
- return animation.ready.then(() => {
- animation.cancel();
- assert_equals(animation.startTime, null,
- 'The startTime of a cancelled animation should be null');
- });
+ animation.cancel();
+ assert_equals(animation.startTime, null,
+ 'The startTime of a cancelled animation should be null');
}, 'Animation.startTime after cancelling');
</script>
</body>
</html>
--- a/dom/animation/test/css-animations/test_animations-dynamic-changes.html
+++ b/dom/animation/test/css-animations/test_animations-dynamic-changes.html
@@ -9,46 +9,46 @@
}
@keyframes anim2 { }
</style>
<body>
<div id="log"></div>
<script>
'use strict';
-promise_test(t => {
+promise_test(async t => {
const div = addDiv(t);
div.style.animation = 'anim1 100s';
const originalAnimation = div.getAnimations()[0];
let originalStartTime;
let originalCurrentTime;
// Wait a moment so we can confirm the startTime doesn't change (and doesn't
// simply reflect the current time).
- return originalAnimation.ready.then(() => {
- originalStartTime = originalAnimation.startTime;
- originalCurrentTime = originalAnimation.currentTime;
+ await originalAnimation.ready;
+
+ originalStartTime = originalAnimation.startTime;
+ originalCurrentTime = originalAnimation.currentTime;
+
+ // Wait a moment so we can confirm the startTime doesn't change (and
+ // doesn't simply reflect the current time).
+ await waitForNextFrame();
- // Wait a moment so we can confirm the startTime doesn't change (and
- // doesn't simply reflect the current time).
- return waitForNextFrame();
- }).then(() => {
- div.style.animationDuration = '200s';
- const animation = div.getAnimations()[0];
- assert_equals(animation, originalAnimation,
- 'The same Animation is returned after updating'
- + ' animation duration');
- assert_equals(animation.startTime, originalStartTime,
- 'Animations returned by getAnimations preserve'
- + ' their startTime even when they are updated');
- // Sanity check
- assert_not_equals(animation.currentTime, originalCurrentTime,
- 'Animation.currentTime has updated in next'
- + ' requestAnimationFrame callback');
- });
+ div.style.animationDuration = '200s';
+ const animation = div.getAnimations()[0];
+ assert_equals(animation, originalAnimation,
+ 'The same Animation is returned after updating'
+ + ' animation duration');
+ assert_equals(animation.startTime, originalStartTime,
+ 'Animations returned by getAnimations preserve'
+ + ' their startTime even when they are updated');
+ // Sanity check
+ assert_not_equals(animation.currentTime, originalCurrentTime,
+ 'Animation.currentTime has updated in next'
+ + ' requestAnimationFrame callback');
}, 'Animations preserve their startTime when changed');
test(t => {
const div = addDiv(t);
div.style.animation = 'anim1 100s, anim1 100s';
// Store original state
let animations = div.getAnimations();
@@ -59,100 +59,105 @@ test(t => {
div.style.animationDuration = '200s, 100s';
animations = div.getAnimations();
assert_equals(animations[0], animation1,
'First Animation is in same position after update');
assert_equals(animations[1], animation2,
'Second Animation is in same position after update');
}, 'Updated Animations maintain their order in the list');
-promise_test(t => {
+promise_test(async t => {
const div = addDiv(t);
div.style.animation = 'anim1 200s, anim1 100s';
// Store original state
let animations = div.getAnimations();
const animation1 = animations[0];
const animation2 = animations[1];
// Wait before continuing so we can compare start times (otherwise the
// new Animation objects and existing Animation objects will all have the same
// start time).
- return waitForAllAnimations(animations).then(waitForFrame).then(() => {
- // Swap duration of first and second in list and prepend animation at the
- // same time
- div.style.animation = 'anim1 100s, anim1 100s, anim1 200s';
- animations = div.getAnimations();
- assert_true(animations[0] !== animation1 && animations[0] !== animation2,
- 'New Animation is prepended to start of list');
- assert_equals(animations[1], animation1,
- 'First Animation is in second position after update');
- assert_equals(animations[2], animation2,
- 'Second Animation is in third position after update');
- assert_equals(animations[1].startTime, animations[2].startTime,
- 'Old Animations have the same start time');
- // TODO: Check that animations[0].startTime === null
- return animations[0].ready;
- }).then(() => {
- assert_greater_than(animations[0].startTime, animations[1].startTime,
- 'New Animation has later start time');
- });
+ await waitForAllAnimations(animations);
+ await waitForFrame();
+
+ // Swap duration of first and second in list and prepend animation at the
+ // same time
+ div.style.animation = 'anim1 100s, anim1 100s, anim1 200s';
+ animations = div.getAnimations();
+ assert_true(animations[0] !== animation1 && animations[0] !== animation2,
+ 'New Animation is prepended to start of list');
+ assert_equals(animations[1], animation1,
+ 'First Animation is in second position after update');
+ assert_equals(animations[2], animation2,
+ 'Second Animation is in third position after update');
+ assert_equals(animations[1].startTime, animations[2].startTime,
+ 'Old Animations have the same start time');
+
+ // TODO: Check that animations[0].startTime === null
+ await animations[0].ready;
+
+ assert_greater_than(animations[0].startTime, animations[1].startTime,
+ 'New Animation has later start time');
}, 'Only the startTimes of existing animations are preserved');
-promise_test(t => {
+promise_test(async t => {
const div = addDiv(t);
div.style.animation = 'anim1 100s, anim1 100s';
const secondAnimation = div.getAnimations()[1];
// Wait before continuing so we can compare start times
- return secondAnimation.ready.then(waitForNextFrame).then(() => {
- // Trim list of animations
- div.style.animationName = 'anim1';
- const animations = div.getAnimations();
- assert_equals(animations.length, 1, 'List of Animations was trimmed');
- assert_equals(animations[0], secondAnimation,
- 'Remaining Animation is the second one in the list');
- assert_equals(typeof(animations[0].startTime), 'number',
- 'Remaining Animation has resolved startTime');
- assert_less_than(animations[0].startTime,
- animations[0].timeline.currentTime,
- 'Remaining Animation preserves startTime');
- });
+ await secondAnimation.ready;
+ await waitForNextFrame();
+
+ // Trim list of animations
+ div.style.animationName = 'anim1';
+ const animations = div.getAnimations();
+ assert_equals(animations.length, 1, 'List of Animations was trimmed');
+ assert_equals(animations[0], secondAnimation,
+ 'Remaining Animation is the second one in the list');
+ assert_equals(typeof(animations[0].startTime), 'number',
+ 'Remaining Animation has resolved startTime');
+ assert_less_than(animations[0].startTime,
+ animations[0].timeline.currentTime,
+ 'Remaining Animation preserves startTime');
}, 'Animations are removed from the start of the list while preserving'
+ ' the state of existing Animations');
-promise_test(t => {
+promise_test(async t => {
const div = addDiv(t);
div.style.animation = 'anim1 100s';
const firstAddedAnimation = div.getAnimations()[0];
let secondAddedAnimation;
let animations;
// Wait and add second Animation
- return firstAddedAnimation.ready.then(waitForFrame).then(() => {
- div.style.animation = 'anim1 100s, anim1 100s';
- secondAddedAnimation = div.getAnimations()[0];
+ await firstAddedAnimation.ready;
+ await waitForFrame();
+
+ div.style.animation = 'anim1 100s, anim1 100s';
+ secondAddedAnimation = div.getAnimations()[0];
+
+ // Wait again and add another Animation
+ await secondAddedAnimation.ready;
+ await waitForFrame();
- // Wait again and add another Animation
- return secondAddedAnimation.ready.then(waitForFrame);
- }).then(() => {
- div.style.animation = 'anim1 100s, anim2 100s, anim1 100s';
- animations = div.getAnimations();
- assert_not_equals(firstAddedAnimation, secondAddedAnimation,
- 'New Animations are added to start of the list');
- assert_equals(animations[0], secondAddedAnimation,
- 'Second Animation remains in same position after'
- + ' interleaving');
- assert_equals(animations[2], firstAddedAnimation,
- 'First Animation remains in same position after'
- + ' interleaving');
- return animations[1].ready;
- }).then(() => {
- assert_greater_than(animations[1].startTime, animations[0].startTime,
- 'Interleaved animation starts later than existing ' +
- 'animations');
- assert_greater_than(animations[0].startTime, animations[2].startTime,
- 'Original animations retain their start time');
- });
+ div.style.animation = 'anim1 100s, anim2 100s, anim1 100s';
+ animations = div.getAnimations();
+ assert_not_equals(firstAddedAnimation, secondAddedAnimation,
+ 'New Animations are added to start of the list');
+ assert_equals(animations[0], secondAddedAnimation,
+ 'Second Animation remains in same position after'
+ + ' interleaving');
+ assert_equals(animations[2], firstAddedAnimation,
+ 'First Animation remains in same position after'
+ + ' interleaving');
+ await animations[1].ready;
+
+ assert_greater_than(animations[1].startTime, animations[0].startTime,
+ 'Interleaved animation starts later than existing ' +
+ 'animations');
+ assert_greater_than(animations[0].startTime, animations[2].startTime,
+ 'Original animations retain their start time');
}, 'Animation state is preserved when interleaving animations in list');
</script>
</body>
--- a/dom/animation/test/css-animations/test_element-get-animations.html
+++ b/dom/animation/test/css-animations/test_element-get-animations.html
@@ -28,51 +28,50 @@
test(t => {
const div = addDiv(t);
assert_equals(div.getAnimations().length, 0,
'getAnimations returns an empty sequence for an element'
+ ' with no animations');
}, 'getAnimations for non-animated content');
-promise_test(t => {
+promise_test(async t => {
const div = addDiv(t);
// FIXME: This test does too many things. It should be split up.
// Add an animation
div.style.animation = 'anim1 100s';
let animations = div.getAnimations();
assert_equals(animations.length, 1,
'getAnimations returns an Animation running CSS Animations');
- return animations[0].ready.then(() => {
- const startTime = animations[0].startTime;
- assert_true(startTime > 0 && startTime <= document.timeline.currentTime,
- 'CSS animation has a sensible start time');
+ await animations[0].ready;
+
+ const startTime = animations[0].startTime;
+ assert_true(startTime > 0 && startTime <= document.timeline.currentTime,
+ 'CSS animation has a sensible start time');
+
+ // Wait a moment then add a second animation.
+ //
+ // We wait for the next frame so that we can test that the start times of
+ // the animations differ.
+ await waitForFrame();
- // Wait a moment then add a second animation.
- //
- // We wait for the next frame so that we can test that the start times of
- // the animations differ.
- return waitForFrame();
- }).then(() => {
- div.style.animation = 'anim1 100s, anim2 100s';
- animations = div.getAnimations();
- assert_equals(animations.length, 2,
- 'getAnimations returns one Animation for each value of'
- + ' animation-name');
- // Wait until both Animations are ready
- // (We don't make any assumptions about the order of the Animations since
- // that is the purpose of the following test.)
- return waitForAllAnimations(animations);
- }).then(() => {
- assert_true(animations[0].startTime < animations[1].startTime,
- 'Additional Animations for CSS animations start after the original'
- + ' animation and appear later in the list');
- });
+ div.style.animation = 'anim1 100s, anim2 100s';
+ animations = div.getAnimations();
+ assert_equals(animations.length, 2,
+ 'getAnimations returns one Animation for each value of animation-name');
+ // Wait until both Animations are ready
+ // (We don't make any assumptions about the order of the Animations since
+ // that is the purpose of the following test.)
+ await waitForAllAnimations(animations);
+
+ assert_true(animations[0].startTime < animations[1].startTime,
+ 'Additional Animations for CSS animations start after the original'
+ + ' animation and appear later in the list');
}, 'getAnimations for CSS Animations');
test(t => {
const div = addDiv(t, { style: 'animation: anim1 100s' });
assert_class_string(div.getAnimations()[0], 'CSSAnimation',
'Interface of returned animation is CSSAnimation');
}, 'getAnimations returns CSSAnimation objects for CSS Animations');
@@ -81,39 +80,40 @@ test(t => {
// Add an animation that targets multiple properties
div.style.animation = 'multiPropAnim 100s';
assert_equals(div.getAnimations().length, 1,
'getAnimations returns only one Animation for a CSS Animation'
+ ' that targets multiple properties');
}, 'getAnimations for multi-property animations');
-promise_test(t => {
+promise_test(async t => {
const div = addDiv(t);
// Add an animation
div.style.backgroundColor = 'red';
div.style.animation = 'anim1 100s';
getComputedStyle(div).backgroundColor;
// Wait until a frame after the animation starts, then add a transition
let animations = div.getAnimations();
- return animations[0].ready.then(waitForFrame).then(() => {
- div.style.transition = 'all 100s';
- div.style.backgroundColor = 'green';
+ await animations[0].ready;
+ await waitForFrame();
+
+ div.style.transition = 'all 100s';
+ div.style.backgroundColor = 'green';
- animations = div.getAnimations();
- assert_equals(animations.length, 2,
- 'getAnimations returns Animations for both animations and'
- + ' transitions that run simultaneously');
- assert_class_string(animations[0], 'CSSTransition',
- 'First-returned animation is the CSS Transition');
- assert_class_string(animations[1], 'CSSAnimation',
- 'Second-returned animation is the CSS Animation');
- });
+ animations = div.getAnimations();
+ assert_equals(animations.length, 2,
+ 'getAnimations returns Animations for both animations and'
+ + ' transitions that run simultaneously');
+ assert_class_string(animations[0], 'CSSTransition',
+ 'First-returned animation is the CSS Transition');
+ assert_class_string(animations[1], 'CSSAnimation',
+ 'Second-returned animation is the CSS Animation');
}, 'getAnimations for both CSS Animations and CSS Transitions at once');
async_test(t => {
const div = addDiv(t);
// Set up event listener
div.addEventListener('animationend', t.step_func(() => {
assert_equals(div.getAnimations().length, 0,
@@ -168,37 +168,38 @@ test(t => {
div.style.animation = 'anim1 100s, missing 100s';
animations = div.getAnimations();
assert_equals(animations.length, 1,
'getAnimations returns Animations only for those CSS Animations whose'
+ ' animation-name is found');
}, 'getAnimations for CSS Animations with animation-name: missing');
-promise_test(t => {
+promise_test(async t => {
const div = addDiv(t);
div.style.animation = 'anim1 100s, notyet 100s';
let animations = div.getAnimations();
assert_equals(animations.length, 1,
'getAnimations initally only returns Animations for CSS Animations whose'
+ ' animation-name is found');
- return animations[0].ready.then(waitForFrame).then(() => {
- const keyframes = '@keyframes notyet { to { left: 100px; } }';
- document.styleSheets[0].insertRule(keyframes, 0);
- animations = div.getAnimations();
- assert_equals(animations.length, 2,
- 'getAnimations includes Animation when @keyframes rule is added'
- + ' later');
- return waitForAllAnimations(animations);
- }).then(() => {
- assert_true(animations[0].startTime < animations[1].startTime,
- 'Newly added animation has a later start time');
- document.styleSheets[0].deleteRule(0);
- });
+ await animations[0].ready;
+ await waitForFrame();
+
+ const keyframes = '@keyframes notyet { to { left: 100px; } }';
+ document.styleSheets[0].insertRule(keyframes, 0);
+ animations = div.getAnimations();
+ assert_equals(animations.length, 2,
+ 'getAnimations includes Animation when @keyframes rule is added'
+ + ' later');
+ await waitForAllAnimations(animations);
+
+ assert_true(animations[0].startTime < animations[1].startTime,
+ 'Newly added animation has a later start time');
+ document.styleSheets[0].deleteRule(0);
}, 'getAnimations for CSS Animations where the @keyframes rule is added'
+ ' later');
test(t => {
const div = addDiv(t);
div.style.animation = 'anim1 100s, anim1 100s';
assert_equals(div.getAnimations().length, 2,
'getAnimations returns one Animation for each CSS animation-name'
@@ -208,28 +209,29 @@ test(t => {
test(t => {
const div = addDiv(t);
div.style.animation = 'empty 100s';
assert_equals(div.getAnimations().length, 1,
'getAnimations returns Animations for CSS animations with an'
+ ' empty keyframes rule');
}, 'getAnimations for CSS Animations with empty keyframes rule');
-promise_test(t => {
+promise_test(async t => {
const div = addDiv(t);
div.style.animation = 'anim1 100s 100s';
const animations = div.getAnimations();
assert_equals(animations.length, 1,
'getAnimations returns animations for CSS animations whose'
+ ' delay makes them start later');
- return animations[0].ready.then(waitForFrame).then(() => {
- assert_true(animations[0].startTime <= document.timeline.currentTime,
- 'For CSS Animations in delay phase, the start time of the Animation is'
- + ' not in the future');
- });
+ await animations[0].ready;
+ await waitForFrame();
+
+ assert_true(animations[0].startTime <= document.timeline.currentTime,
+ 'For CSS Animations in delay phase, the start time of the Animation is'
+ + ' not in the future');
}, 'getAnimations for CSS animations in delay phase');
test(t => {
const div = addDiv(t);
div.style.animation = 'anim1 0s 100s';
assert_equals(div.getAnimations().length, 1,
'getAnimations returns animations for CSS animations whose'
+ ' duration is zero');
@@ -274,43 +276,43 @@ test(t => {
'getAnimations does not return cancelled animations');
animation.play();
assert_equals(div.getAnimations().length, 1,
'getAnimations returns cancelled animations that have been re-started');
}, 'getAnimations for CSS Animations that are cancelled');
-promise_test(t => {
+promise_test(async t => {
const div = addDiv(t);
div.style.animation = 'anim2 100s';
- return div.getAnimations()[0].ready.then(() => {
- // Prepend to the list and test that even though anim1 was triggered
- // *after* anim2, it should come first because it appears first
- // in the animation-name property.
- div.style.animation = 'anim1 100s, anim2 100s';
- let anims = div.getAnimations();
- assert_equals(anims[0].animationName, 'anim1',
- 'animation order after prepending to list');
- assert_equals(anims[1].animationName, 'anim2',
- 'animation order after prepending to list');
+ await div.getAnimations()[0].ready;
+
+ // Prepend to the list and test that even though anim1 was triggered
+ // *after* anim2, it should come first because it appears first
+ // in the animation-name property.
+ div.style.animation = 'anim1 100s, anim2 100s';
+ let anims = div.getAnimations();
+ assert_equals(anims[0].animationName, 'anim1',
+ 'animation order after prepending to list');
+ assert_equals(anims[1].animationName, 'anim2',
+ 'animation order after prepending to list');
- // Normally calling cancel and play would this push anim1 to the top of
- // the stack but it shouldn't for CSS animations that map an the
- // animation-name property.
- const anim1 = anims[0];
- anim1.cancel();
- anim1.play();
- anims = div.getAnimations();
- assert_equals(anims[0].animationName, 'anim1',
- 'animation order after cancelling and restarting');
- assert_equals(anims[1].animationName, 'anim2',
- 'animation order after cancelling and restarting');
- });
+ // Normally calling cancel and play would this push anim1 to the top of
+ // the stack but it shouldn't for CSS animations that map an the
+ // animation-name property.
+ const anim1 = anims[0];
+ anim1.cancel();
+ anim1.play();
+ anims = div.getAnimations();
+ assert_equals(anims[0].animationName, 'anim1',
+ 'animation order after cancelling and restarting');
+ assert_equals(anims[1].animationName, 'anim2',
+ 'animation order after cancelling and restarting');
}, 'getAnimations for CSS Animations follows animation-name order');
test(t => {
addStyle(t, { '#target::after': 'animation: anim1 10s;',
'#target::before': 'animation: anim1 10s;' });
const target = addDiv(t, { 'id': 'target' });
target.style.animation = 'anim1 100s';
--- a/dom/animation/test/css-animations/test_event-dispatch.html
+++ b/dom/animation/test/css-animations/test_event-dispatch.html
@@ -54,327 +54,322 @@ const setupAnimation = (t, animationStyl
'animationiteration',
'animationend',
'animationcancel' ]);
const animation = div.getAnimations()[0];
return { animation, watcher, div, handler };
};
-promise_test(t => {
+promise_test(async t => {
// Add 1ms delay to ensure that the delay is not included in the elapsedTime.
const { animation, watcher } = setupAnimation(t, 'anim 100s 1ms');
- return watcher.wait_for('animationstart').then(evt => {
- assert_equals(evt.elapsedTime, 0.0);
- });
+ const evt = await watcher.wait_for('animationstart');
+ assert_equals(evt.elapsedTime, 0.0);
}, 'Idle -> Active');
-promise_test(t => {
+promise_test(async t => {
const { animation, watcher, div, handler } = setupAnimation(t, 'anim 100s');
// Seek to After phase.
animation.finish();
- return watcher.wait_for([ 'animationstart',
- 'animationend' ]).then(() => {
- assert_equals(handler.animationstart, 0.0);
- assert_equals(handler.animationend, 100);
- });
+
+ await watcher.wait_for([ 'animationstart', 'animationend' ]);
+ assert_equals(handler.animationstart, 0.0);
+ assert_equals(handler.animationend, 100);
}, 'Idle -> After');
-promise_test(t => {
+promise_test(async t => {
const { animation, watcher } =
setupAnimation(t, 'anim 100s 100s paused');
- return animation.ready.then(() => {
- // Seek to Active phase.
- animation.currentTime = 100 * MS_PER_SEC;
- return watcher.wait_for('animationstart');
- }).then(evt => {
- assert_equals(evt.elapsedTime, 0.0);
- });
+ await animation.ready;
+
+ // Seek to Active phase.
+ animation.currentTime = 100 * MS_PER_SEC;
+
+ const evt = await watcher.wait_for('animationstart');
+ assert_equals(evt.elapsedTime, 0.0);
}, 'Before -> Active');
-promise_test(t => {
+promise_test(async t => {
const { animation, watcher, div, handler } =
setupAnimation(t, 'anim 100s 100s paused');
- return animation.ready.then(() => {
- // Seek to After phase.
- animation.finish();
- return watcher.wait_for([ 'animationstart', 'animationend' ]);
- }).then(evt => {
- assert_equals(handler.animationstart, 0.0);
- assert_equals(handler.animationend, 100.0);
- });
+ await animation.ready;
+
+ // Seek to After phase.
+ animation.finish();
+
+ await watcher.wait_for([ 'animationstart', 'animationend' ]);
+ assert_equals(handler.animationstart, 0.0);
+ assert_equals(handler.animationend, 100.0);
}, 'Before -> After');
-promise_test(t => {
+promise_test(async t => {
const { animation, watcher, div } = setupAnimation(t, 'anim 100s paused');
- return watcher.wait_for('animationstart').then(evt => {
- // Make idle
- div.style.display = 'none';
- return watcher.wait_for('animationcancel');
- }).then(evt => {
- assert_equals(evt.elapsedTime, 0.0);
- });
+ await watcher.wait_for('animationstart');
+
+ // Make idle
+ div.style.display = 'none';
+
+ const evt = await watcher.wait_for('animationcancel');
+ assert_equals(evt.elapsedTime, 0.0);
}, 'Active -> Idle, display: none');
-promise_test(t => {
+promise_test(async t => {
const { animation, watcher, div } = setupAnimation(t, 'anim 100s');
- return watcher.wait_for('animationstart').then(evt => {
- animation.currentTime = 100.0;
- // Make idle
- animation.timeline = null;
- return watcher.wait_for('animationcancel');
- }).then(evt => {
- assert_time_equals_literal(evt.elapsedTime, 0.1);
- });
+ await watcher.wait_for('animationstart');
+
+ animation.currentTime = 100.0;
+
+ // Make idle
+ animation.timeline = null;
+
+ const evt = await watcher.wait_for('animationcancel');
+ assert_time_equals_literal(evt.elapsedTime, 0.1);
}, 'Active -> Idle, setting Animation.timeline = null');
-promise_test(t => {
- // we should NOT pause animation since calling cancel synchronously.
+promise_test(async t => {
+ // We should NOT pause animation since calling cancel synchronously.
const { animation, watcher, div } = setupAnimation(t, 'anim 100s');
- return watcher.wait_for('animationstart').then(evt => {
- animation.currentTime = 50.0;
- animation.cancel();
- return watcher.wait_for('animationcancel');
- }).then(evt => {
- assert_time_equals_literal(evt.elapsedTime, 0.05);
- });
+ await watcher.wait_for('animationstart');
+
+ animation.currentTime = 50.0;
+ animation.cancel();
+
+ const evt = await watcher.wait_for('animationcancel');
+ assert_time_equals_literal(evt.elapsedTime, 0.05);
}, 'Active -> Idle, calling Animation.cancel()');
-promise_test(t => {
+promise_test(async t => {
const { animation, watcher } =
setupAnimation(t, 'anim 100s 100s paused');
// Seek to Active phase.
animation.currentTime = 100 * MS_PER_SEC;
- return watcher.wait_for('animationstart').then(() => {
- // Seek to Before phase.
- animation.currentTime = 0;
- return watcher.wait_for('animationend');
- }).then(evt => {
- assert_equals(evt.elapsedTime, 0.0);
- });
+ await watcher.wait_for('animationstart');
+
+ // Seek to Before phase.
+ animation.currentTime = 0;
+
+ const evt = await watcher.wait_for('animationend');
+ assert_equals(evt.elapsedTime, 0.0);
}, 'Active -> Before');
-promise_test(t => {
+promise_test(async t => {
const { animation, watcher } = setupAnimation(t, 'anim 100s paused');
- return watcher.wait_for('animationstart').then(evt => {
- // Seek to After phase.
- animation.finish();
- return watcher.wait_for('animationend');
- }).then(evt => {
- assert_equals(evt.elapsedTime, 100.0);
- });
+ await watcher.wait_for('animationstart');
+
+ // Seek to After phase.
+ animation.finish();
+
+ const evt = await watcher.wait_for('animationend');
+ assert_equals(evt.elapsedTime, 100.0);
}, 'Active -> After');
-promise_test(t => {
+promise_test(async t => {
const { animation, watcher, div, handler } =
setupAnimation(t, 'anim 100s 100s paused');
// Seek to After phase.
animation.finish();
- return watcher.wait_for([ 'animationstart',
- 'animationend' ]).then(() => {
- // Seek to Before phase.
- animation.currentTime = 0;
- handler.clear();
- return watcher.wait_for([ 'animationstart', 'animationend' ]);
- }).then(() => {
- assert_equals(handler.animationstart, 100.0);
- assert_equals(handler.animationend, 0.0);
- });
+ await watcher.wait_for([ 'animationstart', 'animationend' ]);
+
+ // Seek to Before phase.
+ animation.currentTime = 0;
+
+ handler.clear();
+ await watcher.wait_for([ 'animationstart', 'animationend' ]);
+ assert_equals(handler.animationstart, 100.0);
+ assert_equals(handler.animationend, 0.0);
}, 'After -> Before');
-promise_test(t => {
+promise_test(async t => {
const { animation, watcher, div } =
setupAnimation(t, 'anim 100s 100s paused');
// Seek to After phase.
animation.finish();
- return watcher.wait_for([ 'animationstart',
- 'animationend' ]).then(() => {
- // Seek to Active phase.
- animation.currentTime = 100 * MS_PER_SEC;
- return watcher.wait_for('animationstart');
- }).then(evt => {
- assert_equals(evt.elapsedTime, 100.0);
- });
+ await watcher.wait_for([ 'animationstart', 'animationend' ]);
+
+ // Seek to Active phase.
+ animation.currentTime = 100 * MS_PER_SEC;
+
+ const evt = await watcher.wait_for('animationstart');
+ assert_equals(evt.elapsedTime, 100.0);
}, 'After -> Active');
-promise_test(t => {
+promise_test(async t => {
const { animation, watcher, div }
= setupAnimation(t, 'anim 100s 100s 3 paused');
- return animation.ready.then(() => {
- // Seek to iteration 0 (no animationiteration event should be dispatched)
- animation.currentTime = 100 * MS_PER_SEC;
- return watcher.wait_for('animationstart');
- }).then(evt => {
- // Seek to iteration 2
- animation.currentTime = 300 * MS_PER_SEC;
- return watcher.wait_for('animationiteration');
- }).then(evt => {
- assert_equals(evt.elapsedTime, 200);
- // Seek to After phase (no animationiteration event should be dispatched)
- animation.currentTime = 400 * MS_PER_SEC;
- return watcher.wait_for('animationend');
- }).then(evt => {
- assert_equals(evt.elapsedTime, 300);
- });
+ await animation.ready;
+
+ // Seek to iteration 0 (no animationiteration event should be dispatched)
+ animation.currentTime = 100 * MS_PER_SEC;
+ await watcher.wait_for('animationstart');
+
+ // Seek to iteration 2
+ animation.currentTime = 300 * MS_PER_SEC;
+ let evt = await watcher.wait_for('animationiteration');
+ assert_equals(evt.elapsedTime, 200);
+
+ // Seek to After phase (no animationiteration event should be dispatched)
+ animation.currentTime = 400 * MS_PER_SEC;
+ evt = await watcher.wait_for('animationend');
+ assert_equals(evt.elapsedTime, 300);
}, 'Active -> Active (forwards)');
-promise_test(t => {
+promise_test(async t => {
const { animation, watcher } = setupAnimation(t, 'anim 100s 100s 3');
// Seek to After phase.
animation.finish();
- return watcher.wait_for([ 'animationstart',
- 'animationend' ]).then(() => {
- // Seek to iteration 2 (no animationiteration event should be dispatched)
- animation.pause();
- animation.currentTime = 300 * MS_PER_SEC;
- return watcher.wait_for('animationstart');
- }).then(() => {
- // Seek to mid of iteration 0 phase.
- animation.currentTime = 200 * MS_PER_SEC;
- return watcher.wait_for('animationiteration');
- }).then(evt => {
- assert_equals(evt.elapsedTime, 200.0);
- // Seek to before phase (no animationiteration event should be dispatched)
- animation.currentTime = 0;
- return watcher.wait_for('animationend');
- });
+ await watcher.wait_for([ 'animationstart', 'animationend' ]);
+
+ // Seek to iteration 2 (no animationiteration event should be dispatched)
+ animation.pause();
+ animation.currentTime = 300 * MS_PER_SEC;
+ await watcher.wait_for('animationstart');
+
+ // Seek to mid of iteration 0 phase.
+ animation.currentTime = 200 * MS_PER_SEC;
+
+ const evt = await watcher.wait_for('animationiteration');
+ assert_equals(evt.elapsedTime, 200.0);
+
+ // Seek to before phase (no animationiteration event should be dispatched)
+ animation.currentTime = 0;
+ await watcher.wait_for('animationend');
}, 'Active -> Active (backwards)');
-promise_test(t => {
- const { animation, watcher, div } =
- setupAnimation(t, 'anim 100s paused');
- return watcher.wait_for('animationstart').then(evt => {
- // Seek to Idle phase.
- div.style.display = 'none';
- flushComputedStyle(div);
+promise_test(async t => {
+ const { animation, watcher, div } = setupAnimation(t, 'anim 100s paused');
+
+ await watcher.wait_for('animationstart');
- return watcher.wait_for('animationcancel');
- }).then(() => {
- // Restart this animation.
- div.style.display = '';
- return watcher.wait_for('animationstart');
- });
+ // Seek to Idle phase.
+ div.style.display = 'none';
+ flushComputedStyle(div);
+
+ await watcher.wait_for('animationcancel');
+
+ // Restart this animation.
+ div.style.display = '';
+ await watcher.wait_for('animationstart');
}, 'Active -> Idle -> Active: animationstart is fired by restarting animation');
-promise_test(t => {
- const { animation, watcher } =
- setupAnimation(t, 'anim 100s 100s 2 paused');
+promise_test(async t => {
+ const { animation, watcher } = setupAnimation(t, 'anim 100s 100s 2 paused');
// Make After.
animation.finish();
- return watcher.wait_for([ 'animationstart',
- 'animationend' ]).then(evt => {
- animation.playbackRate = -1;
- return watcher.wait_for('animationstart');
- }).then(evt => {
- assert_equals(evt.elapsedTime, 200);
- // Seek to 1st iteration
- animation.currentTime = 200 * MS_PER_SEC - 1;
- return watcher.wait_for('animationiteration');
- }).then(evt => {
- assert_equals(evt.elapsedTime, 100);
- // Seek to before
- animation.currentTime = 100 * MS_PER_SEC - 1;
- return watcher.wait_for('animationend');
- }).then(evt => {
- assert_equals(evt.elapsedTime, 0);
- assert_equals(animation.playState, 'running'); // delay
- });
+
+ await watcher.wait_for([ 'animationstart', 'animationend' ]);
+ animation.playbackRate = -1;
+
+ let evt = await watcher.wait_for('animationstart');
+ assert_equals(evt.elapsedTime, 200);
+
+ // Seek to 1st iteration
+ animation.currentTime = 200 * MS_PER_SEC - 1;
+
+ evt = await watcher.wait_for('animationiteration');
+ assert_equals(evt.elapsedTime, 100);
+
+ // Seek to before
+ 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(t => {
+promise_test(async t => {
const { animation, watcher } = setupAnimation(t, 'anim 100s');
- return watcher.wait_for('animationstart').then(evt => {
- // Make idle
- animation.cancel();
- return watcher.wait_for('animationcancel');
- }).then(evt => {
- animation.cancel();
- // Then wait a couple of frames and check that no event was dispatched.
- return waitForAnimationFrames(2);
- });
+ await watcher.wait_for('animationstart');
+
+ // Make idle
+ animation.cancel();
+ await watcher.wait_for('animationcancel');
+
+ animation.cancel();
+ // Then wait a couple of frames and check that no event was dispatched.
+ await waitForAnimationFrames(2);
}, 'Call Animation.cancel after cancelling animation.');
-promise_test(t => {
+promise_test(async t => {
const { animation, watcher } = setupAnimation(t, 'anim 100s');
- return watcher.wait_for('animationstart').then(evt => {
- // Make idle
- animation.cancel();
- animation.play();
- return watcher.wait_for([ 'animationcancel',
- 'animationstart' ]);
- });
+ await watcher.wait_for('animationstart');
+
+ // Make idle
+ animation.cancel();
+ animation.play();
+ await watcher.wait_for([ 'animationcancel', 'animationstart' ]);
}, 'Restart animation after cancelling animation immediately.');
-promise_test(t => {
+promise_test(async t => {
const { animation, watcher } = setupAnimation(t, 'anim 100s');
- return watcher.wait_for('animationstart').then(evt => {
- // Make idle
- animation.cancel();
- animation.play();
- animation.cancel();
- return watcher.wait_for('animationcancel');
- }).then(evt => {
- // Then wait a couple of frames and check that no event was dispatched.
- return waitForAnimationFrames(2);
- });
+ await watcher.wait_for('animationstart');
+
+ // Make idle
+ animation.cancel();
+ animation.play();
+ animation.cancel();
+ await watcher.wait_for('animationcancel');
+
+ // Then wait a couple of frames and check that no event was dispatched.
+ await waitForAnimationFrames(2);
}, 'Call Animation.cancel after restarting animation immediately.');
-promise_test(t => {
+promise_test(async t => {
const { animation, watcher } = setupAnimation(t, 'anim 100s');
- return watcher.wait_for('animationstart').then(evt => {
- // Make idle
- animation.timeline = null;
- return watcher.wait_for('animationcancel');
- }).then(evt => {
- animation.timeline = document.timeline;
- animation.play();
- return watcher.wait_for('animationstart');
- });
+ await watcher.wait_for('animationstart');
+
+ // Make idle
+ animation.timeline = null;
+ await watcher.wait_for('animationcancel');
+
+ animation.timeline = document.timeline;
+ animation.play();
+ await watcher.wait_for('animationstart');
}, 'Set timeline and play transition after clearing the timeline.');
-promise_test(t => {
+promise_test(async t => {
const { animation, watcher } = setupAnimation(t, 'anim 100s');
- return watcher.wait_for('animationstart').then(evt => {
- // Make idle
- animation.cancel();
- return watcher.wait_for('animationcancel');
- }).then(evt => {
- animation.effect = null;
- // Then wait a couple of frames and check that no event was dispatched.
- return waitForAnimationFrames(2);
- });
+ await watcher.wait_for('animationstart');
+
+ // Make idle
+ animation.cancel();
+ await watcher.wait_for('animationcancel');
+
+ animation.effect = null;
+ // Then wait a couple of frames and check that no event was dispatched.
+ await waitForAnimationFrames(2);
}, 'Set null target effect after cancelling the animation.');
-promise_test(t => {
+promise_test(async t => {
const { animation, watcher } = setupAnimation(t, 'anim 100s');
- return watcher.wait_for('animationstart').then(evt => {
- animation.effect = null;
- return watcher.wait_for('animationend');
- }).then(evt => {
- animation.cancel();
- // Then wait a couple of frames and check that no event was dispatched.
- return waitForAnimationFrames(2);
- });
+ await watcher.wait_for('animationstart');
+
+ animation.effect = null;
+ await watcher.wait_for('animationend');
+
+ animation.cancel();
+ // Then wait a couple of frames and check that no event was dispatched.
+ await waitForAnimationFrames(2);
}, 'Cancel the animation after clearing the target effect.');
</script>
</body>
</html>
--- a/dom/animation/test/css-animations/test_event-order.html
+++ b/dom/animation/test/css-animations/test_event-order.html
@@ -54,110 +54,111 @@ const setupAnimation = (t, animationStyl
'animationiteration',
'animationend' ]);
const animation = div.getAnimations()[0];
return [animation, watcher, div];
};
-promise_test(t => {
+promise_test(async t => {
let events = [];
const [animation1, watcher1, div1] =
setupAnimation(t, 'anim 100s 2 paused', events);
const [animation2, watcher2, div2] =
setupAnimation(t, 'anim 100s 2 paused', events);
- return Promise.all([ watcher1.wait_for('animationstart'),
- watcher2.wait_for('animationstart') ]).then(() => {
- checkEvents(events, ['animationstart', div1, 0],
- ['animationstart', div2, 0]);
+ await Promise.all([ watcher1.wait_for('animationstart'),
+ watcher2.wait_for('animationstart') ]);
+
+ checkEvents(events, ['animationstart', div1, 0],
+ ['animationstart', div2, 0]);
- events.length = 0; // Clear received event array
+ events.length = 0; // Clear received event array
+
+ animation1.currentTime = 100 * MS_PER_SEC;
+ animation2.currentTime = 100 * MS_PER_SEC;
+
+ await Promise.all([ watcher1.wait_for('animationiteration'),
+ watcher2.wait_for('animationiteration') ]);
- animation1.currentTime = 100 * MS_PER_SEC;
- animation2.currentTime = 100 * MS_PER_SEC;
- return Promise.all([ watcher1.wait_for('animationiteration'),
- watcher2.wait_for('animationiteration') ]);
- }).then(() => {
- checkEvents(events, ['animationiteration', div1, 100],
- ['animationiteration', div2, 100]);
+ checkEvents(events, ['animationiteration', div1, 100],
+ ['animationiteration', div2, 100]);
- events.length = 0; // Clear received event array
+ events.length = 0; // Clear received event array
- animation1.finish();
- animation2.finish();
+ animation1.finish();
+ animation2.finish();
- return Promise.all([ watcher1.wait_for('animationend'),
- watcher2.wait_for('animationend') ]);
- }).then(() => {
- checkEvents(events, ['animationend', div1, 200],
- ['animationend', div2, 200]);
- });
+ await Promise.all([ watcher1.wait_for('animationend'),
+ watcher2.wait_for('animationend') ]);
+
+ checkEvents(events, ['animationend', div1, 200],
+ ['animationend', div2, 200]);
}, 'Test same events are ordered by elements.');
-promise_test(t => {
+promise_test(async t => {
let events = [];
const [animation1, watcher1, div1] =
setupAnimation(t, 'anim 200s 400s', events);
const [animation2, watcher2, div2] =
setupAnimation(t, 'anim 300s 2', events);
- return watcher2.wait_for('animationstart').then(evt => {
- animation1.currentTime = 400 * MS_PER_SEC;
- animation2.currentTime = 400 * MS_PER_SEC;
+ await watcher2.wait_for('animationstart');
- events.length = 0; // Clear received event array
+ animation1.currentTime = 400 * MS_PER_SEC;
+ animation2.currentTime = 400 * MS_PER_SEC;
- return Promise.all([ watcher1.wait_for('animationstart'),
- watcher2.wait_for('animationiteration') ]);
- }).then(() => {
- checkEvents(events, ['animationiteration', div2, 300],
- ['animationstart', div1, 0]);
- });
+ events.length = 0; // Clear received event array
+
+ await Promise.all([ watcher1.wait_for('animationstart'),
+ watcher2.wait_for('animationiteration') ]);
+
+ checkEvents(events, ['animationiteration', div2, 300],
+ ['animationstart', div1, 0]);
}, 'Test start and iteration events are ordered by time.');
-promise_test(t => {
+promise_test(async t => {
let events = [];
const [animation1, watcher1, div1] =
setupAnimation(t, 'anim 150s', events);
const [animation2, watcher2, div2] =
setupAnimation(t, 'anim 100s 2', events);
- return Promise.all([ watcher1.wait_for('animationstart'),
- watcher2.wait_for('animationstart') ]).then(() => {
- animation1.currentTime = 150 * MS_PER_SEC;
- animation2.currentTime = 150 * MS_PER_SEC;
+ await Promise.all([ watcher1.wait_for('animationstart'),
+ watcher2.wait_for('animationstart') ]);
- events.length = 0; // Clear received event array
+ animation1.currentTime = 150 * MS_PER_SEC;
+ animation2.currentTime = 150 * MS_PER_SEC;
- return Promise.all([ watcher1.wait_for('animationend'),
- watcher2.wait_for('animationiteration') ]);
- }).then(() => {
- checkEvents(events, ['animationiteration', div2, 100],
- ['animationend', div1, 150]);
- });
+ events.length = 0; // Clear received event array
+
+ await Promise.all([ watcher1.wait_for('animationend'),
+ watcher2.wait_for('animationiteration') ]);
+
+ checkEvents(events, ['animationiteration', div2, 100],
+ ['animationend', div1, 150]);
}, 'Test iteration and end events are ordered by time.');
-promise_test(t => {
+promise_test(async t => {
let events = [];
const [animation1, watcher1, div1] =
setupAnimation(t, 'anim 100s 100s', events);
const [animation2, watcher2, div2] =
setupAnimation(t, 'anim 100s 2', events);
animation1.finish();
animation2.finish();
- return Promise.all([ watcher1.wait_for([ 'animationstart',
- 'animationend' ]),
- watcher2.wait_for([ 'animationstart',
- 'animationend' ]) ]).then(() => {
- checkEvents(events, ['animationstart', div2, 0],
- ['animationstart', div1, 0],
- ['animationend', div1, 100],
- ['animationend', div2, 200]);
- });
+ await Promise.all([ watcher1.wait_for([ 'animationstart',
+ 'animationend' ]),
+ watcher2.wait_for([ 'animationstart',
+ 'animationend' ]) ]);
+
+ checkEvents(events, ['animationstart', div2, 0],
+ ['animationstart', div1, 0],
+ ['animationend', div1, 100],
+ ['animationend', div2, 200]);
}, 'Test start and end events are sorted correctly when fired simultaneously');
</script>
</body>
</html>
--- a/dom/animation/test/css-animations/test_setting-effect.html
+++ b/dom/animation/test/css-animations/test_setting-effect.html
@@ -13,120 +13,118 @@
}
}
</style>
<body>
<div id="log"></div>
<script>
'use strict';
-promise_test(t => {
+promise_test(async t => {
const div = addDiv(t);
div.style.animation = 'anim 100s';
const watcher = new EventWatcher(t, div, [ 'animationend',
'animationcancel' ]);
const animation = div.getAnimations()[0];
- return animation.ready.then(() => {
- animation.currentTime = 50 * MS_PER_SEC;
- animation.effect = null;
- assert_equals(animation.playState, 'finished');
- assert_equals(getComputedStyle(div).marginLeft, '0px');
- return watcher.wait_for('animationend');
- });
+ await animation.ready;
+
+ animation.currentTime = 50 * MS_PER_SEC;
+ animation.effect = null;
+ assert_equals(animation.playState, 'finished');
+ assert_equals(getComputedStyle(div).marginLeft, '0px');
+ await watcher.wait_for('animationend');
}, 'Setting a null effect on a running animation fires an animationend event');
-promise_test(t => {
+promise_test(async t => {
const div = addDiv(t);
div.style.animation = 'anim 100s';
const animation = div.getAnimations()[0];
- return animation.ready.then(() => {
- animation.currentTime = 50 * MS_PER_SEC;
- animation.effect = new KeyframeEffect(div,
- { left: [ '0px' , '100px'] },
- 100 * MS_PER_SEC);
- assert_equals(animation.playState, 'running');
- assert_equals(getComputedStyle(div).marginLeft, '0px');
- assert_equals(getComputedStyle(div).left, '50px');
- });
+ await animation.ready;
+
+ animation.currentTime = 50 * MS_PER_SEC;
+ animation.effect = new KeyframeEffect(div,
+ { left: [ '0px' , '100px'] },
+ 100 * MS_PER_SEC);
+ assert_equals(animation.playState, 'running');
+ assert_equals(getComputedStyle(div).marginLeft, '0px');
+ assert_equals(getComputedStyle(div).left, '50px');
}, 'Replacing an animation\'s effect with an effect that targets a different ' +
'property should update both properties');
-promise_test(t => {
+promise_test(async t => {
const div = addDiv(t);
div.style.animation = 'anim 100s';
const animation = div.getAnimations()[0];
- return animation.ready.then(() => {
- animation.currentTime = 50 * MS_PER_SEC;
- animation.effect = new KeyframeEffect(div,
- { left: [ '0px' , '100px'] },
- 20 * MS_PER_SEC);
- assert_equals(animation.playState, 'finished');
- });
+ await animation.ready;
+
+ animation.currentTime = 50 * MS_PER_SEC;
+ animation.effect = new KeyframeEffect(div,
+ { left: [ '0px' , '100px'] },
+ 20 * MS_PER_SEC);
+ assert_equals(animation.playState, 'finished');
}, 'Replacing an animation\'s effect with a shorter one that should have ' +
'already finished, the animation finishes immediately');
-promise_test(t => {
+promise_test(async t => {
const div = addDiv(t);
div.style.animation = 'anim 100s';
const animation = div.getAnimations()[0];
assert_true(animation.pending);
animation.effect = new KeyframeEffect(div,
{ left: [ '0px' , '100px'] },
100 * MS_PER_SEC);
assert_true(animation.pending);
- return animation.ready.then(() => {
- assert_false(animation.pending);
- });
+ await animation.ready;
+
+ assert_false(animation.pending);
}, 'A play-pending animation\'s effect whose effect is replaced still exits ' +
'the pending state');
-promise_test(t => {
+promise_test(async t => {
const div1 = addDiv(t);
const div2 = addDiv(t);
const watcher1 = new EventWatcher(t, div1, 'animationstart');
// Watch |div2| as well to ensure it does *not* get events.
const watcher2 = new EventWatcher(t, div2, 'animationstart');
div1.style.animation = 'anim 100s';
const animation = div1.getAnimations()[0];
animation.effect = new KeyframeEffect(div2,
{ left: [ '0px', '100px' ] },
100 * MS_PER_SEC);
- return watcher1.wait_for('animationstart').then(() => {
- assert_equals(animation.effect.target, div2);
+ await watcher1.wait_for('animationstart');
- // Then wait a couple of frames and check that no event was dispatched.
- return waitForAnimationFrames(2);
- });
+ assert_equals(animation.effect.target, div2);
+
+ // Then wait a couple of frames and check that no event was dispatched.
+ await waitForAnimationFrames(2);
}, 'The event is dispatched at the original element even after setting an ' +
'effect with a different target element');
-promise_test(t => {
+promise_test(async t => {
const div = addDiv(t);
const watcher = new EventWatcher(t, div, [ 'animationstart',
'animationend',
'animationcancel' ]);
div.style.animation = 'anim 100s';
const animation = div.getAnimations()[0];
animation.finish();
- return watcher.wait_for([ 'animationstart',
- 'animationend' ]).then(evt => {
- // Set a longer effect
- animation.effect = new KeyframeEffect(div,
- { left: [ '0px', '100px' ] },
- 200 * MS_PER_SEC);
- return watcher.wait_for('animationstart');
- });
+ await watcher.wait_for([ 'animationstart', 'animationend' ]);
+ // Set a longer effect
+ animation.effect = new KeyframeEffect(div,
+ { left: [ '0px', '100px' ] },
+ 200 * MS_PER_SEC);
+ await watcher.wait_for('animationstart');
}, 'After replacing a finished animation\'s effect with a longer one ' +
'it fires an animationstart event');
</script>
</body>