Bug 1466031 - Use async/await in dom/animation/test/css-animations/; r=hiro
authorBrian Birtles <birtles@gmail.com>
Mon, 04 Jun 2018 10:20:54 +0900
changeset 421144 814a885cf046a3bfb3ac253684b5df1b11b4dc05
parent 421143 34668c9b0d60615e8eab458dfe2a277ec48c03e5
child 421145 2337de0fc6d6aed827feb6495bfa4dbc33140dae
push id34089
push userdluca@mozilla.com
push dateMon, 04 Jun 2018 18:11:55 +0000
treeherdermozilla-central@d8f180ab7492 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewershiro
bugs1466031
milestone62.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 1466031 - Use async/await in dom/animation/test/css-animations/; r=hiro
dom/animation/test/css-animations/test_animation-cancel.html
dom/animation/test/css-animations/test_animation-computed-timing.html
dom/animation/test/css-animations/test_animation-currenttime.html
dom/animation/test/css-animations/test_animation-finish.html
dom/animation/test/css-animations/test_animation-finished.html
dom/animation/test/css-animations/test_animation-pausing.html
dom/animation/test/css-animations/test_animation-ready.html
dom/animation/test/css-animations/test_animation-starttime.html
dom/animation/test/css-animations/test_animations-dynamic-changes.html
dom/animation/test/css-animations/test_element-get-animations.html
dom/animation/test/css-animations/test_event-dispatch.html
dom/animation/test/css-animations/test_event-order.html
dom/animation/test/css-animations/test_setting-effect.html
--- 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>