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