--- a/dom/animation/test/mozilla/file_deferred_start.html
+++ b/dom/animation/test/mozilla/file_deferred_start.html
@@ -26,141 +26,140 @@ function waitForDocLoad() {
}
function waitForPaints() {
return new Promise((resolve, reject) => {
waitForAllPaintsFlushed(resolve);
});
}
-promise_test(t => {
+promise_test(async t => {
// Test that empty animations actually start.
//
// Normally we tie the start of animations to when their first frame of
// the animation is rendered. However, for animations that don't actually
// trigger a paint (e.g. because they are empty, or are animating something
// that doesn't render or is offscreen) we want to make sure they still
// start.
//
// Before we start, wait for the document to finish loading, then create
// div element, and wait for painting. This is because during loading we will
// have other paint events taking place which might, by luck, happen to
// trigger animations that otherwise would not have been triggered, leading to
// false positives.
//
// As a result, it's better to wait until we have a more stable state before
// continuing.
- var div;
- var promiseCallbackDone = false;
- return waitForDocLoad().then(() => {
- div = addDiv(t);
+ await waitForDocLoad();
+
+ const div = addDiv(t);
- return waitForPaints();
- }).then(() => {
- div.style.animation = 'empty 1000s';
- var animation = div.getAnimations()[0];
+ await waitForPaints();
+
+ div.style.animation = 'empty 1000s';
+ const animation = div.getAnimations()[0];
- animation.ready.then(() => {
- promiseCallbackDone = true;
- }).catch(() => {
- assert_unreached('ready promise was rejected');
- });
+ let promiseCallbackDone = false;
+ animation.ready.then(() => {
+ promiseCallbackDone = true;
+ }).catch(() => {
+ assert_unreached('ready promise was rejected');
+ });
- // We need to wait for up to three frames. This is because in some
- // cases it can take up to two frames for the initial layout
- // to take place. Even after that happens we don't actually resolve the
- // ready promise until the following tick.
- return waitForAnimationFrames(3);
- }).then(() => {
- assert_true(promiseCallbackDone,
- 'ready promise for an empty animation was resolved'
- + ' within three animation frames');
- });
+ // We need to wait for up to three frames. This is because in some
+ // cases it can take up to two frames for the initial layout
+ // to take place. Even after that happens we don't actually resolve the
+ // ready promise until the following tick.
+ await waitForAnimationFrames(3);
+
+ assert_true(promiseCallbackDone,
+ 'ready promise for an empty animation was resolved'
+ + ' within three animation frames');
}, 'Animation.ready is resolved for an empty animation');
// Test that compositor animations with delays get synced correctly
//
// NOTE: It is important that we DON'T use
// SpecialPowers.DOMWindowUtils.advanceTimeAndRefresh here since that takes
// us through a different code path.
-promise_test(t => {
+promise_test(async t => {
assert_false(SpecialPowers.DOMWindowUtils.isTestControllingRefreshes,
'Test should run without the refresh driver being under'
+ ' test control');
// This test only applies to compositor animations
if (!isOMTAEnabled()) {
return;
}
const div = addDiv(t, { class: 'target' });
// As with the above test, any stray paints can cause this test to produce
// a false negative (that is, pass when it should fail). To avoid this we
// wait for paints and only then do we commence the test.
- return waitForPaints().then(() => {
- div.animate({ transform: [ 'translate(0px)', 'translate(100px)' ] },
- { duration: 400 * MS_PER_SEC,
- delay: -200 * MS_PER_SEC });
+ await waitForPaints();
+
+ div.animate({ transform: [ 'translate(0px)', 'translate(100px)' ] },
+ { duration: 400 * MS_PER_SEC,
+ delay: -200 * MS_PER_SEC });
+
+ await waitForPaints();
- return waitForPaints();
- }).then(() => {
- const transformStr =
- SpecialPowers.DOMWindowUtils.getOMTAStyle(div, 'transform');
- const translateX = getTranslateXFromTransform(transformStr);
+ const transformStr =
+ SpecialPowers.DOMWindowUtils.getOMTAStyle(div, 'transform');
+ const translateX = getTranslateXFromTransform(transformStr);
- // If the delay has been applied we should be about half-way through
- // the animation. However, if we applied it twice we will be at the
- // end of the animation already so check that we are roughly half way
- // through.
- assert_between_inclusive(translateX, 40, 75,
- 'Animation is about half-way through on the compositor');
- });
+ // If the delay has been applied we should be about half-way through
+ // the animation. However, if we applied it twice we will be at the
+ // end of the animation already so check that we are roughly half way
+ // through.
+ assert_between_inclusive(translateX, 40, 75,
+ 'Animation is about half-way through on the compositor');
}, 'Starting an animation with a delay starts from the correct point');
// Test that compositor animations with a playback rate start at the
// appropriate point.
//
// NOTE: As with the previous test, it is important that we DON'T use
// SpecialPowers.DOMWindowUtils.advanceTimeAndRefresh here since that takes
// us through a different code path.
-promise_test(t => {
+promise_test(async t => {
assert_false(SpecialPowers.DOMWindowUtils.isTestControllingRefreshes,
'Test should run without the refresh driver being under'
+ ' test control');
// This test only applies to compositor animations
if (!isOMTAEnabled()) {
return;
}
const div = addDiv(t, { class: 'target' });
// Wait for the document to load and painting (see notes in previous test).
- return waitForPaints().then(() => {
- const animation =
- div.animate({ transform: [ 'translate(0px)', 'translate(100px)' ] },
- 200 * MS_PER_SEC);
- animation.currentTime = 100 * MS_PER_SEC;
- animation.playbackRate = 0.1;
+ await waitForPaints();
+
+ const animation =
+ div.animate({ transform: [ 'translate(0px)', 'translate(100px)' ] },
+ 200 * MS_PER_SEC);
+ animation.currentTime = 100 * MS_PER_SEC;
+ animation.playbackRate = 0.1;
+
+ await waitForPaints();
- return waitForPaints();
- }).then(() => {
- const transformStr =
- SpecialPowers.DOMWindowUtils.getOMTAStyle(div, 'transform');
- const translateX = getTranslateXFromTransform(transformStr);
+ const transformStr =
+ SpecialPowers.DOMWindowUtils.getOMTAStyle(div, 'transform');
+ const translateX = getTranslateXFromTransform(transformStr);
- // We pass the playback rate to the compositor independently and we have
- // tests to ensure that it is correctly applied there. However, if, when
- // we resolve the start time of the pending animation, we fail to
- // incorporate the playback rate, we will end up starting from the wrong
- // point and the current time calculated on the compositor will be wrong.
- assert_between_inclusive(translateX, 25, 75,
- 'Animation is about half-way through on the compositor');
- });
+ // We pass the playback rate to the compositor independently and we have
+ // tests to ensure that it is correctly applied there. However, if, when
+ // we resolve the start time of the pending animation, we fail to
+ // incorporate the playback rate, we will end up starting from the wrong
+ // point and the current time calculated on the compositor will be wrong.
+ assert_between_inclusive(translateX, 25, 75,
+ 'Animation is about half-way through on the compositor');
}, 'Starting an animation with a playbackRate starts from the correct point');
function getTranslateXFromTransform(transformStr) {
const matrixComponents =
transformStr.startsWith('matrix(')
? transformStr.substring('matrix('.length, transformStr.length-1)
.split(',')
.map(component => Number(component))