Bug 1260084 - Part1.Use promise_test instead of async_test. r=birtles
authorMantaroh Yoshinaga <mantaroh@gmail.com>
Wed, 20 Apr 2016 08:21:17 +0900
changeset 331841 1b9787fb3e8b6ab7d9ce0a290c5675848563eb25
parent 331840 c5612333462913f110509fcd201e7857ee8bc4e2
child 331842 973ea9157b0560e5531df74595bc6794fc3fee92
push id6048
push userkmoir@mozilla.com
push dateMon, 06 Jun 2016 19:02:08 +0000
treeherdermozilla-beta@46d72a56c57d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbirtles
bugs1260084
milestone48.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 1260084 - Part1.Use promise_test instead of async_test. r=birtles MozReview-Commit-ID: 9yrccghlUVb
dom/animation/test/css-animations/file_animation-computed-timing.html
dom/animation/test/css-animations/file_animation-currenttime.html
dom/animation/test/css-animations/file_animation-finished.html
dom/animation/test/css-animations/file_animation-id.html
dom/animation/test/css-animations/file_animation-oncancel.html
dom/animation/test/css-animations/file_animation-onfinish.html
dom/animation/test/css-animations/file_animation-pausing.html
dom/animation/test/css-animations/file_animation-ready.html
dom/animation/test/css-animations/file_animation-reverse.html
dom/animation/test/css-animations/file_animation-starttime.html
dom/animation/test/css-animations/file_animations-dynamic-changes.html
dom/animation/test/css-animations/file_effect-target.html
dom/animation/test/css-animations/file_element-get-animations.html
dom/animation/test/css-animations/file_pseudoElement-get-animations.html
dom/events/test/test_legacy_event.html
--- a/dom/animation/test/css-animations/file_animation-computed-timing.html
+++ b/dom/animation/test/css-animations/file_animation-computed-timing.html
@@ -20,24 +20,24 @@ test(function(t) {
   var effect = div.getAnimations()[0].effect;
   assert_equals(effect.getComputedTiming().delay, 0,
                 'Initial value of delay');
 }, 'delay of a new animation');
 
 test(function(t) {
   var div = addDiv(t, {style: 'animation: moveAnimation 100s -10s'});
   var effect = div.getAnimations()[0].effect;
-  assert_equals(effect.getComputedTiming().delay, -10000,
+  assert_equals(effect.getComputedTiming().delay, -10 * MS_PER_SEC,
                 'Initial value of delay');
 }, 'Negative delay of a new animation');
 
 test(function(t) {
   var div = addDiv(t, {style: 'animation: moveAnimation 100s 10s'});
   var effect = div.getAnimations()[0].effect;
-  assert_equals(effect.getComputedTiming().delay, 10000,
+  assert_equals(effect.getComputedTiming().delay, 10 * MS_PER_SEC,
                 'Initial value of delay');
 }, 'Positive delay of a new animation');
 
 
 // --------------------
 // endDelay
 // --------------------
 test(function(t) {
@@ -109,17 +109,17 @@ test(function(t) {
 
 
 // --------------------
 // duration
 // --------------------
 test(function(t) {
   var div = addDiv(t, {style: 'animation: moveAnimation 100s -10s infinite'});
   var effect = div.getAnimations()[0].effect;
-  assert_equals(effect.getComputedTiming().duration, 100000,
+  assert_equals(effect.getComputedTiming().duration, 100 * MS_PER_SEC,
                 'Initial value of duration');
 }, 'duration of a new animation');
 
 
 // --------------------
 // direction
 // --------------------
 test(function(t) {
@@ -156,60 +156,60 @@ test(function(t) {
 
 // ------------------------------
 // endTime
 // = max(start delay + active duration + end delay, 0)
 // --------------------
 test(function(t) {
   var div = addDiv(t, {style: 'animation: moveAnimation 100s'});
   var effect = div.getAnimations()[0].effect;
-  assert_equals(effect.getComputedTiming().endTime, 100000,
+  assert_equals(effect.getComputedTiming().endTime, 100 * MS_PER_SEC,
                 'Initial value of endTime');
 }, 'endTime of an new animation');
 
 test(function(t) {
   var div = addDiv(t, {style: 'animation: moveAnimation 100s -5s'});
   var effect = div.getAnimations()[0].effect;
-  var answer = 100000 - 5000; // ms
+  var answer = (100 - 5) * MS_PER_SEC;
   assert_equals(effect.getComputedTiming().endTime, answer,
                 'Initial value of endTime');
 }, 'endTime of an animation with a negative delay');
 
 test(function(t) {
   var div = addDiv(t, {style: 'animation: moveAnimation 10s -100s infinite'});
   var effect = div.getAnimations()[0].effect;
   assert_equals(effect.getComputedTiming().endTime, Infinity,
                 'Initial value of endTime');
 }, 'endTime of an infinitely repeating animation');
 
 test(function(t) {
   var div = addDiv(t, {style: 'animation: moveAnimation 0s 100s infinite'});
   var effect = div.getAnimations()[0].effect;
-  assert_equals(effect.getComputedTiming().endTime, 100000,
+  assert_equals(effect.getComputedTiming().endTime, 100 * MS_PER_SEC,
                 'Initial value of endTime');
 }, 'endTime of an infinitely repeating zero-duration animation');
 
 test(function(t) {
   // Fill forwards so div.getAnimations()[0] won't return an
   // undefined value.
   var div = addDiv(t, {style: 'animation: moveAnimation 10s -100s forwards'});
   var effect = div.getAnimations()[0].effect;
-  assert_equals(effect.getComputedTiming().endTime, -90000,
+  assert_equals(effect.getComputedTiming().endTime, -90 * MS_PER_SEC,
                 'Initial value of endTime');
 }, 'endTime of an animation that finishes before its startTime');
 
 
 // --------------------
 // activeDuration
 // = iteration duration * iteration count
 // --------------------
 test(function(t) {
   var div = addDiv(t, {style: 'animation: moveAnimation 100s 5'});
   var effect = div.getAnimations()[0].effect;
-  var answer = 100000 * 5; // ms
+  var answer = 100 * MS_PER_SEC * 5;
   assert_equals(effect.getComputedTiming().activeDuration, answer,
                 'Initial value of activeDuration');
 }, 'activeDuration of a new animation');
 
 test(function(t) {
   var div = addDiv(t, {style: 'animation: moveAnimation 100s infinite'});
   var effect = div.getAnimations()[0].effect;
   assert_equals(effect.getComputedTiming().activeDuration, Infinity,
@@ -243,35 +243,35 @@ test(function(t) {
   var effect = div.getAnimations()[0].effect;
   assert_equals(effect.getComputedTiming().localTime, 0,
                 'Initial value of localTime');
 }, 'localTime of a new animation');
 
 test(function(t) {
   var div = addDiv(t, {style: 'animation: moveAnimation 100s'});
   var anim = div.getAnimations()[0];
-  anim.currentTime = 5000;
+  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');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t, {style: 'animation: moveAnimation 100s'});
 
   var anim = div.getAnimations()[0];
   anim.playbackRate = 2; // 2 times faster
 
-  anim.ready.then(t.step_func(function() {
+  return anim.ready.then(function() {
     assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
                   'localTime is equal to currentTime');
     return waitForFrame();
-  })).then(t.step_func_done(function() {
+  }).then(function() {
     assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
                   'localTime is equal to currentTime');
-  }));
+  });
 }, 'localTime reflects playbackRate immediately');
 
 test(function(t) {
   var div = addDiv(t);
   var effect = new KeyframeEffectReadOnly(div, {left: ["0px", "100px"]});
 
   assert_equals(effect.getComputedTiming().localTime, null,
                 'localTime for orphaned effect');
@@ -301,23 +301,23 @@ test(function(t) {
 }, 'progress of an animation with different fill modes');
 
 test(function(t) {
   var div = addDiv(t, {style: 'animation: moveAnimation 10s 10 both'});
   var anim = div.getAnimations()[0];
 
   assert_equals(anim.effect.getComputedTiming().progress, 0.0,
                 'Initial value of progress');
-  anim.currentTime += 2500;
+  anim.currentTime += 2.5 * MS_PER_SEC;
   assert_equals(anim.effect.getComputedTiming().progress, 0.25,
                 'Value of progress');
-  anim.currentTime += 5000;
+  anim.currentTime += 5 * MS_PER_SEC;
   assert_equals(anim.effect.getComputedTiming().progress, 0.75,
                 'Value of progress');
-  anim.currentTime += 5000;
+  anim.currentTime += 5 * MS_PER_SEC;
   assert_equals(anim.effect.getComputedTiming().progress, 0.25,
                 'Value of progress');
   anim.finish()
   assert_equals(anim.effect.getComputedTiming().progress, 1.0,
                 'Value of progress');
 }, 'progress of an integral repeating animation with normal direction');
 
 test(function(t) {
@@ -329,31 +329,31 @@ test(function(t) {
   //    unresolved (null value).
   var div = addDiv(t, {style: 'animation: moveAnimation 0s infinite both'});
   var anim = div.getAnimations()[0];
 
   assert_equals(anim.effect.getComputedTiming().progress, 1.0,
                 'Initial value of progress in after phase');
 
   // Seek backwards
-  anim.currentTime -= 1000;
+  anim.currentTime -= 1 * MS_PER_SEC;
   assert_equals(anim.effect.getComputedTiming().progress, 0.0,
                 'Value of progress before phase');
 }, 'progress of an infinitely repeating zero-duration animation');
 
 test(function(t) {
   // Default iterations = 1
   var div = addDiv(t, {style: 'animation: moveAnimation 0s both'});
   var anim = div.getAnimations()[0];
 
   assert_equals(anim.effect.getComputedTiming().progress, 1.0,
                 'Initial value of progress in after phase');
 
   // Seek backwards
-  anim.currentTime -= 1000;
+  anim.currentTime -= 1 * MS_PER_SEC;
   assert_equals(anim.effect.getComputedTiming().progress, 0.0,
                 'Value of progress before phase');
 }, 'progress of a finitely repeating zero-duration animation');
 
 test(function(t) {
   var div = addDiv(t, {style: 'animation: moveAnimation 0s 5s 10.25 both'});
   var anim = div.getAnimations()[0];
 
@@ -382,80 +382,80 @@ test(function(t) {
    'with reversing direction');
 
 test(function(t) {
   var div = addDiv(t, {style: 'animation: moveAnimation 10s 10.25 both alternate'});
   var anim = div.getAnimations()[0];
 
   assert_equals(anim.effect.getComputedTiming().progress, 0.0,
                 'Initial value of progress');
-  anim.currentTime += 2500;
+  anim.currentTime += 2.5 * MS_PER_SEC;
   assert_equals(anim.effect.getComputedTiming().progress, 0.25,
                 'Value of progress');
-  anim.currentTime += 5000;
+  anim.currentTime += 5 * MS_PER_SEC;
   assert_equals(anim.effect.getComputedTiming().progress, 0.75,
                 'Value of progress');
-  anim.currentTime += 5000;
+  anim.currentTime += 5 * MS_PER_SEC;
   assert_equals(anim.effect.getComputedTiming().progress, 0.75,
                 'Value of progress');
   anim.finish()
   assert_equals(anim.effect.getComputedTiming().progress, 0.25,
                 'Value of progress');
 }, 'progress of a non-integral repeating animation ' +
    'with alternate direction');
 
 test(function(t) {
   var div = addDiv(t, {style: 'animation: moveAnimation 10s 10.25 both alternate-reverse'});
   var anim = div.getAnimations()[0];
 
   assert_equals(anim.effect.getComputedTiming().progress, 1.0,
                 'Initial value of progress');
-  anim.currentTime += 2500;
+  anim.currentTime += 2.5 * MS_PER_SEC;
   assert_equals(anim.effect.getComputedTiming().progress, 0.75,
                 'Value of progress');
-  anim.currentTime += 5000;
+  anim.currentTime += 5 * MS_PER_SEC;
   assert_equals(anim.effect.getComputedTiming().progress, 0.25,
                 'Value of progress');
-  anim.currentTime += 5000;
+  anim.currentTime += 5 * MS_PER_SEC;
   assert_equals(anim.effect.getComputedTiming().progress, 0.25,
                 'Value of progress');
   anim.finish()
   assert_equals(anim.effect.getComputedTiming().progress, 0.75,
                 'Value of progress');
 }, 'progress of a non-integral repeating animation ' +
    'with alternate-reversing direction');
 
 test(function(t) {
   var div = addDiv(t, {style: 'animation: moveAnimation 0s 10.25 both alternate'});
   var anim = div.getAnimations()[0];
 
   assert_equals(anim.effect.getComputedTiming().progress, 0.25,
                 'Initial value of progress');
-  anim.currentTime += 2500;
+  anim.currentTime += 2.5 * MS_PER_SEC;
   assert_equals(anim.effect.getComputedTiming().progress, 0.25,
                 'Value of progress');
-  anim.currentTime -= 5000;
+  anim.currentTime -= 5 * MS_PER_SEC;
   assert_equals(anim.effect.getComputedTiming().progress, 0.0,
                 'Value of progress');
   anim.finish()
   assert_equals(anim.effect.getComputedTiming().progress, 0.25,
                 'Value of progress');
 }, 'progress of a non-integral repeating zero-duration animation ' +
    'with alternate direction');
 
 test(function(t) {
   var div = addDiv(t, {style: 'animation: moveAnimation 0s 10.25 both alternate-reverse'});
   var anim = div.getAnimations()[0];
 
   assert_equals(anim.effect.getComputedTiming().progress, 0.75,
                 'Initial value of progress');
-  anim.currentTime += 2500;
+  anim.currentTime += 2.5 * MS_PER_SEC;
   assert_equals(anim.effect.getComputedTiming().progress, 0.75,
                 'Value of progress');
-  anim.currentTime -= 5000;
+  anim.currentTime -= 5 * MS_PER_SEC;
   assert_equals(anim.effect.getComputedTiming().progress, 1.0,
                 'Value of progress');
   anim.finish()
   assert_equals(anim.effect.getComputedTiming().progress, 0.75,
                 'Value of progress');
 }, 'progress of a non-integral repeating zero-duration animation ' +
    'with alternate-reverse direction');
 
@@ -486,44 +486,44 @@ test(function(t) {
   //    unresolved (null value).
   var div = addDiv(t, {style: 'animation: moveAnimation 0s infinite both'});
   var anim = div.getAnimations()[0];
 
   assert_equals(anim.effect.getComputedTiming().currentIteration, Infinity,
                 'Initial value of currentIteration in after phase');
 
   // Seek backwards
-  anim.currentTime -= 2000;
+  anim.currentTime -= 2 * MS_PER_SEC;
   assert_equals(anim.effect.getComputedTiming().currentIteration, 0,
                 'Value of currentIteration count during before phase');
 }, 'currentIteration of an infinitely repeating zero-duration animation');
 
 test(function(t) {
   var div = addDiv(t, {style: 'animation: moveAnimation 0s 10.5 both'});
   var anim = div.getAnimations()[0];
 
   // Note: currentIteration = ceil(iteration start + iteration count) - 1
   assert_equals(anim.effect.getComputedTiming().currentIteration, 10,
                 'Initial value of currentIteration');
 
   // Seek backwards
-  anim.currentTime -= 2000;
+  anim.currentTime -= 2 * MS_PER_SEC;
   assert_equals(anim.effect.getComputedTiming().currentIteration, 0,
                 'Value of currentIteration count during before phase');
 }, 'currentIteration of a finitely repeating zero-duration animation');
 
 test(function(t) {
   var div = addDiv(t, {style: 'animation: moveAnimation 100s 5.5 forwards'});
   var anim = div.getAnimations()[0];
 
   assert_equals(anim.effect.getComputedTiming().currentIteration, 0,
                 'Initial value of currentIteration');
   // The 3rd iteration
   // Note: currentIteration = floor(scaled active time / iteration duration)
-  anim.currentTime = 250000; // ms
+  anim.currentTime = 250 * MS_PER_SEC;
   assert_equals(anim.effect.getComputedTiming().currentIteration, 2,
                 'Value of currentIteration during the 3rd iteration');
   // Finish
   anim.finish();
   assert_equals(anim.effect.getComputedTiming().currentIteration, 5,
                 'Value of currentIteration in after phase');
 }, 'currentIteration of an animation with a non-integral iteration count');
 
--- a/dom/animation/test/css-animations/file_animation-currenttime.html
+++ b/dom/animation/test/css-animations/file_animation-currenttime.html
@@ -34,18 +34,18 @@
 // TODO: Once the computedTiming property is implemented, add checks to the
 // checker helpers to ensure that computedTiming's properties are updated as
 // expected.
 // See https://bugzilla.mozilla.org/show_bug.cgi?id=1108055
 
 
 const CSS_ANIM_EVENTS =
   ['animationstart', 'animationiteration', 'animationend'];
-const ANIM_DELAY_MS = 1000000; // 1000s
-const ANIM_DUR_MS = 1000000; // 1000s
+const ANIM_DELAY_MS = 1000 * MS_PER_SEC;
+const ANIM_DUR_MS = 1000 * MS_PER_SEC;
 const ANIM_PROPERTY_VAL = 'anim ' + ANIM_DUR_MS + 'ms ' + ANIM_DELAY_MS + 'ms';
 
 /**
  * These helpers get the value that the currentTime needs to be set to, to put
  * an animation that uses the above ANIM_DELAY_MS and ANIM_DUR_MS values into
  * the middle of various phases or points through the active duration.
  */
 function currentTimeForBeforePhase(timeline) {
@@ -181,17 +181,16 @@ function checkStateAtActiveIntervalEndTi
   var div = animation.effect.target;
   var marginLeft = parseFloat(getComputedStyle(div).marginLeft);
   assert_equals(marginLeft, UNANIMATED_POSITION,
     'the computed value of margin-left should be unaffected ' +
     'by the animation at the end of the active duration when the ' +
     'animation-fill-mode is none');
 }
 
-
 test(function(t)
 {
   var div = addDiv(t, {'class': 'animated-div'});
 
   div.style.animation = ANIM_PROPERTY_VAL;
 
   var animation = div.getAnimations()[0];
 
@@ -219,52 +218,47 @@ test(function(t)
 
   assert_approx_equals(animation.currentTime, 0, 0.0001, // rounding error
     'Check setting of currentTime actually works');
 
   checkStateOnSettingCurrentTimeToZero(animation);
 }, 'Sanity test to check round-tripping assigning to new animation\'s ' +
    'currentTime');
 
-
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t, {'class': 'animated-div'});
   var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
 
   div.style.animation = ANIM_PROPERTY_VAL;
 
   var animation = div.getAnimations()[0];
 
-  animation.ready.then(t.step_func(function() {
+  return animation.ready.then(function() {
     checkStateOnReadyPromiseResolved(animation);
 
     animation.currentTime =
       currentTimeForStartOfActiveInterval(animation.timeline);
     return eventWatcher.wait_for('animationstart');
-  })).then(t.step_func(function() {
+  }).then(function() {
     checkStateAtActiveIntervalStartTime(animation);
 
     animation.currentTime =
       currentTimeForFiftyPercentThroughActiveInterval(animation.timeline);
     checkStateAtFiftyPctOfActiveInterval(animation);
 
     animation.currentTime =
       currentTimeForEndOfActiveInterval(animation.timeline);
     return eventWatcher.wait_for('animationend');
-  })).then(t.step_func(function() {
+  }).then(function() {
     checkStateAtActiveIntervalEndTime(animation);
-  })).catch(t.step_func(function(reason) {
-    assert_unreached(reason);
-  })).then(function() {
-    t.done();
   });
 }, 'Skipping forward through animation');
 
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t, {'class': 'animated-div'});
   var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
 
   div.style.animation = ANIM_PROPERTY_VAL;
 
   var animation = div.getAnimations()[0];
 
   // So that animation is running instead of paused when we set currentTime:
@@ -273,18 +267,18 @@ async_test(function(t) {
   animation.currentTime = currentTimeForEndOfActiveInterval(animation.timeline);
 
   var previousTimelineTime = animation.timeline.currentTime;
 
   // Skipping over the active interval will dispatch an 'animationstart' then
   // an 'animationend' event. We need to wait for these events before we start
   // testing going backwards since EventWatcher will fail the test if it gets
   // an event that we haven't told it about.
-  eventWatcher.wait_for(['animationstart',
-                         'animationend']).then(t.step_func(function() {
+  var retPromise =  eventWatcher.wait_for(['animationstart',
+                                           'animationend']).then(function() {
     assert_true(document.timeline.currentTime - previousTimelineTime <
                   ANIM_DUR_MS,
                 'Sanity check that seeking worked rather than the events ' +
                 'firing after normal playback through the very long ' +
                 'animation duration');
 
     // Now we can start the tests for skipping backwards, but first we check
     // that after the events we're still in the same end time state:
@@ -299,291 +293,267 @@ async_test(function(t) {
     //
     // Calling checkStateAtFiftyPctOfActiveInterval will check computed style,
     // causing computed style to be updated and the 'animationstart' event to
     // be dispatched synchronously. We need to call wait_for first
     // otherwise eventWatcher will assert that the event was unexpected.
     var promise = eventWatcher.wait_for('animationstart');
     checkStateAtFiftyPctOfActiveInterval(animation);
     return promise;
-  })).then(t.step_func(function() {
+  }).then(function() {
     animation.currentTime =
       currentTimeForStartOfActiveInterval(animation.timeline);
     checkStateAtActiveIntervalStartTime(animation);
 
     animation.currentTime = 0;
     // 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(t.step_func(function() {
+  }).then(function() {
     checkStateOnReadyPromiseResolved(animation);
-  })).catch(t.step_func(function(reason) {
-    assert_unreached(reason);
-  })).then(function() {
-    t.done();
   });
 
   // This must come after we've set up the Promise chain, since requesting
   // computed style will force events to be dispatched.
-  // XXX For some reason this fails occasionally (either the animation.playState
-  // check or the marginLeft check).
-  //checkStateAtActiveIntervalEndTime(animation);
+  checkStateAtActiveIntervalEndTime(animation);
+
+  return retPromise;
 }, '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.
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t, {'class': 'animated-div'});
   var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
   div.style.animation = ANIM_PROPERTY_VAL;
   var animation = div.getAnimations()[0];
 
   animation.currentTime = currentTimeForActivePhase(animation.timeline);
   animation.currentTime = currentTimeForBeforePhase(animation.timeline);
 
-  waitForAnimationFrames(2).then(function() {
-    t.done();
-  });
+  return waitForAnimationFrames(2);
 }, 'Redundant change, before -> active, then back');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t, {'class': 'animated-div'});
   var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
   div.style.animation = ANIM_PROPERTY_VAL;
   var animation = div.getAnimations()[0];
 
   animation.currentTime = currentTimeForAfterPhase(animation.timeline);
   animation.currentTime = currentTimeForBeforePhase(animation.timeline);
 
-  waitForAnimationFrames(2).then(function() {
-    t.done();
-  });
+  return waitForAnimationFrames(2);
 }, 'Redundant change, before -> after, then back');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t, {'class': 'animated-div'});
   var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
   div.style.animation = ANIM_PROPERTY_VAL;
   var animation = div.getAnimations()[0];
 
-  eventWatcher.wait_for('animationstart').then(function() {
+  var retPromise = eventWatcher.wait_for('animationstart').then(function() {
     animation.currentTime = currentTimeForBeforePhase(animation.timeline);
     animation.currentTime = currentTimeForActivePhase(animation.timeline);
 
-    waitForAnimationFrames(2).then(function() {
-      t.done();
-    });
+    return waitForAnimationFrames(2);
   });
   // get us into the initial state:
   animation.currentTime = currentTimeForActivePhase(animation.timeline);
+
+  return retPromise;
 }, 'Redundant change, active -> before, then back');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t, {'class': 'animated-div'});
   var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
   div.style.animation = ANIM_PROPERTY_VAL;
   var animation = div.getAnimations()[0];
 
-  eventWatcher.wait_for('animationstart').then(function() {
+  var retPromise =  eventWatcher.wait_for('animationstart').then(function() {
     animation.currentTime = currentTimeForAfterPhase(animation.timeline);
     animation.currentTime = currentTimeForActivePhase(animation.timeline);
 
-    waitForAnimationFrames(2).then(function() {
-      t.done();
-    });
+    return waitForAnimationFrames(2);
   });
   // get us into the initial state:
   animation.currentTime = currentTimeForActivePhase(animation.timeline);
+
+  return retPromise;
 }, 'Redundant change, active -> after, then back');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t, {'class': 'animated-div'});
   var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
   div.style.animation = ANIM_PROPERTY_VAL;
   var animation = div.getAnimations()[0];
 
-  eventWatcher.wait_for(['animationstart',
-                         'animationend']).then(function() {
+  var retPromise =  eventWatcher.wait_for(['animationstart',
+                                           'animationend']).then(function() {
     animation.currentTime = currentTimeForBeforePhase(animation.timeline);
     animation.currentTime = currentTimeForAfterPhase(animation.timeline);
 
-    waitForAnimationFrames(2).then(function() {
-      t.done();
-    });
+    return waitForAnimationFrames(2);
   });
   // get us into the initial state:
   animation.currentTime = currentTimeForAfterPhase(animation.timeline);
+
+  return retPromise;
 }, 'Redundant change, after -> before, then back');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t, {'class': 'animated-div'});
   var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
   div.style.animation = ANIM_PROPERTY_VAL;
   var animation = div.getAnimations()[0];
 
-  eventWatcher.wait_for(['animationstart',
-                         'animationend']).then(function() {
+  var retPromise =  eventWatcher.wait_for(['animationstart',
+                                           'animationend']).then(function() {
     animation.currentTime = currentTimeForActivePhase(animation.timeline);
     animation.currentTime = currentTimeForAfterPhase(animation.timeline);
 
-    waitForAnimationFrames(2).then(function() {
-      t.done();
-    });
+    return waitForAnimationFrames(2);
   });
   // get us into the initial state:
   animation.currentTime = currentTimeForAfterPhase(animation.timeline);
+
+  return retPromise;
 }, 'Redundant change, after -> active, then back');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t, {'class': 'animated-div'});
   var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
   div.style.animation = ANIM_PROPERTY_VAL;
   var animation = div.getAnimations()[0];
 
   animation.pause();
   animation.currentTime = currentTimeForAfterPhase(animation.timeline);
 
-  eventWatcher.wait_for(['animationstart',
-                         'animationend']).then(t.step_func(function() {
+  return eventWatcher.wait_for(['animationstart',
+                                'animationend']).then(function() {
     animation.currentTime = currentTimeForActivePhase(animation.timeline);
     return eventWatcher.wait_for('animationstart');
-  })).then(t.step_func(function() {
-    t.done();
-  }));
-
+  });
 }, 'Seeking finished -> paused dispatches animationstart');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.animation = ANIM_PROPERTY_VAL;
 
   var animation = div.getAnimations()[0];
 
-  animation.ready.then(t.step_func(function() {
+  return animation.ready.then(function() {
     var 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');
-  })).catch(t.step_func(function(reason) {
-    assert_unreached(reason);
-  })).then(function() {
-    t.done();
   });
 }, 'Setting currentTime to null');
 
-
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.animation = 'anim 100s';
 
   var animation = div.getAnimations()[0];
   var pauseTime;
 
-  animation.ready.then(t.step_func(function() {
+  return animation.ready.then(function() {
     assert_not_equals(animation.currentTime, null,
       'Animation.currentTime not null on ready Promise resolve');
     animation.pause();
     return animation.ready;
-  })).then(t.step_func(function() {
+  }).then(function() {
     pauseTime = animation.currentTime;
     return waitForFrame();
-  })).then(t.step_func(function() {
+  }).then(function() {
     assert_equals(animation.currentTime, pauseTime,
       'Animation.currentTime is unchanged after pausing');
-  })).catch(t.step_func(function(reason) {
-    assert_unreached(reason);
-  })).then(function() {
-    t.done();
   });
 }, 'Animation.currentTime after pausing');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.animation = ANIM_PROPERTY_VAL;
 
   var animation = div.getAnimations()[0];
 
-  animation.ready.then(function() {
+  return animation.ready.then(function() {
     // just before animation ends:
     animation.currentTime = ANIM_DELAY_MS + ANIM_DUR_MS - 1;
 
     return waitForAnimationFrames(2);
-  }).then(t.step_func(function() {
+  }).then(function() {
     assert_equals(animation.currentTime, ANIM_DELAY_MS + ANIM_DUR_MS,
       'Animation.currentTime should not continue to increase after the ' +
       'animation has finished');
-    t.done();
-  }));
+  });
 }, 'Animation.currentTime clamping');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.animation = ANIM_PROPERTY_VAL;
 
   var animation = div.getAnimations()[0];
 
-  animation.ready.then(function() {
+  return animation.ready.then(function() {
     // play backwards:
     animation.playbackRate = -1;
 
     // just before animation ends (at the "start"):
     animation.currentTime = 1;
 
     return waitForAnimationFrames(2);
-  }).then(t.step_func(function() {
+  }).then(function() {
     assert_equals(animation.currentTime, 0,
       'Animation.currentTime should not continue to decrease after an ' +
       'animation running in reverse has finished and currentTime is zero');
-    t.done();
-  }));
+  });
 }, 'Animation.currentTime clamping for reversed animation');
 
 test(function(t) {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.animation = 'anim 100s';
 
   var animation = div.getAnimations()[0];
   animation.cancel();
   assert_equals(animation.currentTime, null,
                 'The currentTime of a cancelled animation should be null');
 }, 'Animation.currentTime after cancelling');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.animation = 'anim 100s';
 
   var animation = div.getAnimations()[0];
-  animation.ready.then(t.step_func(function() {
+  return animation.ready.then(function() {
     animation.finish();
 
     // Initiate a pause then abort it
     animation.pause();
     animation.play();
 
     // Wait to return to running state
     return animation.ready;
-  })).then(t.step_func(function() {
+  }).then(function() {
     assert_true(animation.currentTime < 100 * 1000,
                 'After aborting a pause when finished, the currentTime should'
                 + ' jump back towards the start of the animation');
-    t.done();
-  }));
+  });
 }, 'After aborting a pause when finished, the call to play() should rewind'
    + ' the current time');
 
 done();
     </script>
   </body>
 </html>
--- a/dom/animation/test/css-animations/file_animation-finished.html
+++ b/dom/animation/test/css-animations/file_animation-finished.html
@@ -7,540 +7,469 @@
 }
 @keyframes def {}
 </style>
 <body>
 <script>
 'use strict';
 
 const ANIM_PROP_VAL = 'abc 100s';
-const ANIM_DURATION = 100000; // ms
+const ANIM_DURATION = 100 * MS_PER_SEC;
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t);
   div.style.animation = ANIM_PROP_VAL;
   var animation = div.getAnimations()[0];
-
   var previousFinishedPromise = animation.finished;
-
-  animation.ready.then(t.step_func(function() {
+  return animation.ready.then(function() {
     assert_equals(animation.finished, previousFinishedPromise,
                   'Finished promise is the same object when playing starts');
     animation.pause();
     assert_equals(animation.finished, previousFinishedPromise,
                   'Finished promise does not change when pausing');
     animation.play();
     assert_equals(animation.finished, previousFinishedPromise,
                   'Finished promise does not change when play() unpauses');
 
     animation.currentTime = ANIM_DURATION;
 
     return animation.finished;
-  })).then(t.step_func(function() {
+  }).then(function() {
     assert_equals(animation.finished, previousFinishedPromise,
                   'Finished promise is the same object when playing completes');
-    t.done();
-  }));
+  });
 }, 'Test pausing then playing does not change the finished promise');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t);
   div.style.animation = ANIM_PROP_VAL;
   var animation = div.getAnimations()[0];
-
   var previousFinishedPromise = animation.finished;
-
   animation.finish();
-
-  animation.finished.then(t.step_func(function() {
+  return animation.finished.then(function() {
     assert_equals(animation.finished, previousFinishedPromise,
                   'Finished promise is the same object when playing completes');
     animation.play();
     assert_not_equals(animation.finished, previousFinishedPromise,
                   'Finished promise changes when replaying animation');
 
     previousFinishedPromise = animation.finished;
     animation.play();
     assert_equals(animation.finished, previousFinishedPromise,
                   'Finished promise is the same after redundant play() call');
 
-    t.done();
-  }));
+  });
 }, 'Test restarting a finished animation');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t);
   div.style.animation = ANIM_PROP_VAL;
   var animation = div.getAnimations()[0];
-
   var previousFinishedPromise;
-
   animation.finish();
-
-  animation.finished.then(t.step_func(function() {
+  return animation.finished.then(function() {
     previousFinishedPromise = animation.finished;
     animation.playbackRate = -1;
     assert_not_equals(animation.finished, previousFinishedPromise,
                       'Finished promise should be replaced when reversing a ' +
                       'finished promise');
     animation.currentTime = 0;
     return animation.finished;
-  })).then(t.step_func(function() {
+  }).then(function() {
     previousFinishedPromise = animation.finished;
     animation.play();
     assert_not_equals(animation.finished, previousFinishedPromise,
                       'Finished promise is replaced after play() call on ' +
                       'finished, reversed animation');
-    t.done();
-  }));
+  });
 }, 'Test restarting a reversed finished animation');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t);
   div.style.animation = ANIM_PROP_VAL;
   var animation = div.getAnimations()[0];
-
   var previousFinishedPromise = animation.finished;
-
   animation.finish();
-
-  animation.finished.then(t.step_func(function() {
+  return animation.finished.then(function() {
     animation.currentTime = ANIM_DURATION + 1000;
     assert_equals(animation.finished, previousFinishedPromise,
                   'Finished promise is unchanged jumping past end of ' +
                   'finished animation');
-
-    t.done();
-  }));
+  });
 }, 'Test redundant finishing of animation');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t);
   div.style.animation = ANIM_PROP_VAL;
   var animation = div.getAnimations()[0];
-
   // Setup callback to run if finished promise is resolved
   var finishPromiseResolved = false;
   animation.finished.then(function() {
     finishPromiseResolved = true;
   });
-
-  animation.ready.then(t.step_func(function() {
+  return animation.ready.then(function() {
     // Jump to mid-way in interval and pause
     animation.currentTime = ANIM_DURATION / 2;
     animation.pause();
     return animation.ready;
-  })).then(t.step_func(function() {
+  }).then(function() {
     // Jump to the end
     // (But don't use finish() since that should unpause as well)
     animation.currentTime = ANIM_DURATION;
     return waitForAnimationFrames(2);
-  })).then(t.step_func(function() {
+  }).then(function() {
     assert_false(finishPromiseResolved,
                  'Finished promise should not resolve when paused');
-    t.done();
-  }));
+  });
 }, 'Finished promise does not resolve when paused');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t);
   div.style.animation = ANIM_PROP_VAL;
   var animation = div.getAnimations()[0];
-
   // Setup callback to run if finished promise is resolved
   var finishPromiseResolved = false;
   animation.finished.then(function() {
     finishPromiseResolved = true;
   });
-
-  animation.ready.then(t.step_func(function() {
+  return animation.ready.then(function() {
     // Jump to mid-way in interval and pause
     animation.currentTime = ANIM_DURATION / 2;
     animation.pause();
     // Jump to the end
     animation.currentTime = ANIM_DURATION;
     return waitForAnimationFrames(2);
-  })).then(t.step_func(function() {
+  }).then(function() {
     assert_false(finishPromiseResolved,
                  'Finished promise should not resolve when pause-pending');
-    t.done();
-  }));
+  });
 }, 'Finished promise does not resolve when pause-pending');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t);
   div.style.animation = ANIM_PROP_VAL;
   var animation = div.getAnimations()[0];
-
   animation.currentTime = ANIM_DURATION;
-  animation.finished.then(t.step_func(function(resolvedAnimation) {
+  return animation.finished.then(function(resolvedAnimation) {
     assert_equals(resolvedAnimation, animation,
                   'Object identity of animation passed to Promise callback'
                   + ' matches the animation object owning the Promise');
-    t.done();
-  }));
+  });
 }, 'The finished promise is fulfilled with its Animation');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t);
-
   // Set up pending animation
   div.style.animation = ANIM_PROP_VAL;
   var animation = div.getAnimations()[0];
   var previousFinishedPromise = animation.finished;
-
   // Set up listeners on finished promise
-  animation.finished.then(t.step_func(function() {
+  var retPromise = animation.finished.then(function() {
     assert_unreached('finished promise is fulfilled');
-  })).catch(t.step_func(function(err) {
+  }).catch(function(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');
-  })).then(t.step_func(function() {
-    t.done();
-  }));
+  });
 
   // Now cancel the animation and flush styles
   div.style.animation = '';
   window.getComputedStyle(div).animation;
 
+  return retPromise;
 }, 'finished promise is rejected when an animation is cancelled by resetting ' +
    'the animation property');
 
-async_test(function(t) {
+promise_test(function(t) {
   var 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;
   var animation = div.getAnimations()[0];
   var previousFinishedPromise = animation.finished;
 
   // Set up listeners on finished promise
-  animation.finished.then(t.step_func(function() {
+  var retPromise = animation.finished.then(function() {
     assert_unreached('finished promise was fulfilled');
-  })).catch(t.step_func(function(err) {
+  }).catch(function(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');
-  })).then(t.step_func(function() {
-    t.done();
-  }));
+  });
 
   // Now update the animation and flush styles
   div.style.animation = 'def 100s';
   window.getComputedStyle(div).animation;
 
+  return retPromise;
 }, 'finished promise is rejected when an animation is cancelled by changing ' +
    'the animation property');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t);
   div.style.animation = ANIM_PROP_VAL;
   var animation = div.getAnimations()[0];
   var previousFinishedPromise = animation.finished;
 
   // Set up listeners on finished promise
-  animation.finished.then(t.step_func(function() {
+  var retPromise = animation.finished.then(function() {
     assert_unreached('finished promise was fulfilled');
-  })).catch(t.step_func(function(err) {
+  }).catch(function(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');
-  })).then(t.step_func(function() {
-    t.done();
-  }));
+  });
 
   animation.cancel();
 
+  return retPromise;
 }, 'finished promise is rejected when an animation is cancelled by calling ' +
    'cancel()');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t);
   div.style.animation = ANIM_PROP_VAL;
   var animation = div.getAnimations()[0];
-
   var previousFinishedPromise = animation.finished;
-
   animation.currentTime = ANIM_DURATION;
-
-  animation.finished.then(t.step_func(function() {
+  return animation.finished.then(function() {
     animation.cancel();
     assert_not_equals(animation.finished, previousFinishedPromise,
                       'A new finished promise should be created when'
                       + ' cancelling a finished animation');
-  })).then(t.step_func(function() {
-    t.done();
-  }));
+  });
 }, 'cancelling an already-finished animation replaces the finished promise');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t);
   div.style.animation = ANIM_PROP_VAL;
   var animation = div.getAnimations()[0];
   animation.cancel();
-
   // The spec says we still create a new finished promise and reject the old
   // one even if we're already idle. That behavior might change, but for now
   // test that we do that.
-  animation.finished.catch(t.step_func(function(err) {
+  var retPromise = animation.finished.catch(function(err) {
     assert_equals(err.name, 'AbortError',
                   'finished promise is rejected with AbortError');
-    t.done();
-  }));
+  });
 
   // Redundant call to cancel();
   var previousFinishedPromise = animation.finished;
   animation.cancel();
   assert_not_equals(animation.finished, previousFinishedPromise,
                     'A redundant call to cancel() should still generate a new'
                     + ' finished promise');
+  return retPromise;
 }, 'cancelling an idle animation still replaces the finished promise');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t);
   div.style.animation = ANIM_PROP_VAL;
   var animation = div.getAnimations()[0];
-
   const HALF_DUR = ANIM_DURATION / 2;
   const QUARTER_DUR = ANIM_DURATION / 4;
-
   var gotNextFrame = false;
   var currentTimeBeforeShortening;
-
   animation.currentTime = HALF_DUR;
-  animation.ready.then(t.step_func(function() {
+  return animation.ready.then(function() {
     currentTimeBeforeShortening = animation.currentTime;
-
     div.style.animationDuration = QUARTER_DUR + 'ms';
     window.getComputedStyle(div).animationDuration; // flush style
     // Animation should now be finished
 
     // Below we use gotNextFrame to check that shortening of the animation
     // duration causes the finished promise to resolve, rather than it just
     // getting resolved on the next animation frame. This relies on the fact
     // that the promises are resolved as a micro-task before the next frame
     // happens.
-
     waitForFrame().then(function() {
       gotNextFrame = true;
     });
 
     return animation.finished;
-  })).then(t.step_func(function() {
+  }).then(function() {
     assert_false(gotNextFrame, 'shortening of the animation duration should ' +
                                'resolve the finished promise');
     assert_equals(animation.currentTime, currentTimeBeforeShortening,
                   'currentTime should be unchanged when duration shortened');
     var previousFinishedPromise = animation.finished;
     div.style.animationDuration = ANIM_DURATION + 'ms'; // now active again
     window.getComputedStyle(div).animationDuration; // flush style
     assert_not_equals(animation.finished, previousFinishedPromise,
                       'Finished promise should change after lengthening the ' +
                       'duration causes the animation to become active');
-    t.done();
-  }));
+  });
 }, 'Test finished promise changes for animation duration changes');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t);
   div.style.animation = ANIM_PROP_VAL;
   var animation = div.getAnimations()[0];
-
-  animation.ready.then(function() {
+  var retPromise = animation.ready.then(function() {
     animation.playbackRate = 0;
     animation.currentTime = ANIM_DURATION + 1000;
     return waitForAnimationFrames(2);
-  }).then(t.step_func(function() {
-    t.done();
-  }));
+  });
 
   animation.finished.then(t.step_func(function() {
     assert_unreached('finished promise should not resolve when playbackRate ' +
                      'is zero');
   }));
+
+  return retPromise;
 }, 'Test finished promise changes when playbackRate == 0');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t);
   div.style.animation = ANIM_PROP_VAL;
   var animation = div.getAnimations()[0];
 
-  animation.ready.then(function() {
+  return animation.ready.then(function() {
     animation.playbackRate = -1;
     return animation.finished;
-  }).then(t.step_func(function() {
-    t.done();
-  }));
+  });
 }, 'Test finished promise resolves when playbackRate set to a negative value');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t);
   div.style.animation = ANIM_PROP_VAL;
   var animation = div.getAnimations()[0];
-
   var previousFinishedPromise = animation.finished;
-
   animation.currentTime = ANIM_DURATION;
-
-  animation.finished.then(function() {
+  return animation.finished.then(function() {
     div.style.animationPlayState = 'running';
     return waitForAnimationFrames(2);
-  }).then(t.step_func(function() {
+  }).then(function() {
     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');
-    t.done();
-  }));
+  });
 }, 'Test finished promise changes when animationPlayState set to running');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t);
   div.style.animation = ANIM_PROP_VAL;
   var animation = div.getAnimations()[0];
-
   var previousFinishedPromise = animation.finished;
-
   animation.currentTime = ANIM_DURATION;
-
-  animation.finished.then(t.step_func(function() {
+  return animation.finished.then(function() {
     animation.currentTime = 0;
     assert_not_equals(animation.finished, previousFinishedPromise,
                       'Finished promise should change once a prior ' +
                       'finished promise resolved and the animation ' +
                       'falls out finished state');
-    t.done();
-  }));
+  });
 }, 'Test finished promise changes when a prior finished promise resolved ' +
    'and the animation falls out finished state');
 
-async_test(function(t) {
+test(function(t) {
   var div = addDiv(t);
   div.style.animation = ANIM_PROP_VAL;
   var animation = div.getAnimations()[0];
-
   var previousFinishedPromise = animation.finished;
-
   animation.currentTime = ANIM_DURATION;
   animation.currentTime = ANIM_DURATION / 2;
-
   assert_equals(animation.finished, previousFinishedPromise,
                 'No new finished promise generated when finished state ' +
                 'is checked asynchronously');
-  t.done();
 }, 'Test no new finished promise generated when finished state ' +
    'is checked asynchronously');
 
-async_test(function(t) {
+test(function(t) {
+  var div = addDiv(t);
+  div.style.animation = ANIM_PROP_VAL;
+  var animation = div.getAnimations()[0];
+  var previousFinishedPromise = animation.finished;
+  animation.finish();
+  animation.currentTime = ANIM_DURATION / 2;
+  assert_not_equals(animation.finished, previousFinishedPromise,
+                    'New finished promise generated when finished state ' +
+                    'is checked synchronously');
+}, 'Test new finished promise generated when finished state ' +
+   'is checked synchronously');
+
+promise_test(function(t) {
   var div = addDiv(t);
   div.style.animation = ANIM_PROP_VAL;
   var animation = div.getAnimations()[0];
-
-  var previousFinishedPromise = animation.finished;
-
-  animation.finish();
-  animation.currentTime = ANIM_DURATION / 2;
+  var resolvedFinished = false;
+  animation.finished.then(function() {
+    resolvedFinished = true;
+  });
+  return animation.ready.then(function() {
+    animation.finish();
+    animation.currentTime = ANIM_DURATION / 2;
+  }).then(function() {
+    assert_true(resolvedFinished,
+      'Animation.finished should be resolved even if ' +
+      'the finished state is changed soon');
+  });
 
-  assert_not_equals(animation.finished, previousFinishedPromise,
-                    'New finished promise generated when finished state ' +
-                    'is checked synchronously');
-  t.done();
-}, 'Test new finished promise generated when finished state ' +
-   'is checked synchronously');
+}, 'Test synchronous finished promise resolved even if finished state ' +
+   'is changed soon');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t);
   div.style.animation = ANIM_PROP_VAL;
   var animation = div.getAnimations()[0];
-
   var resolvedFinished = false;
   animation.finished.then(function() {
     resolvedFinished = true;
   });
 
-  animation.ready.then(function() {
+  return animation.ready.then(function() {
+    animation.currentTime = ANIM_DURATION;
     animation.finish();
-    animation.currentTime = ANIM_DURATION / 2;
-  }).then(t.step_func(function() {
+  }).then(function() {
     assert_true(resolvedFinished,
-      'Animation.finished should be resolved even if ' +
-      'the finished state is changed soon');
-    t.done();
+      'Animation.finished should be resolved soon after finish() is ' +
+      'called even if there are other asynchronous promises just before it');
+  });
+}, 'Test synchronous finished promise resolved even if asynchronous ' +
+   'finished promise happens just before synchronous promise');
+
+promise_test(function(t) {
+  var div = addDiv(t);
+  div.style.animation = ANIM_PROP_VAL;
+  var animation = div.getAnimations()[0];
+  animation.finished.then(t.step_func(function() {
+    assert_unreached('Animation.finished should not be resolved');
   }));
 
-}, 'Test synchronous finished promise resolved even if finished state ' +
-   'is changed soon');
+  return animation.ready.then(function() {
+    animation.currentTime = ANIM_DURATION;
+    animation.currentTime = ANIM_DURATION / 2;
+  });
+}, 'Test finished promise is not resolved when the animation ' +
+   'falls out finished state immediately');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t);
   div.style.animation = ANIM_PROP_VAL;
   var animation = div.getAnimations()[0];
 
-  var resolvedFinished = false;
-  animation.finished.then(function() {
-    resolvedFinished = true;
-  });
-
-  animation.ready.then(t.step_func(function() {
-    animation.currentTime = ANIM_DURATION;
-    animation.finish();
-  })).then(t.step_func(function() {
-    assert_true(resolvedFinished,
-      'Animation.finished should be resolved soon after finish() is ' +
-      'called even if there are other asynchronous promises just before it');
-    t.done();
-  }));
-}, 'Test synchronous finished promise resolved even if asynchronous ' +
-   'finished promise happens just before synchronous promise');
-
-async_test(function(t) {
-  var div = addDiv(t);
-  div.style.animation = ANIM_PROP_VAL;
-  var animation = div.getAnimations()[0];
-
-  animation.finished.then(t.step_func(function() {
-    assert_unreached('Animation.finished should not be resolved');
-  }));
-
-  animation.ready.then(function() {
-    animation.currentTime = ANIM_DURATION;
-    animation.currentTime = ANIM_DURATION / 2;
-  }).then(t.step_func(function() {
-    t.done();
-  }));
-}, 'Test finished promise is not resolved when the animation ' +
-   'falls out finished state immediately');
-
-async_test(function(t) {
-  var div = addDiv(t);
-  div.style.animation = ANIM_PROP_VAL;
-  var animation = div.getAnimations()[0];
-
-  animation.ready.then(function() {
+  return animation.ready.then(function() {
     animation.currentTime = ANIM_DURATION;
     animation.finished.then(t.step_func(function() {
       assert_unreached('Animation.finished should not be resolved');
     }));
     animation.currentTime = 0;
-  }).then(t.step_func(function() {
-    t.done();
-  }));
+  });
 
 }, 'Test finished promise is not resolved once the animation ' +
    'falls out finished state even though the current finished ' +
    'promise is generated soon after animation state became finished');
 
 done();
 </script>
 </body>
--- a/dom/animation/test/css-animations/file_animation-id.html
+++ b/dom/animation/test/css-animations/file_animation-id.html
@@ -3,25 +3,22 @@
 <script src="../testcommon.js"></script>
 <style>
 @keyframes abc { }
 </style>
 <body>
 <script>
 'use strict';
 
-
 test(function(t) {
   var div = addDiv(t);
   div.style.animation = 'abc 100s';
   var animation = div.getAnimations()[0];
-
   assert_equals(animation.id, '', 'id for CSS Animation is initially empty');
-
   animation.id = 'anim'
 
   assert_equals(animation.id, 'anim', 'animation.id reflects the value set');
-  }, 'Animation.id for CSS Animations');
+}, 'Animation.id for CSS Animations');
 
 done();
 </script>
 </body>
 </html>
--- a/dom/animation/test/css-animations/file_animation-oncancel.html
+++ b/dom/animation/test/css-animations/file_animation-oncancel.html
@@ -8,17 +8,16 @@
 </style>
 <body>
 <script>
 'use strict';
 
 async_test(function(t) {
   var div = addDiv(t, {'style': 'animation: abc 100s'});
   var animation = div.getAnimations()[0];
-
   var finishedTimelineTime;
   animation.finished.then().catch(function() {
     finishedTimelineTime = animation.timeline.currentTime;
   });
 
   animation.oncancel = t.step_func_done(function(event) {
     assert_equals(event.currentTime, null,
       'event.currentTime should be null');
--- a/dom/animation/test/css-animations/file_animation-onfinish.html
+++ b/dom/animation/test/css-animations/file_animation-onfinish.html
@@ -6,17 +6,17 @@
   to { transform: translate(10px) }
 }
 </style>
 <body>
 <script>
 'use strict';
 
 const ANIM_PROP_VAL = 'abc 100s';
-const ANIM_DURATION = 100000; // ms
+const ANIM_DURATION = 100 * MS_PER_SEC;
 
 async_test(function(t) {
   var div = addDiv(t);
   div.style.animation = ANIM_PROP_VAL;
   var animation = div.getAnimations()[0];
 
   var finishedTimelineTime;
   animation.finished.then(function() {
@@ -73,70 +73,61 @@ async_test(function(t) {
     assert_equals(event.timelineTime, finishedTimelineTime,
       'event.timelineTime should equal to the animation timeline ' +
       'when finished promise is resolved');
   });
 
   animation.finish();
 }, 'onfinish event is fired when animation.finish() is called');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t);
   div.style.animation = ANIM_PROP_VAL;
   var animation = div.getAnimations()[0];
 
   animation.onfinish = t.step_func(function(event) {
     assert_unreached('onfinish event should not be fired');
   });
 
   animation.currentTime = ANIM_DURATION / 2;
   animation.pause();
 
-  animation.ready.then(t.step_func(function() {
+  return animation.ready.then(function() {
     animation.currentTime = ANIM_DURATION;
     return waitForAnimationFrames(2);
-  })).then(t.step_func(function() {
-    t.done();
-  }));
+  });
 }, 'onfinish event is not fired when paused');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t);
   div.style.animation = ANIM_PROP_VAL;
   var animation = div.getAnimations()[0];
-
   animation.onfinish = t.step_func(function(event) {
     assert_unreached('onfinish event should not be fired');
   });
 
-  animation.ready.then(function() {
+  return animation.ready.then(function() {
     animation.playbackRate = 0;
     animation.currentTime = ANIM_DURATION;
     return waitForAnimationFrames(2);
-  }).then(t.step_func(function() {
-    t.done();
-  }));
+  });
 
 }, 'onfinish event is not fired when the playbackRate is zero');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t);
   div.style.animation = ANIM_PROP_VAL;
   var animation = div.getAnimations()[0];
-
   animation.onfinish = t.step_func(function(event) {
     assert_unreached('onfinish event should not be fired');
   });
 
-  animation.ready.then(function() {
+  return animation.ready.then(function() {
     animation.currentTime = ANIM_DURATION;
     animation.currentTime = ANIM_DURATION / 2;
     return waitForAnimationFrames(2);
-  }).then(t.step_func(function() {
-    t.done();
-  }));
-
+  });
 }, 'onfinish event is not fired when the animation falls out ' +
    'finished state immediately');
 
 done();
 </script>
 </body>
--- a/dom/animation/test/css-animations/file_animation-pausing.html
+++ b/dom/animation/test/css-animations/file_animation-pausing.html
@@ -10,147 +10,132 @@
 <body>
 <script>
 'use strict';
 
 function getMarginLeft(cs) {
   return parseFloat(cs.marginLeft);
 }
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t);
   var cs = window.getComputedStyle(div);
   div.style.animation = 'anim 1000s';
-
   var animation = div.getAnimations()[0];
 
   assert_equals(getMarginLeft(cs), 0,
                 'Initial value of margin-left is zero');
   var previousAnimVal = getMarginLeft(cs);
 
-  animation.ready.then(waitForFrame).then(t.step_func(function() {
+  return animation.ready.then(waitForFrame).then(function() {
     assert_true(getMarginLeft(cs) > previousAnimVal,
                 'margin-left is initially increasing');
     animation.pause();
     return animation.ready;
-  })).then(t.step_func(function() {
+  }).then(function() {
     previousAnimVal = getMarginLeft(cs);
     return waitForFrame();
-  })).then(t.step_func(function() {
+  }).then(function() {
     assert_equals(getMarginLeft(cs), previousAnimVal,
                   'margin-left does not increase after calling pause()');
-    t.done();
-  }));
+  });
 }, 'pause() a running animation');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t);
   var cs = window.getComputedStyle(div);
   div.style.animation = 'anim 1000s paused';
-
   var animation = div.getAnimations()[0];
   assert_equals(getMarginLeft(cs), 0,
                 'Initial value of margin-left is zero');
 
   animation.pause();
   div.style.animationPlayState = 'running';
 
-  animation.ready.then(waitForFrame).then(t.step_func(function() {
+  return animation.ready.then(waitForFrame).then(function() {
     assert_equals(cs.animationPlayState, 'running',
                   'animation-play-state is running');
     assert_equals(getMarginLeft(cs), 0,
                   'Paused value of margin-left is zero');
-    t.done();
-  }));
+  });
 }, 'pause() overrides animation-play-state');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t);
   var cs = window.getComputedStyle(div);
   div.style.animation = 'anim 1000s paused';
-
   var animation = div.getAnimations()[0];
-
   assert_equals(getMarginLeft(cs), 0,
                 'Initial value of margin-left is zero');
-
   animation.play();
 
-  animation.ready.then(waitForFrame).then(t.step_func(function() {
+  return animation.ready.then(waitForFrame).then(function() {
     assert_true(getMarginLeft(cs) > 0,
                 'Playing value of margin-left is greater than zero');
-    t.done();
-  }));
+  });
 }, 'play() overrides animation-play-state');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t);
   var cs = window.getComputedStyle(div);
   div.style.animation = 'anim 1000s paused';
-
   var animation = div.getAnimations()[0];
   assert_equals(getMarginLeft(cs), 0,
                 'Initial value of margin-left is zero');
-
   animation.play();
-
   var previousAnimVal;
 
-  animation.ready.then(function() {
+  return animation.ready.then(function() {
     div.style.animationPlayState = 'running';
     cs.animationPlayState; // Trigger style resolution
     return waitForFrame();
-  }).then(t.step_func(function() {
+  }).then(function() {
     assert_equals(cs.animationPlayState, 'running',
                   'animation-play-state is running');
     div.style.animationPlayState = 'paused';
     return animation.ready;
-  })).then(t.step_func(function() {
+  }).then(function() {
     assert_equals(cs.animationPlayState, 'paused',
                   'animation-play-state is paused');
     previousAnimVal = getMarginLeft(cs);
     return waitForFrame();
-  })).then(t.step_func(function() {
+  }).then(function() {
     assert_equals(getMarginLeft(cs), previousAnimVal,
                   'Animated value of margin-left does not change when'
                   + ' paused by style');
-    t.done();
-  }));
+  });
 }, 'play() is overridden by later setting "animation-play-state: paused"');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t);
   var cs = window.getComputedStyle(div);
   div.style.animation = 'anim 1000s';
-
   var 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();
   var previousAnimVal = getMarginLeft(cs);
 
-  animation.ready.then(waitForFrame).then(t.step_func(function() {
+  return animation.ready.then(waitForFrame).then(function() {
     assert_equals(cs.animationPlayState, 'paused',
                   'animation-play-state is paused');
     assert_true(getMarginLeft(cs) > previousAnimVal,
                 'Playing value of margin-left is increasing');
-    t.done();
-  }));
+  });
 }, 'play() flushes pending changes to animation-play-state first');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t);
   var cs = window.getComputedStyle(div);
   div.style.animation = 'anim 1000s paused';
-
   var 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,
   // we'll apply it even if the underlying style also says we're paused.
   //
   // We would like to test that implementations flush styles before running
@@ -159,99 +144,91 @@ async_test(function(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();
   var previousAnimVal = getMarginLeft(cs);
 
-  animation.ready.then(waitForFrame).then(t.step_func(function() {
+  return animation.ready.then(waitForFrame).then(function() {
     assert_equals(cs.animationPlayState, 'running',
                   'animation-play-state is running');
     assert_equals(getMarginLeft(cs), previousAnimVal,
                   'Paused value of margin-left does not change');
-    t.done();
-  }));
+  });
 }, 'pause() applies pending changes to animation-play-state first');
 // (Note that we can't actually test for this; see comment above, in test-body.)
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t, { style: 'animation: anim 1000s' });
   var animation = div.getAnimations()[0];
-
   var readyPromiseRun = false;
 
-  animation.ready.then(t.step_func(function() {
+  return animation.ready.then(function() {
     div.style.animationPlayState = 'paused';
     assert_equals(animation.playState, 'pending', 'Animation is pause pending');
 
     // Set current time
-    animation.currentTime = 5000;
+    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, 5000,
+    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;
-  })).then(t.step_func(function() {
-    t.done();
-  }));
+  });
 }, 'Setting the current time completes a pending pause');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t, { style: 'animation: anim 1000s' });
   var animation = div.getAnimations()[0];
 
   // Go to idle state then pause
   animation.cancel();
   animation.pause();
 
   assert_equals(animation.currentTime, 0, 'currentTime is set to 0');
   assert_equals(animation.startTime, null, 'startTime is not set');
   assert_equals(animation.playState, 'pending', 'initially pause-pending');
 
   // Check it still resolves as expected
-  animation.ready.then(t.step_func(function() {
+  return animation.ready.then(function() {
     assert_equals(animation.playState, 'paused',
                   'resolves to paused state asynchronously');
     assert_equals(animation.currentTime, 0,
                   'keeps the initially set currentTime');
-    t.done();
-  }));
+  });
 }, 'pause() from idle');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t, { style: 'animation: anim 1000s' });
   var animation = div.getAnimations()[0];
-
   animation.cancel();
   animation.playbackRate = -1;
   animation.pause();
 
-  assert_equals(animation.currentTime, 1000 * 1000,
+  assert_equals(animation.currentTime, 1000 * MS_PER_SEC,
                 'currentTime is set to the effect end');
 
-  animation.ready.then(t.step_func(function() {
-    assert_equals(animation.currentTime, 1000 * 1000,
+  return animation.ready.then(function() {
+    assert_equals(animation.currentTime, 1000 * MS_PER_SEC,
                   'keeps the initially set currentTime');
-    t.done();
-  }));
+  });
 }, 'pause() from idle with a negative playbackRate');
 
 test(function(t) {
   var div = addDiv(t, { style: 'animation: anim 1000s infinite' });
   var animation = div.getAnimations()[0];
-
   animation.cancel();
   animation.playbackRate = -1;
 
   assert_throws('InvalidStateError',
                 function () { animation.pause(); },
                 'Expect InvalidStateError exception on calling pause() ' +
                 'from idle with a negative playbackRate and ' +
                 'infinite-duration animation');
@@ -260,16 +237,16 @@ test(function(t) {
 promise_test(function(t) {
   var div = addDiv(t, { style: 'animation: anim 1000s' });
   return div.getAnimations()[0].ready
     .then(function(animation) {
       animation.finish();
       animation.pause();
       return animation.ready;
     }).then(function(animation) {
-      assert_equals(animation.currentTime, 1000 * 1000,
+      assert_equals(animation.currentTime, 1000 * MS_PER_SEC,
                     'currentTime after pausing finished animation');
     });
 }, 'pause() on a finished animation');
 
 done();
 </script>
 </body>
--- a/dom/animation/test/css-animations/file_animation-ready.html
+++ b/dom/animation/test/css-animations/file_animation-ready.html
@@ -5,247 +5,236 @@
 @keyframes abc {
   to { transform: translate(10px) }
 }
 </style>
 <body>
 <script>
 'use strict';
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t);
   div.style.animation = 'abc 100s';
   var animation = div.getAnimations()[0];
-
   var originalReadyPromise = animation.ready;
   var pauseReadyPromise;
 
-  animation.ready.then(t.step_func(function() {
+  return animation.ready.then(function() {
     assert_equals(animation.ready, originalReadyPromise,
                   'Ready promise is the same object when playing completes');
     animation.pause();
     assert_not_equals(animation.ready, originalReadyPromise,
                       'A new ready promise is created when pausing');
     pauseReadyPromise = animation.ready;
     // Wait for the promise to fulfill since if we abort the pause the ready
     // promise object is reused.
     return animation.ready;
-  })).then(t.step_func(function() {
+  }).then(function() {
     animation.play();
     assert_not_equals(animation.ready, pauseReadyPromise,
                       'A new ready promise is created when playing');
-    t.done();
-  }));
+  });
 }, 'A new ready promise is created when play()/pause() is called');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t);
   div.style.animation = 'abc 100s paused';
   var animation = div.getAnimations()[0];
+  var originalReadyPromise = animation.ready;
 
-  var originalReadyPromise = animation.ready;
-  animation.ready.then(t.step_func(function() {
+  return animation.ready.then(function() {
     div.style.animationPlayState = 'running';
     assert_not_equals(animation.ready, originalReadyPromise,
                       'After updating animation-play-state a new ready promise'
                       + ' object is created');
-    t.done();
-  }));
+  });
 }, 'A new ready promise is created when setting animation-play-state: running');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t);
   div.style.animation = 'abc 100s';
   var animation = div.getAnimations()[0];
 
-  animation.ready.then(t.step_func(function() {
+  return animation.ready.then(function() {
     var promiseBeforeCallingPlay = animation.ready;
     animation.play();
     assert_equals(animation.ready, promiseBeforeCallingPlay,
                   'Ready promise has same object identity after redundant call'
                   + ' to play()');
-    t.done();
-  }));
+  });
 }, 'Redundant calls to play() do not generate new ready promise objects');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t);
   div.style.animation = 'abc 100s';
   var animation = div.getAnimations()[0];
 
-  animation.ready.then(t.step_func(function(resolvedAnimation) {
+  return animation.ready.then(function(resolvedAnimation) {
     assert_equals(resolvedAnimation, animation,
                   'Object identity of Animation passed to Promise callback'
                   + ' matches the Animation object owning the Promise');
-    t.done();
-  }));
+  });
 }, 'The ready promise is fulfilled with its Animation');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t);
 
   // Set up pending animation
   div.style.animation = 'abc 100s';
   var animation = div.getAnimations()[0];
   assert_equals(animation.playState, 'pending',
                'Animation is initially pending');
 
   // Set up listeners on ready promise
-  animation.ready.then(t.step_func(function() {
+  var retPromise = animation.ready.then(function() {
     assert_unreached('ready promise is fulfilled');
-  })).catch(t.step_func(function(err) {
+  }).catch(function(err) {
     assert_equals(err.name, 'AbortError',
                   'ready promise is rejected with AbortError');
-  })).then(t.step_func(function() {
-    t.done();
-  }));
+  });
 
   // Now cancel the animation and flush styles
   div.style.animation = '';
   window.getComputedStyle(div).animation;
 
+  return retPromise;
 }, 'ready promise is rejected when an animation is cancelled by resetting'
    + ' the animation property');
 
-async_test(function(t) {
+promise_test(function(t) {
   var 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';
   var animation = div.getAnimations()[0];
   assert_equals(animation.playState, 'pending',
                 'Animation is initially pending');
 
   // Set up listeners on ready promise
-  animation.ready.then(t.step_func(function() {
+  var retPromise = animation.ready.then(function() {
     assert_unreached('ready promise was fulfilled');
-  })).catch(t.step_func(function(err) {
+  }).catch(function(err) {
     assert_equals(err.name, 'AbortError',
                   'ready promise is rejected with AbortError');
-  })).then(t.step_func(function() {
-    t.done();
-  }));
+  });
 
   // Now update the animation and flush styles
   div.style.animation = 'def 100s';
   window.getComputedStyle(div).animation;
 
+  return retPromise;
 }, 'ready promise is rejected when an animation is cancelled by updating'
    + ' the animation property');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t);
   div.style.animation = 'abc 100s';
   var animation = div.getAnimations()[0];
 
-  animation.ready.then(t.step_func(function() {
+  var retPromise = animation.ready.then(function() {
     assert_unreached('ready promise was fulfilled');
-  })).catch(t.step_func(function(err) {
+  }).catch(function(err) {
     assert_equals(err.name, 'AbortError',
                   'ready promise is rejected with AbortError');
-  })).then(t.step_func(function() {
-    t.done();
-  }));
+  });
 
   animation.cancel();
+
+  return retPromise;
 }, 'ready promise is rejected when a play-pending animation is cancelled by'
    + ' calling cancel()');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t);
   div.style.animation = 'abc 100s';
   var animation = div.getAnimations()[0];
 
-  animation.ready.then(t.step_func(function() {
+  return animation.ready.then(function() {
     animation.pause();
 
     // Set up listeners on pause-pending ready promise
-    animation.ready.then(t.step_func(function() {
+    var retPromise = animation.ready.then(function() {
       assert_unreached('ready promise was fulfilled');
-    })).catch(t.step_func(function(err) {
+    }).catch(function(err) {
       assert_equals(err.name, 'AbortError',
                     'ready promise is rejected with AbortError');
-    })).then(t.step_func(function() {
-      t.done();
-    }));
+    });
 
     animation.cancel();
-  }));
+
+    return retPromise;
+  });
 }, 'ready promise is rejected when a pause-pending animation is cancelled by'
    + ' calling cancel()');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t, { style: 'animation: abc 100s' });
   var animation = div.getAnimations()[0];
+  var originalReadyPromise = animation.ready;
 
-  var originalReadyPromise = animation.ready;
-  animation.ready.then(t.step_func(function() {
+  return animation.ready.then(function() {
     div.style.animationPlayState = 'paused';
     assert_not_equals(animation.ready, originalReadyPromise,
                       'A new Promise object is generated when setting'
                       + ' animation-play-state: paused');
-    t.done();
-  }));
+  });
 }, 'A new ready promise is created when setting animation-play-state: paused');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t, { style: 'animation: abc 100s' });
   var animation = div.getAnimations()[0];
 
-  animation.ready.then(t.step_func(function() {
+  return animation.ready.then(function() {
     div.style.animationPlayState = 'paused';
     var firstReadyPromise = animation.ready;
     animation.pause();
     assert_equals(animation.ready, firstReadyPromise,
                   'Ready promise objects are identical after redundant pause');
-    t.done();
-  }));
+  });
 }, 'Pausing twice re-uses the same Promise');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t, { style: 'animation: abc 100s' });
   var animation = div.getAnimations()[0];
 
-  animation.ready.then(t.step_func(function() {
+  return animation.ready.then(function() {
     div.style.animationPlayState = 'paused';
 
     // Flush style and verify we're pending at the same time
     assert_equals(animation.playState, 'pending', 'Animation is pending');
     var pauseReadyPromise = animation.ready;
 
     // Now play again immediately
     div.style.animationPlayState = 'running';
     assert_equals(animation.playState, '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(t.step_func(function() {
+  }).then(function() {
     assert_equals(animation.playState, 'running',
                   'Animation is running after aborting a pause');
-    t.done();
-  }));
+  });
 }, 'If a pause operation is interrupted, the ready promise is reused');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t, { style: 'animation: abc 100s' });
   var animation = div.getAnimations()[0];
 
-  animation.ready.then(t.step_func(function() {
+  return animation.ready.then(function() {
     div.style.animationPlayState = 'paused';
     return animation.ready;
-  })).then(t.step_func(function(resolvedAnimation) {
+  }).then(function(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');
-    t.done();
-  }));
+  });
 }, 'When a pause is complete the Promise callback gets the correct animation');
 
 done();
 </script>
 </body>
--- a/dom/animation/test/css-animations/file_animation-reverse.html
+++ b/dom/animation/test/css-animations/file_animation-reverse.html
@@ -5,169 +5,154 @@
 @keyframes anim {
   to { transform: translate(100px) }
 }
 </style>
 <body>
 <script>
 'use strict';
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t, { style: 'animation: anim 100s infinite' });
   var animation = div.getAnimations()[0];
 
   // Wait a frame because if currentTime is still 0 when we call
   // reverse(), it will throw (per spec).
-  animation.ready.then(waitForFrame).then(t.step_func_done(function() {
+  return animation.ready.then(waitForFrame).then(function() {
     assert_greater_than(animation.currentTime, 0,
       'currentTime expected to be greater than 0, one frame after starting');
     var previousPlaybackRate = animation.playbackRate;
     animation.reverse();
     assert_equals(animation.playbackRate, -previousPlaybackRate,
       'playbackRate should be invetrted');
-  }));
+  });
 }, 'reverse() inverts playbackRate');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t, { style: 'animation: anim 100s infinite' });
   var animation = div.getAnimations()[0];
+  animation.currentTime = 50 * MS_PER_SEC;
+  animation.pause();
 
-  animation.currentTime = 50000;
-  animation.pause();
-  animation.ready.then(t.step_func(function() {
+  return animation.ready.then(function() {
     animation.reverse();
     return animation.ready;
-  })).then(t.step_func_done(function() {
+  }).then(function() {
     assert_equals(animation.playState, 'running',
       'Animation.playState should be "running" after reverse()');
-  }));
+  });
 }, 'reverse() starts to play when pausing animation');
 
-async_test(function(t) {
+test(function(t) {
   var div = addDiv(t, { style: 'animation: anim 100s' });
   var animation = div.getAnimations()[0];
   div.style.animation = "";
   flushComputedStyle(div);
 
   assert_equals(animation.currentTime, null);
   animation.reverse();
 
-  assert_equals(animation.currentTime, 100000,
+  assert_equals(animation.currentTime, 100 * MS_PER_SEC,
     'animation.currentTime should be its effect end');
-  t.done();
 }, 'reverse() from idle state starts playing the animation');
 
-async_test(function(t) {
+test(function(t) {
   var div = addDiv(t, { style: 'animation: anim 100s' });
   var animation = div.getAnimations()[0];
-
-  animation.currentTime = 50000;
+  animation.currentTime = 50 * MS_PER_SEC;
   animation.reverse();
 
-  assert_equals(animation.currentTime, 50000,
+  assert_equals(animation.currentTime, 50 * MS_PER_SEC,
     'reverse() should not change the currentTime ' +
     'if the currentTime is in the middle of animation duration');
-  t.done();
 }, 'reverse() maintains the same currentTime');
 
-async_test(function(t) {
+test(function(t) {
+  var div = addDiv(t, { style: 'animation: anim 100s' });
+  var animation = div.getAnimations()[0];
+  animation.currentTime = 200 * MS_PER_SEC;
+  animation.reverse();
+
+  assert_equals(animation.currentTime, 100 * MS_PER_SEC,
+    'reverse() should start playing from the animation effect end ' +
+    'if the playbackRate > 0 and the currentTime > effect end');
+}, 'reverse() when playbackRate > 0 and currentTime > effect end');
+
+test(function(t) {
   var div = addDiv(t, { style: 'animation: anim 100s' });
   var animation = div.getAnimations()[0];
 
-  animation.currentTime = 200000;
+  animation.currentTime = -200 * MS_PER_SEC;
   animation.reverse();
 
-  assert_equals(animation.currentTime, 100000,
+  assert_equals(animation.currentTime, 100 * MS_PER_SEC,
     'reverse() should start playing from the animation effect end ' +
-    'if the playbackRate > 0 and the currentTime > effect end');
-  t.done();
-}, 'reverse() when playbackRate > 0 and currentTime > effect end');
+    'if the playbackRate > 0 and the currentTime < 0');
+}, 'reverse() when playbackRate > 0 and currentTime < 0');
 
-async_test(function(t) {
+test(function(t) {
   var div = addDiv(t, { style: 'animation: anim 100s' });
   var animation = div.getAnimations()[0];
-
-  animation.currentTime = -200000;
-  animation.reverse();
-
-  assert_equals(animation.currentTime, 100000,
-    'reverse() should start playing from the animation effect end ' +
-    'if the playbackRate > 0 and the currentTime < 0');
-  t.done();
-}, 'reverse() when playbackRate > 0 and currentTime < 0');
-
-async_test(function(t) {
-  var div = addDiv(t, { style: 'animation: anim 100s' });
-  var animation = div.getAnimations()[0];
-
   animation.playbackRate = -1;
-  animation.currentTime = -200000;
+  animation.currentTime = -200 * MS_PER_SEC;
   animation.reverse();
 
   assert_equals(animation.currentTime, 0,
     'reverse() should start playing from the start of animation time ' +
     'if the playbackRate < 0 and the currentTime < 0');
-  t.done();
 }, 'reverse() when playbackRate < 0 and currentTime < 0');
 
-async_test(function(t) {
+test(function(t) {
   var div = addDiv(t, { style: 'animation: anim 100s' });
   var animation = div.getAnimations()[0];
-
   animation.playbackRate = -1;
-  animation.currentTime = 200000;
+  animation.currentTime = 200 * MS_PER_SEC;
   animation.reverse();
 
   assert_equals(animation.currentTime, 0,
     'reverse() should start playing from the start of animation time ' +
     'if the playbackRate < 0 and the currentTime > effect end');
-  t.done();
 }, 'reverse() when playbackRate < 0 and currentTime > effect end');
 
-async_test(function(t) {
+test(function(t) {
   var div = addDiv(t, { style: 'animation: anim 100s infinite' });
   var animation = div.getAnimations()[0];
-
-  animation.currentTime = -200000;
+  animation.currentTime = -200 * MS_PER_SEC;
 
   assert_throws('InvalidStateError',
     function () { animation.reverse(); },
     'reverse() should throw InvalidStateError ' +
     'if the playbackRate > 0 and the currentTime < 0 ' +
     'and the target effect is positive infinity');
-  t.done();
 }, 'reverse() when playbackRate > 0 and currentTime < 0 ' +
    'and the target effect is positive infinity');
 
-async_test(function(t) {
+test(function(t) {
   var div = addDiv(t, { style: 'animation: anim 100s infinite' });
   var animation = div.getAnimations()[0];
-
   animation.playbackRate = -1;
-  animation.currentTime = -200000;
+  animation.currentTime = -200 * MS_PER_SEC;
   animation.reverse();
 
   assert_equals(animation.currentTime, 0,
     'reverse() should start playing from the start of animation time ' +
     'if the playbackRate < 0 and the currentTime < 0 ' +
     'and the target effect is positive infinity');
-  t.done();
 }, 'reverse() when playbackRate < 0 and currentTime < 0 ' +
    'and the target effect is positive infinity');
 
-async_test(function(t) {
+test(function(t) {
   var div = addDiv(t, { style: 'animation: anim 100s' });
   var animation = div.getAnimations()[0];
-
   animation.playbackRate = 0;
-  animation.currentTime = 50000;
+  animation.currentTime = 50 * MS_PER_SEC;
   animation.reverse();
 
   assert_equals(animation.playbackRate, 0,
     'reverse() should preserve playbackRate if the playbackRate == 0');
-  assert_equals(animation.currentTime, 50000,
+  assert_equals(animation.currentTime, 50 * MS_PER_SEC,
     'reverse() should not affect the currentTime if the playbackRate == 0');
   t.done();
 }, 'reverse() when playbackRate == 0');
 
 done();
 </script>
 </body>
--- a/dom/animation/test/css-animations/file_animation-starttime.html
+++ b/dom/animation/test/css-animations/file_animation-starttime.html
@@ -34,18 +34,18 @@
 // TODO: Once the computedTiming property is implemented, add checks to the
 // checker helpers to ensure that computedTiming's properties are updated as
 // expected.
 // See https://bugzilla.mozilla.org/show_bug.cgi?id=1108055
 
 
 const CSS_ANIM_EVENTS =
   ['animationstart', 'animationiteration', 'animationend'];
-const ANIM_DELAY_MS = 1000000; // 1000s
-const ANIM_DUR_MS = 1000000; // 1000s
+const ANIM_DELAY_MS = 1000 * MS_PER_SEC; // 1000s
+const ANIM_DUR_MS = 1000 * MS_PER_SEC; // 1000s
 const ANIM_PROPERTY_VAL = 'anim ' + ANIM_DUR_MS + 'ms ' + ANIM_DELAY_MS + 'ms';
 
 /**
  * These helpers get the value that the startTime needs to be set to, to put an
  * animation that uses the above ANIM_DELAY_MS and ANIM_DUR_MS values into the
  * middle of various phases or points through the active duration.
  */
 function startTimeForBeforePhase(timeline) {
@@ -172,172 +172,161 @@ test(function(t)
 
 test(function(t)
 {
   var div = addDiv(t, { 'style': 'animation: anim 100s paused' });
   var animation = div.getAnimations()[0];
   assert_equals(animation.startTime, null, 'startTime is unresolved');
 }, 'startTime of a newly created (pause-pending) animation is unresolved');
 
-async_test(function(t)
+promise_test(function(t)
 {
   var div = addDiv(t, { 'style': 'animation: anim 100s' });
   var animation = div.getAnimations()[0];
-  animation.ready.then(t.step_func(function() {
+  return animation.ready.then(function() {
     assert_true(animation.startTime > 0,
                 'startTime is resolved when running');
-    t.done();
-  }));
+  });
 }, 'startTime is resolved when running');
 
-async_test(function(t)
+promise_test(function(t)
 {
   var div = addDiv(t, { 'style': 'animation: anim 100s paused' });
   var animation = div.getAnimations()[0];
-  animation.ready.then(t.step_func(function() {
+  return animation.ready.then(function() {
     assert_equals(animation.startTime, null,
                   'startTime is unresolved when paused');
-    t.done();
-  }));
+  });
 }, 'startTime is unresolved when paused');
 
-async_test(function(t)
+promise_test(function(t)
 {
   var div = addDiv(t, { 'style': 'animation: anim 100s' });
   var animation = div.getAnimations()[0];
-  animation.ready.then(t.step_func(function() {
+  return animation.ready.then(function() {
     div.style.animationPlayState = 'paused';
     getComputedStyle(div).animationPlayState;
     assert_not_equals(animation.startTime, null,
                       'startTime is resolved when pause-pending');
 
     div.style.animationPlayState = 'running';
     getComputedStyle(div).animationPlayState;
     assert_not_equals(animation.startTime, null,
                       'startTime is preserved when a pause is aborted');
-    t.done();
-  }));
+  });
 }, 'startTime while pause-pending and play-pending');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t, { 'style': 'animation: anim 100s' });
   var animation = div.getAnimations()[0];
   // Seek to end to put us in the finished state
-  animation.currentTime = 100 * 1000;
-  animation.ready.then(t.step_func(function() {
+  animation.currentTime = 100 * MS_PER_SEC;
+  return animation.ready.then(function() {
     // Call play() which puts us back in the running state
     animation.play();
     assert_equals(animation.startTime, null, 'startTime is unresolved');
-    t.done();
-  }));
+  });
 }, 'startTime while play-pending from finished state');
 
 test(function(t) {
   var div = addDiv(t, { 'style': 'animation: anim 100s' });
   var 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()');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t, { style: 'animation: anim 1000s' });
   var animation = div.getAnimations()[0];
 
   assert_equals(animation.startTime, null, 'The initial startTime is null');
   var initialTimelineTime = document.timeline.currentTime;
 
-  animation.ready.then(t.step_func(function() {
+  return animation.ready.then(function() {
     assert_true(animation.startTime > initialTimelineTime,
                 'After the animation has started, startTime is greater than ' +
                 'the time when it was started');
     var 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;
 
     assert_equals(animation.startTime, startTimeBeforePausing,
                   'The startTime does not change when pausing-pending');
     return animation.ready;
-  })).then(t.step_func(function() {
+  }).then(function() {
     assert_equals(animation.startTime, null,
                   'After actually pausing, the startTime of an animation ' +
                   'is null');
-    t.done();
-  }));
+  });
 }, 'Pausing should make the startTime become null');
 
 test(function(t)
 {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.animation = ANIM_PROPERTY_VAL;
 
   var animation = div.getAnimations()[0];
   var currentTime = animation.timeline.currentTime;
   animation.startTime = currentTime;
   assert_approx_equals(animation.startTime, currentTime, 0.0001, // rounding error
     'Check setting of startTime actually works');
 }, 'Sanity test to check round-tripping assigning to a new animation\'s ' +
    'startTime');
 
-
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t, {'class': 'animated-div'});
   var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
 
   div.style.animation = ANIM_PROPERTY_VAL;
 
   var animation = div.getAnimations()[0];
 
-  animation.ready.then(t.step_func(function() {
+  return animation.ready.then(function() {
     checkStateOnReadyPromiseResolved(animation);
 
     animation.startTime = startTimeForStartOfActiveInterval(animation.timeline);
     return eventWatcher.wait_for('animationstart');
-  })).then(t.step_func(function() {
+  }).then(function() {
     checkStateAtActiveIntervalStartTime(animation);
 
     animation.startTime =
       startTimeForFiftyPercentThroughActiveInterval(animation.timeline);
     checkStateAtFiftyPctOfActiveInterval(animation);
 
     animation.startTime = startTimeForEndOfActiveInterval(animation.timeline);
     return eventWatcher.wait_for('animationend');
-  })).then(t.step_func(function() {
+  }).then(function() {
     checkStateAtActiveIntervalEndTime(animation);
-  })).catch(t.step_func(function(reason) {
-    assert_unreached(reason);
-  })).then(function() {
-    t.done();
   });
 }, 'Skipping forward through animation');
 
-
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t, {'class': 'animated-div'});
   var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
 
   div.style.animation = ANIM_PROPERTY_VAL;
 
   var animation = div.getAnimations()[0];
 
   animation.startTime = startTimeForEndOfActiveInterval(animation.timeline);
 
   var previousTimelineTime = animation.timeline.currentTime;
 
   // Skipping over the active interval will dispatch an 'animationstart' then
   // an 'animationend' event. We need to wait for these events before we start
   // testing going backwards since EventWatcher will fail the test if it gets
   // an event that we haven't told it about.
-  eventWatcher.wait_for(['animationstart',
-                         'animationend']).then(t.step_func(function() {
+  return eventWatcher.wait_for(['animationstart',
+                                'animationend']).then(function() {
     assert_true(document.timeline.currentTime - previousTimelineTime <
                   ANIM_DUR_MS,
                 'Sanity check that seeking worked rather than the events ' +
                 'firing after normal playback through the very long ' +
                 'animation duration');
 
     // Now we can start the tests for skipping backwards, but first we check
     // that after the events we're still in the same end time state:
@@ -352,210 +341,190 @@ async_test(function(t) {
     //
     // Calling checkStateAtFiftyPctOfActiveInterval will check computed style,
     // causing computed style to be updated and the 'animationstart' event to
     // be dispatched synchronously. We need to call wait_for first
     // otherwise eventWatcher will assert that the event was unexpected.
     var promise = eventWatcher.wait_for('animationstart');
     checkStateAtFiftyPctOfActiveInterval(animation);
     return promise;
-  })).then(t.step_func(function() {
+  }).then(function() {
     animation.startTime = startTimeForStartOfActiveInterval(animation.timeline);
     checkStateAtActiveIntervalStartTime(animation);
 
     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(t.step_func(function() {
+  }).then(function() {
     checkStateOnReadyPromiseResolved(animation);
-  })).catch(t.step_func(function(reason) {
-    assert_unreached(reason);
-  })).then(function() {
-    t.done();
-  });
+  })
 
   // This must come after we've set up the Promise chain, since requesting
   // computed style will force events to be dispatched.
-  // XXX For some reason this fails occasionally (either the animation.playState
-  // check or the marginLeft check).
-  //checkStateAtActiveIntervalEndTime(animation);
+  checkStateAtActiveIntervalEndTime(animation);
 }, '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.
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t, {'class': 'animated-div'});
   var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
   div.style.animation = ANIM_PROPERTY_VAL;
   var animation = div.getAnimations()[0];
 
   animation.startTime = startTimeForActivePhase(animation.timeline);
   animation.startTime = startTimeForBeforePhase(animation.timeline);
 
-  waitForAnimationFrames(2).then(function() {
-    t.done();
-  });
+  return waitForAnimationFrames(2);
 }, 'Redundant change, before -> active, then back');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t, {'class': 'animated-div'});
   var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
   div.style.animation = ANIM_PROPERTY_VAL;
   var animation = div.getAnimations()[0];
 
   animation.startTime = startTimeForAfterPhase(animation.timeline);
   animation.startTime = startTimeForBeforePhase(animation.timeline);
 
-  waitForAnimationFrames(2).then(function() {
-    t.done();
-  });
+  return waitForAnimationFrames(2);
 }, 'Redundant change, before -> after, then back');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t, {'class': 'animated-div'});
   var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
   div.style.animation = ANIM_PROPERTY_VAL;
   var animation = div.getAnimations()[0];
 
-  eventWatcher.wait_for('animationstart').then(function() {
+  var retPromise =  eventWatcher.wait_for('animationstart').then(function() {
     animation.startTime = startTimeForBeforePhase(animation.timeline);
     animation.startTime = startTimeForActivePhase(animation.timeline);
 
-    waitForAnimationFrames(2).then(function() {
-      t.done();
-    });
+    return waitForAnimationFrames(2);
   });
   // get us into the initial state:
   animation.startTime = startTimeForActivePhase(animation.timeline);
+
+  return retPromise;
 }, 'Redundant change, active -> before, then back');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t, {'class': 'animated-div'});
   var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
   div.style.animation = ANIM_PROPERTY_VAL;
   var animation = div.getAnimations()[0];
 
-  eventWatcher.wait_for('animationstart').then(function() {
+  var retPromise = eventWatcher.wait_for('animationstart').then(function() {
     animation.startTime = startTimeForAfterPhase(animation.timeline);
     animation.startTime = startTimeForActivePhase(animation.timeline);
 
-    waitForAnimationFrames(2).then(function() {
-      t.done();
-    });
+    return waitForAnimationFrames(2);
   });
   // get us into the initial state:
   animation.startTime = startTimeForActivePhase(animation.timeline);
+
+  return retPromise;
 }, 'Redundant change, active -> after, then back');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t, {'class': 'animated-div'});
   var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
   div.style.animation = ANIM_PROPERTY_VAL;
   var animation = div.getAnimations()[0];
 
-  eventWatcher.wait_for(['animationstart',
-                         'animationend']).then(function() {
+  var retPromise = eventWatcher.wait_for(['animationstart',
+                                          'animationend']).then(function() {
     animation.startTime = startTimeForBeforePhase(animation.timeline);
     animation.startTime = startTimeForAfterPhase(animation.timeline);
 
-    waitForAnimationFrames(2).then(function() {
-      t.done();
-    });
+    return waitForAnimationFrames(2);
   });
   // get us into the initial state:
   animation.startTime = startTimeForAfterPhase(animation.timeline);
+
+  return retPromise;
 }, 'Redundant change, after -> before, then back');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t, {'class': 'animated-div'});
   var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
   div.style.animation = ANIM_PROPERTY_VAL;
   var animation = div.getAnimations()[0];
 
-  eventWatcher.wait_for(['animationstart',
-                         'animationend']).then(function() {
+  var retPromise = eventWatcher.wait_for(['animationstart',
+                                          'animationend']).then(function() {
     animation.startTime = startTimeForActivePhase(animation.timeline);
     animation.startTime = startTimeForAfterPhase(animation.timeline);
 
-    waitForAnimationFrames(2).then(function() {
-      t.done();
-    });
+    return waitForAnimationFrames(2);
   });
   // get us into the initial state:
   animation.startTime = startTimeForAfterPhase(animation.timeline);
+
+  return retPromise;
 }, 'Redundant change, after -> active, then back');
 
-
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.animation = ANIM_PROPERTY_VAL;
 
   var animation = div.getAnimations()[0];
 
   var storedCurrentTime;
 
-  animation.ready.then(t.step_func(function() {
+  return animation.ready.then(function() {
     storedCurrentTime = animation.currentTime;
     animation.startTime = null;
     return animation.ready;
-  })).catch(t.step_func(function(reason) {
-    assert_unreached(reason);
-  })).then(t.step_func(function() {
+  }).then(function() {
     assert_equals(animation.currentTime, storedCurrentTime,
       'Test that hold time is correct');
-    t.done();
-  }));
+  });
 }, 'Setting startTime to null');
 
-
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.animation = 'anim 100s';
 
   var animation = div.getAnimations()[0];
 
-  animation.ready.then(t.step_func(function() {
+  return animation.ready.then(function() {
     var savedStartTime = animation.startTime;
 
     assert_not_equals(animation.startTime, null,
       'Animation.startTime not null on ready Promise resolve');
 
     animation.pause();
     return animation.ready;
-  })).then(t.step_func(function() {
+  }).then(function() {
     assert_equals(animation.startTime, null,
       'Animation.startTime is null after paused');
     assert_equals(animation.playState, 'paused',
       'Animation.playState is "paused" after pause() call');
-  })).catch(t.step_func(function(reason) {
-    assert_unreached(reason);
-  })).then(function() {
-    t.done();
   });
 }, 'Animation.startTime after pausing');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.animation = 'anim 100s';
 
   var animation = div.getAnimations()[0];
-  animation.ready.then(t.step_func(function() {
+  return animation.ready.then(function() {
     animation.cancel();
     assert_equals(animation.startTime, null,
                   'The startTime of a cancelled animation should be null');
-    t.done();
-  }));
+  });
 }, 'Animation.startTime after cancelling');
 
 done();
     </script>
   </body>
 </html>
--- a/dom/animation/test/css-animations/file_animations-dynamic-changes.html
+++ b/dom/animation/test/css-animations/file_animations-dynamic-changes.html
@@ -6,48 +6,46 @@
   to { left: 100px }
 }
 @keyframes anim2 { }
 </style>
 <body>
 <script>
 'use strict';
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t);
   div.style.animation = 'anim1 100s';
-
   var originalAnimation = div.getAnimations()[0];
   var originalStartTime;
   var originalCurrentTime;
 
   // Wait a moment so we can confirm the startTime doesn't change (and doesn't
   // simply reflect the current time).
-  originalAnimation.ready.then(function() {
+  return originalAnimation.ready.then(function() {
     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).
     return waitForFrame();
-  }).then(t.step_func(function() {
+  }).then(function() {
     div.style.animationDuration = '200s';
     var 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');
-    t.done();
-  }));
+  });
 }, 'Animations preserve their startTime when changed');
 
 test(function(t) {
   var div = addDiv(t);
   div.style.animation = 'anim1 100s, anim1 100s';
 
   // Store original state
   var animations = div.getAnimations();
@@ -58,102 +56,99 @@ test(function(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');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t);
   div.style.animation = 'anim1 200s, anim1 100s';
 
   // Store original state
   var animations = div.getAnimations();
   var animation1 = animations[0];
   var 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).
-  waitForAllAnimations(animations).then(waitForFrame).then(t.step_func(function() {
+  return waitForAllAnimations(animations).then(waitForFrame).then(function() {
     // 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(t.step_func(function() {
+  }).then(function() {
     assert_true(animations[0].startTime > animations[1].startTime,
                 'New Animation has later start time');
-    t.done();
-  }));
+  });
 }, 'Only the startTimes of existing animations are preserved');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t);
   div.style.animation = 'anim1 100s, anim1 100s';
   var secondAnimation = div.getAnimations()[1];
 
   // Wait before continuing so we can compare start times
-  secondAnimation.ready.then(waitForFrame).then(t.step_func(function() {
+  return secondAnimation.ready.then(waitForFrame).then(function() {
     // Trim list of animations
     div.style.animationName = 'anim1';
     var 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_true(animations[0].startTime < animations[0].timeline.currentTime,
                 'Remaining Animation preserves startTime');
-    t.done();
-  }));
+  });
 }, 'Animations are removed from the start of the list while preserving'
    + ' the state of existing Animations');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t);
   div.style.animation = 'anim1 100s';
   var firstAddedAnimation = div.getAnimations()[0],
       secondAddedAnimation,
       animations;
 
   // Wait and add second Animation
-  firstAddedAnimation.ready.then(waitForFrame).then(t.step_func(function() {
+  return firstAddedAnimation.ready.then(waitForFrame).then(function() {
     div.style.animation = 'anim1 100s, anim1 100s';
     secondAddedAnimation = div.getAnimations()[0];
 
     // Wait again and add another Animation
     return secondAddedAnimation.ready.then(waitForFrame);
-  })).then(t.step_func(function() {
+  }).then(function() {
     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(t.step_func(function() {
+  }).then(function() {
     assert_true(animations[1].startTime > animations[0].startTime,
                 'Interleaved animation starts later than existing animations');
     assert_true(animations[0].startTime > animations[2].startTime,
                 'Original animations retain their start time');
-    t.done();
-  }));
+  });
 }, 'Animation state is preserved when interleaving animations in list');
 
 done();
 </script>
 </body>
--- a/dom/animation/test/css-animations/file_effect-target.html
+++ b/dom/animation/test/css-animations/file_effect-target.html
@@ -27,17 +27,17 @@ test(function(t) {
 }, 'effect.target should return the same CSSPseudoElement object each time');
 
 test(function(t) {
   addStyle(t, { '.after::after': 'animation: anim 10s;' });
   var div = addDiv(t, { class: 'after' });
   var pseudoTarget = document.getAnimations()[0].effect.target;
   var effect = new KeyframeEffectReadOnly(pseudoTarget,
                                           { background: ["blue", "red"] },
-                                          3000);
+                                          3 * MS_PER_SEC);
   var newAnim = new Animation(effect, document.timeline);
   newAnim.play();
   var anims = document.getAnimations();
   assert_equals(anims.length, 2,
                 'Got animations running on ::after pseudo element');
   assert_not_equals(anims[0], newAnim,
                     'The scriped-generated animation appears last');
   assert_equals(newAnim.effect.target, pseudoTarget,
--- a/dom/animation/test/css-animations/file_element-get-animations.html
+++ b/dom/animation/test/css-animations/file_element-get-animations.html
@@ -19,52 +19,51 @@
 
 test(function(t) {
   var 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');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t);
 
   // FIXME: This test does too many things. It should be split up.
 
   // Add an animation
   div.style.animation = 'anim1 100s';
   var animations = div.getAnimations();
   assert_equals(animations.length, 1,
     'getAnimations returns an Animation running CSS Animations');
-  animations[0].ready.then(t.step_func(function() {
+  return animations[0].ready.then(function() {
     var 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.
     return waitForFrame();
-  })).then(t.step_func(function() {
+  }).then(function() {
     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(t.step_func(function() {
+  }).then(function() {
     assert_true(animations[0].startTime < animations[1].startTime,
       'Additional Animations for CSS animations start after the original'
       + ' animation and appear later in the list');
-    t.done();
-  }));
+  });
 }, 'getAnimations for CSS Animations');
 
 test(function(t) {
   var 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');
 
@@ -73,40 +72,39 @@ test(function(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');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t);
 
   // Add an animation
   div.style.backgroundColor = 'red';
   div.style.animation = 'anim1 100s';
   window.getComputedStyle(div).backgroundColor;
 
   // Wait until a frame after the animation starts, then add a transition
   var animations = div.getAnimations();
-  animations[0].ready.then(waitForFrame).then(t.step_func(function() {
+  return animations[0].ready.then(waitForFrame).then(function() {
     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');
-    t.done();
-  }));
+  });
 }, 'getAnimations for both CSS Animations and CSS Transitions at once');
 
 async_test(function(t) {
   var div = addDiv(t);
 
   // Set up event listener
   div.addEventListener('animationend', t.step_func(function() {
     assert_equals(div.getAnimations().length, 0,
@@ -161,38 +159,37 @@ test(function(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');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t);
   div.style.animation = 'anim1 100s, notyet 100s';
   var animations = div.getAnimations();
   assert_equals(animations.length, 1,
     'getAnimations initally only returns Animations for CSS Animations whose'
     + ' animation-name is found');
 
-  animations[0].ready.then(waitForFrame).then(t.step_func(function() {
+  return animations[0].ready.then(waitForFrame).then(function() {
     var 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(t.step_func(function() {
+  }).then(function() {
     assert_true(animations[0].startTime < animations[1].startTime,
       'Newly added animation has a later start time');
     document.styleSheets[0].deleteRule(0);
-    t.done();
-  }));
+  });
 }, 'getAnimations for CSS Animations where the @keyframes rule is added'
    + ' later');
 
 test(function(t) {
   var 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'
@@ -202,29 +199,28 @@ test(function(t) {
 test(function(t) {
   var 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');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t);
   div.style.animation = 'anim1 100s 100s';
   var animations = div.getAnimations();
   assert_equals(animations.length, 1,
     'getAnimations returns animations for CSS animations whose'
     + ' delay makes them start later');
-  animations[0].ready.then(waitForFrame).then(t.step_func(function() {
+  return animations[0].ready.then(waitForFrame).then(function() {
     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');
-    t.done();
-  }));
+  });
 }, 'getAnimations for CSS animations in delay phase');
 
 test(function(t) {
   var 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');
@@ -269,21 +265,21 @@ test(function(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');
 
-async_test(function(t) {
+promise_test(function(t) {
   var div = addDiv(t);
   div.style.animation = 'anim2 100s';
 
-  div.getAnimations()[0].ready.then(t.step_func(function() {
+  return div.getAnimations()[0].ready.then(function() {
     // 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';
     var anims = div.getAnimations();
     assert_equals(anims[0].animationName, 'anim1',
                   'animation order after prepending to list');
     assert_equals(anims[1].animationName, 'anim2',
@@ -295,18 +291,17 @@ async_test(function(t) {
     var 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');
-    t.done();
-  }));
+  });
 }, 'getAnimations for CSS Animations follows animation-name order');
 
 test(function(t) {
   addStyle(t, { '#target::after': 'animation: anim1 10s;',
                 '#target::before': 'animation: anim1 10s;' });
   var target = addDiv(t, { 'id': 'target' });
   target.style.animation = 'anim1 100s';
 
--- a/dom/animation/test/css-animations/file_pseudoElement-get-animations.html
+++ b/dom/animation/test/css-animations/file_pseudoElement-get-animations.html
@@ -37,17 +37,17 @@ test(function(t) {
   // Trigger transitions
   flushComputedStyle(div);
   div.classList.add('after-change');
 
   // Create additional animation on the pseudo-element from script
   var pseudoTarget = document.getAnimations()[0].effect.target;
   var effect = new KeyframeEffectReadOnly(pseudoTarget,
                                           { background: ["blue", "red"] },
-                                          3000);
+                                          3 * MS_PER_SEC);
   var newAnimation = new Animation(effect, document.timeline);
   newAnimation.id = 'scripted-anim';
   newAnimation.play();
 
   // Check order - the script-generated animation should appear later
   var anims = pseudoTarget.getAnimations();
   assert_equals(anims.length, 5,
                 'Got expected number of animations/trnasitions running on ' +
--- a/dom/events/test/test_legacy_event.html
+++ b/dom/events/test/test_legacy_event.html
@@ -5,18 +5,18 @@ https://bugzilla.mozilla.org/show_bug.cg
 -->
 <head>
   <meta charset="utf-8">
   <title>Test for Bug 1236979 (events that have legacy alternative versions)</title>
   <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
   <style>
     @keyframes anim1 {
-      0%   { margin-left: 0px }
-      100% { margin-left: 100px }
+      0%   { margin-left: 200px }
+      100% { margin-left: 300px }
     }
   </style>
 </head>
 <body>
 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1236979">Mozilla Bug 1236979</a>
 <p id="display"></p>
 <div id="content" style="display: none">
 
@@ -27,31 +27,16 @@ https://bugzilla.mozilla.org/show_bug.cg
 /** Test for Bug 1236979 **/
 
 'use strict';
 SimpleTest.waitForExplicitFinish();
 
 // Array of info-bundles about each legacy event to be tested:
 var gLegacyEventInfo = [
   {
-    legacy_name: "webkitTransitionEnd",
-    modern_name: "transitionend",
-    trigger_event: triggerShortTransition,
-  },
-  {
-    legacy_name: "webkitAnimationStart",
-    modern_name: "animationstart",
-    trigger_event: triggerShortAnimation,
-  },
-  {
-    legacy_name: "webkitAnimationEnd",
-    modern_name: "animationend",
-    trigger_event: triggerShortAnimation,
-  },
-  {
     legacy_name: "webkitAnimationIteration",
     modern_name: "animationiteration",
     trigger_event: triggerAnimationIteration,
   }
 ];
 
 // EVENT-TRIGGERING FUNCTIONS
 // --------------------------
@@ -83,17 +68,18 @@ function triggerShortAnimation(node) {
 // any animationiteration events -- the CSS Animations spec says this event
 // must not be fired "...when an animationend event would fire at the same time"
 // (which would be the case in this example with a 1ms duration). So, to make
 // sure our event does fire, we use a long duration and a nearly-as-long
 // negative delay. This ensures we hit the end of the first iteration right
 // away, and that we don't risk hitting the end of the second iteration at the
 // same time.
 function triggerAnimationIteration(node) {
-  node.style.animation = "anim1 300s -299.999s linear 2";
+  dump("************ Add Animation! **********");
+  node.style.animation = "anim1 1s -0.999s linear 2";
 }
 
 // GENERAL UTILITY FUNCTIONS
 // -------------------------
 // Creates a new div and appends it as a child of the specified parentNode, or
 // (if no parent is specified) as a child of the element with ID 'display'.
 function createChildDiv(parentNode) {
   if (!parentNode) {
@@ -107,16 +93,17 @@ function createChildDiv(parentNode) {
   return div;
 }
 
 // Returns an event-handler function, which (when invoked) simply checks that
 // the event's type matches what's expected. If a callback is passed in, then
 // the event-handler will invoke that callback as well.
 function createHandlerWithTypeCheck(expectedEventType, extraHandlerLogic) {
   var handler = function(e) {
+    dump("********** event fired [" + e.type + "] ******\n");
     is(e.type, expectedEventType,
        "When an event handler for '" + expectedEventType + "' is invoked, " +
        "the event's type field should be '" + expectedEventType + "'.");
     if (extraHandlerLogic) {
       extraHandlerLogic(e);
     }
   }
   return handler;
@@ -132,26 +119,29 @@ function createHandlerWithTypeCheck(expe
 
 // Tests that the legacy event type is sent, when only a legacy handler is
 // registered.
 function mpTestLegacyEventSent(eventInfo) {
   return new Promise(
     function(resolve, reject) {
       // Create a node & register an event-handler for the legacy event:
       var div = createChildDiv();
+      div.innerHTML = "<h2>Clobber</h2>";
 
       var handler = createHandlerWithTypeCheck(eventInfo.legacy_name,
                                                function() {
         // When event-handler is done, clean up & resolve:
         div.parentNode.removeChild(div);
+        dump("************ Resolved **********\n");
         resolve();
       });
       div.addEventListener(eventInfo.legacy_name, handler);
 
       // Trigger the event:
+      dump("************ trigger[" + eventInfo.legacy_name + "] **********\n");
       eventInfo.trigger_event(div);
     }
   );
 }
 
 // Test that the modern event type (and only the modern event type) is fired,
 // when listeners of both modern & legacy types are registered. The legacy
 // listener should not be invoked.
@@ -169,16 +159,17 @@ function mpTestModernBeatsLegacy(eventIn
       var modernHandler = createHandlerWithTypeCheck(eventInfo.modern_name,
                                                      function() {
         // Indicate that the test has passed (we invoked the modern handler):
         ok(true, "Handler for modern event '" + eventInfo.modern_name +
            "' should be invoked when there's a handler registered for " +
            "both modern & legacy event type on the same node");
         // When event-handler is done, clean up & resolve:
         div.parentNode.removeChild(div);
+        dump("************ Resolved **********\n");
         resolve();
       });
 
       div.addEventListener(eventInfo.legacy_name, legacyHandler);
       div.addEventListener(eventInfo.modern_name, modernHandler);
       eventInfo.trigger_event(div);
     }
   );
@@ -216,16 +207,17 @@ function mpTestDiffListenersEventBubblin
         ok(didEventFireOnTarget,
            "Event should have fired on child");
         ok(didEventFireOnParent,
            "Event should have fired on parent");
         is(e, eventSentToTarget,
            "Same event object should bubble, despite difference in type");
         // Clean up.
         grandparent.parentNode.removeChild(grandparent);
+        dump("************ Resolved **********\n");
         resolve();
       }));
 
       eventInfo.trigger_event(target);
     }
   );
 }
 
@@ -265,35 +257,41 @@ function mpTestDiffListenersEventCapturi
           is(e.eventPhase, Event.AT_TARGET,
              "event should be at target phase");
           is(e, eventSentToGrandparent,
              "Same event object should capture, despite difference in type");
           ok(didEventFireOnParent,
              "Event should have fired on parent");
           // Clean up.
           grandparent.parentNode.removeChild(grandparent);
+          dump("************ Resolved **********\n");
           resolve();
       }), true);
 
       eventInfo.trigger_event(target);
     }
   );
 }
 
 // MAIN FUNCTION: Kick off the tests.
 function main() {
   Promise.resolve().then(function() {
+    dump("part1 clear\n");
     return Promise.all(gLegacyEventInfo.map(mpTestLegacyEventSent))
   }).then(function() {
+    dump("part2 clear\n");
     return Promise.all(gLegacyEventInfo.map(mpTestModernBeatsLegacy));
   }).then(function() {
+    dump("part3 clear");
     return Promise.all(gLegacyEventInfo.map(mpTestDiffListenersEventCapturing));
   }).then(function() {
+    dump("part4 clear");
     return Promise.all(gLegacyEventInfo.map(mpTestDiffListenersEventBubbling));
   }).then(function() {
+    dump("part5 clear");
     SimpleTest.finish();
   }).catch(function(reason) {
     ok(false, "Test failed: " + reason);
     SimpleTest.finish();
   });
 }
 
 main();