Backed out changeset b72de5c5ac33 (bug 1260084) for test failures in reverse.html
authorCarsten "Tomcat" Book <cbook@mozilla.com>
Tue, 19 Apr 2016 12:36:20 +0200
changeset 317636 b6d92387fbcf57b07f07c11931571a7fb4ec73cc
parent 317635 56148c26e7a1d3a2c5a609d7b1d5db61ba1858fd
child 317637 1d63c3125eea03e843c17cc1665133bd73e00504
push id9480
push userjlund@mozilla.com
push dateMon, 25 Apr 2016 17:12:58 +0000
treeherdermozilla-aurora@0d6a91c76a9e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1260084
milestone48.0a1
backs outb72de5c5ac3363c5fe7dc94c74a13a1152720100
Backed out changeset b72de5c5ac33 (bug 1260084) for test failures in reverse.html
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
--- 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, -10 * MS_PER_SEC,
+  assert_equals(effect.getComputedTiming().delay, -10000,
                 '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, 10 * MS_PER_SEC,
+  assert_equals(effect.getComputedTiming().delay, 10000,
                 '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, 100 * MS_PER_SEC,
+  assert_equals(effect.getComputedTiming().duration, 100000,
                 '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, 100 * MS_PER_SEC,
+  assert_equals(effect.getComputedTiming().endTime, 100000,
                 '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 = (100 - 5) * MS_PER_SEC;
+  var answer = 100000 - 5000; // ms
   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, 100 * MS_PER_SEC,
+  assert_equals(effect.getComputedTiming().endTime, 100000,
                 '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, -90 * MS_PER_SEC,
+  assert_equals(effect.getComputedTiming().endTime, -90000,
                 '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 = 100 * MS_PER_SEC * 5;
+  var answer = 100000 * 5; // ms
   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 = 5 * MS_PER_SEC;
+  anim.currentTime = 5000;
   assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
                 'current localTime after setting currentTime');
 }, 'localTime of an animation is always equal to currentTime');
 
-promise_test(function(t) {
+async_test(function(t) {
   var div = addDiv(t, {style: 'animation: moveAnimation 100s'});
 
   var anim = div.getAnimations()[0];
   anim.playbackRate = 2; // 2 times faster
 
-  return anim.ready.then(function() {
+  anim.ready.then(t.step_func(function() {
     assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
                   'localTime is equal to currentTime');
     return waitForFrame();
-  }).then(function() {
+  })).then(t.step_func_done(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 += 2.5 * MS_PER_SEC;
+  anim.currentTime += 2500;
   assert_equals(anim.effect.getComputedTiming().progress, 0.25,
                 'Value of progress');
-  anim.currentTime += 5 * MS_PER_SEC;
+  anim.currentTime += 5000;
   assert_equals(anim.effect.getComputedTiming().progress, 0.75,
                 'Value of progress');
-  anim.currentTime += 5 * MS_PER_SEC;
+  anim.currentTime += 5000;
   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 -= 1 * MS_PER_SEC;
+  anim.currentTime -= 1000;
   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 -= 1 * MS_PER_SEC;
+  anim.currentTime -= 1000;
   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 += 2.5 * MS_PER_SEC;
+  anim.currentTime += 2500;
   assert_equals(anim.effect.getComputedTiming().progress, 0.25,
                 'Value of progress');
-  anim.currentTime += 5 * MS_PER_SEC;
+  anim.currentTime += 5000;
   assert_equals(anim.effect.getComputedTiming().progress, 0.75,
                 'Value of progress');
-  anim.currentTime += 5 * MS_PER_SEC;
+  anim.currentTime += 5000;
   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 += 2.5 * MS_PER_SEC;
+  anim.currentTime += 2500;
   assert_equals(anim.effect.getComputedTiming().progress, 0.75,
                 'Value of progress');
-  anim.currentTime += 5 * MS_PER_SEC;
+  anim.currentTime += 5000;
   assert_equals(anim.effect.getComputedTiming().progress, 0.25,
                 'Value of progress');
-  anim.currentTime += 5 * MS_PER_SEC;
+  anim.currentTime += 5000;
   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 += 2.5 * MS_PER_SEC;
+  anim.currentTime += 2500;
   assert_equals(anim.effect.getComputedTiming().progress, 0.25,
                 'Value of progress');
-  anim.currentTime -= 5 * MS_PER_SEC;
+  anim.currentTime -= 5000;
   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 += 2.5 * MS_PER_SEC;
+  anim.currentTime += 2500;
   assert_equals(anim.effect.getComputedTiming().progress, 0.75,
                 'Value of progress');
-  anim.currentTime -= 5 * MS_PER_SEC;
+  anim.currentTime -= 5000;
   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 -= 2 * MS_PER_SEC;
+  anim.currentTime -= 2000;
   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 -= 2 * MS_PER_SEC;
+  anim.currentTime -= 2000;
   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 = 250 * MS_PER_SEC;
+  anim.currentTime = 250000; // ms
   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 = 1000 * MS_PER_SEC;
-const ANIM_DUR_MS = 1000 * MS_PER_SEC;
+const ANIM_DELAY_MS = 1000000; // 1000s
+const ANIM_DUR_MS = 1000000; // 1000s
 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,16 +181,17 @@ 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];
 
@@ -218,47 +219,52 @@ 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');
 
-promise_test(function(t) {
+
+async_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];
 
-  return animation.ready.then(function() {
+  animation.ready.then(t.step_func(function() {
     checkStateOnReadyPromiseResolved(animation);
 
     animation.currentTime =
       currentTimeForStartOfActiveInterval(animation.timeline);
     return eventWatcher.wait_for('animationstart');
-  }).then(function() {
+  })).then(t.step_func(function() {
     checkStateAtActiveIntervalStartTime(animation);
 
     animation.currentTime =
       currentTimeForFiftyPercentThroughActiveInterval(animation.timeline);
     checkStateAtFiftyPctOfActiveInterval(animation);
 
     animation.currentTime =
       currentTimeForEndOfActiveInterval(animation.timeline);
     return eventWatcher.wait_for('animationend');
-  }).then(function() {
+  })).then(t.step_func(function() {
     checkStateAtActiveIntervalEndTime(animation);
+  })).catch(t.step_func(function(reason) {
+    assert_unreached(reason);
+  })).then(function() {
+    t.done();
   });
 }, 'Skipping forward through animation');
 
 
-promise_test(function(t) {
+async_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:
@@ -267,18 +273,18 @@ promise_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.
-  var retPromise =  eventWatcher.wait_for(['animationstart',
-                                           'animationend']).then(function() {
+  eventWatcher.wait_for(['animationstart',
+                         'animationend']).then(t.step_func(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:
@@ -293,267 +299,291 @@ promise_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(function() {
+  })).then(t.step_func(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(function() {
+  })).then(t.step_func(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.
-  checkStateAtActiveIntervalEndTime(animation);
+  // XXX For some reason this fails occasionally (either the animation.playState
+  // check or the marginLeft check).
+  //checkStateAtActiveIntervalEndTime(animation);
+}, 'Skipping backwards through 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.
 
-promise_test(function(t) {
+async_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);
 
-  return waitForAnimationFrames(2);
+  waitForAnimationFrames(2).then(function() {
+    t.done();
+  });
 }, 'Redundant change, before -> active, then back');
 
-promise_test(function(t) {
+async_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);
 
-  return waitForAnimationFrames(2);
+  waitForAnimationFrames(2).then(function() {
+    t.done();
+  });
 }, 'Redundant change, before -> after, then back');
 
-promise_test(function(t) {
+async_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];
 
-  var retPromise = eventWatcher.wait_for('animationstart').then(function() {
+  eventWatcher.wait_for('animationstart').then(function() {
     animation.currentTime = currentTimeForBeforePhase(animation.timeline);
     animation.currentTime = currentTimeForActivePhase(animation.timeline);
 
-    return waitForAnimationFrames(2);
+    waitForAnimationFrames(2).then(function() {
+      t.done();
+    });
   });
   // get us into the initial state:
   animation.currentTime = currentTimeForActivePhase(animation.timeline);
-
-  return retPromise;
 }, 'Redundant change, active -> before, then back');
 
-promise_test(function(t) {
+async_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];
 
-  var retPromise =  eventWatcher.wait_for('animationstart').then(function() {
+  eventWatcher.wait_for('animationstart').then(function() {
     animation.currentTime = currentTimeForAfterPhase(animation.timeline);
     animation.currentTime = currentTimeForActivePhase(animation.timeline);
 
-    return waitForAnimationFrames(2);
+    waitForAnimationFrames(2).then(function() {
+      t.done();
+    });
   });
   // get us into the initial state:
   animation.currentTime = currentTimeForActivePhase(animation.timeline);
-
-  return retPromise;
 }, 'Redundant change, active -> after, then back');
 
-promise_test(function(t) {
+async_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];
 
-  var retPromise =  eventWatcher.wait_for(['animationstart',
-                                           'animationend']).then(function() {
+  eventWatcher.wait_for(['animationstart',
+                         'animationend']).then(function() {
     animation.currentTime = currentTimeForBeforePhase(animation.timeline);
     animation.currentTime = currentTimeForAfterPhase(animation.timeline);
 
-    return waitForAnimationFrames(2);
+    waitForAnimationFrames(2).then(function() {
+      t.done();
+    });
   });
   // get us into the initial state:
   animation.currentTime = currentTimeForAfterPhase(animation.timeline);
-
-  return retPromise;
 }, 'Redundant change, after -> before, then back');
 
-promise_test(function(t) {
+async_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];
 
-  var retPromise =  eventWatcher.wait_for(['animationstart',
-                                           'animationend']).then(function() {
+  eventWatcher.wait_for(['animationstart',
+                         'animationend']).then(function() {
     animation.currentTime = currentTimeForActivePhase(animation.timeline);
     animation.currentTime = currentTimeForAfterPhase(animation.timeline);
 
-    return waitForAnimationFrames(2);
+    waitForAnimationFrames(2).then(function() {
+      t.done();
+    });
   });
   // get us into the initial state:
   animation.currentTime = currentTimeForAfterPhase(animation.timeline);
-
-  return retPromise;
 }, 'Redundant change, after -> active, then back');
 
-promise_test(function(t) {
+async_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);
 
-  return eventWatcher.wait_for(['animationstart',
-                                'animationend']).then(function() {
+  eventWatcher.wait_for(['animationstart',
+                         'animationend']).then(t.step_func(function() {
     animation.currentTime = currentTimeForActivePhase(animation.timeline);
     return eventWatcher.wait_for('animationstart');
-  });
+  })).then(t.step_func(function() {
+    t.done();
+  }));
+
 }, 'Seeking finished -> paused dispatches animationstart');
 
-promise_test(function(t) {
+async_test(function(t) {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.animation = ANIM_PROPERTY_VAL;
 
   var animation = div.getAnimations()[0];
 
-  return animation.ready.then(function() {
+  animation.ready.then(t.step_func(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');
 
-promise_test(function(t) {
+
+async_test(function(t) {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.animation = 'anim 100s';
 
   var animation = div.getAnimations()[0];
   var pauseTime;
 
-  return animation.ready.then(function() {
+  animation.ready.then(t.step_func(function() {
     assert_not_equals(animation.currentTime, null,
       'Animation.currentTime not null on ready Promise resolve');
     animation.pause();
     return animation.ready;
-  }).then(function() {
+  })).then(t.step_func(function() {
     pauseTime = animation.currentTime;
     return waitForFrame();
-  }).then(function() {
+  })).then(t.step_func(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');
 
-promise_test(function(t) {
+async_test(function(t) {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.animation = ANIM_PROPERTY_VAL;
 
   var animation = div.getAnimations()[0];
 
-  return animation.ready.then(function() {
+  animation.ready.then(function() {
     // just before animation ends:
     animation.currentTime = ANIM_DELAY_MS + ANIM_DUR_MS - 1;
 
     return waitForAnimationFrames(2);
-  }).then(function() {
+  }).then(t.step_func(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');
 
-promise_test(function(t) {
+async_test(function(t) {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.animation = ANIM_PROPERTY_VAL;
 
   var animation = div.getAnimations()[0];
 
-  return animation.ready.then(function() {
+  animation.ready.then(function() {
     // play backwards:
     animation.playbackRate = -1;
 
     // just before animation ends (at the "start"):
     animation.currentTime = 1;
 
     return waitForAnimationFrames(2);
-  }).then(function() {
+  }).then(t.step_func(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');
 
-promise_test(function(t) {
+async_test(function(t) {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.animation = 'anim 100s';
 
   var animation = div.getAnimations()[0];
-  return animation.ready.then(function() {
+  animation.ready.then(t.step_func(function() {
     animation.finish();
 
     // Initiate a pause then abort it
     animation.pause();
     animation.play();
 
     // Wait to return to running state
     return animation.ready;
-  }).then(function() {
+  })).then(t.step_func(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,469 +7,540 @@
 }
 @keyframes def {}
 </style>
 <body>
 <script>
 'use strict';
 
 const ANIM_PROP_VAL = 'abc 100s';
-const ANIM_DURATION = 100 * MS_PER_SEC;
+const ANIM_DURATION = 100000; // ms
 
-promise_test(function(t) {
+async_test(function(t) {
   var div = addDiv(t);
   div.style.animation = ANIM_PROP_VAL;
   var animation = div.getAnimations()[0];
+
   var previousFinishedPromise = animation.finished;
-  return animation.ready.then(function() {
+
+  animation.ready.then(t.step_func(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(function() {
+  })).then(t.step_func(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');
 
-promise_test(function(t) {
+async_test(function(t) {
   var div = addDiv(t);
   div.style.animation = ANIM_PROP_VAL;
   var animation = div.getAnimations()[0];
+
   var previousFinishedPromise = animation.finished;
+
   animation.finish();
-  return animation.finished.then(function() {
+
+  animation.finished.then(t.step_func(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');
 
-promise_test(function(t) {
+async_test(function(t) {
   var div = addDiv(t);
   div.style.animation = ANIM_PROP_VAL;
   var animation = div.getAnimations()[0];
+
   var previousFinishedPromise;
+
   animation.finish();
-  return animation.finished.then(function() {
+
+  animation.finished.then(t.step_func(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(function() {
+  })).then(t.step_func(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');
 
-promise_test(function(t) {
+async_test(function(t) {
   var div = addDiv(t);
   div.style.animation = ANIM_PROP_VAL;
   var animation = div.getAnimations()[0];
+
   var previousFinishedPromise = animation.finished;
+
   animation.finish();
-  return animation.finished.then(function() {
+
+  animation.finished.then(t.step_func(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');
 
-promise_test(function(t) {
+async_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;
   });
-  return animation.ready.then(function() {
+
+  animation.ready.then(t.step_func(function() {
     // Jump to mid-way in interval and pause
     animation.currentTime = ANIM_DURATION / 2;
     animation.pause();
     return animation.ready;
-  }).then(function() {
+  })).then(t.step_func(function() {
     // Jump to the end
     // (But don't use finish() since that should unpause as well)
     animation.currentTime = ANIM_DURATION;
     return waitForAnimationFrames(2);
-  }).then(function() {
+  })).then(t.step_func(function() {
     assert_false(finishPromiseResolved,
                  'Finished promise should not resolve when paused');
-  });
+    t.done();
+  }));
 }, 'Finished promise does not resolve when paused');
 
-promise_test(function(t) {
+async_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;
   });
-  return animation.ready.then(function() {
+
+  animation.ready.then(t.step_func(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(function() {
+  })).then(t.step_func(function() {
     assert_false(finishPromiseResolved,
                  'Finished promise should not resolve when pause-pending');
-  });
+    t.done();
+  }));
 }, 'Finished promise does not resolve when pause-pending');
 
-promise_test(function(t) {
+async_test(function(t) {
   var div = addDiv(t);
   div.style.animation = ANIM_PROP_VAL;
   var animation = div.getAnimations()[0];
+
   animation.currentTime = ANIM_DURATION;
-  return animation.finished.then(function(resolvedAnimation) {
+  animation.finished.then(t.step_func(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');
 
-promise_test(function(t) {
+async_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
-  var retPromise = animation.finished.then(function() {
+  animation.finished.then(t.step_func(function() {
     assert_unreached('finished promise is fulfilled');
-  }).catch(function(err) {
+  })).catch(t.step_func(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');
 
-promise_test(function(t) {
+async_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
-  var retPromise = animation.finished.then(function() {
+  animation.finished.then(t.step_func(function() {
     assert_unreached('finished promise was fulfilled');
-  }).catch(function(err) {
+  })).catch(t.step_func(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');
 
-promise_test(function(t) {
+async_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
-  var retPromise = animation.finished.then(function() {
+  animation.finished.then(t.step_func(function() {
     assert_unreached('finished promise was fulfilled');
-  }).catch(function(err) {
+  })).catch(t.step_func(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()');
 
-promise_test(function(t) {
+async_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;
-  return animation.finished.then(function() {
+
+  animation.finished.then(t.step_func(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');
 
-promise_test(function(t) {
+async_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.
-  var retPromise = animation.finished.catch(function(err) {
+  animation.finished.catch(t.step_func(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');
 
-promise_test(function(t) {
+async_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;
-  return animation.ready.then(function() {
+  animation.ready.then(t.step_func(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(function() {
+  })).then(t.step_func(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');
 
-promise_test(function(t) {
+async_test(function(t) {
   var div = addDiv(t);
   div.style.animation = ANIM_PROP_VAL;
   var animation = div.getAnimations()[0];
-  var retPromise = animation.ready.then(function() {
+
+  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');
 
-promise_test(function(t) {
+async_test(function(t) {
   var div = addDiv(t);
   div.style.animation = ANIM_PROP_VAL;
   var animation = div.getAnimations()[0];
 
-  return animation.ready.then(function() {
+  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');
 
-promise_test(function(t) {
+async_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;
-  return animation.finished.then(function() {
+
+  animation.finished.then(function() {
     div.style.animationPlayState = 'running';
     return waitForAnimationFrames(2);
-  }).then(function() {
+  }).then(t.step_func(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');
 
-promise_test(function(t) {
+async_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;
-  return animation.finished.then(function() {
+
+  animation.finished.then(t.step_func(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');
 
-test(function(t) {
+async_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');
 
-test(function(t) {
+async_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');
+  t.done();
 }, 'Test new finished promise generated when finished state ' +
    'is checked synchronously');
 
-promise_test(function(t) {
+async_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;
-  });
-  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');
-  });
 
-}, 'Test synchronous finished promise resolved even if finished state ' +
-   'is changed soon');
-
-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;
   });
 
-  return animation.ready.then(function() {
+  animation.ready.then(function() {
+    animation.finish();
+    animation.currentTime = ANIM_DURATION / 2;
+  }).then(t.step_func(function() {
+    assert_true(resolvedFinished,
+      'Animation.finished should be resolved even if ' +
+      'the finished state is changed soon');
+    t.done();
+  }));
+
+}, 'Test synchronous finished promise resolved even if finished state ' +
+   'is changed soon');
+
+async_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(function() {
+  })).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');
 
-promise_test(function(t) {
+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');
   }));
 
-  return animation.ready.then(function() {
+  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');
 
-promise_test(function(t) {
+async_test(function(t) {
   var div = addDiv(t);
   div.style.animation = ANIM_PROP_VAL;
   var animation = div.getAnimations()[0];
 
-  return animation.ready.then(function() {
+  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,22 +3,25 @@
 <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,16 +8,17 @@
 </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 = 100 * MS_PER_SEC;
+const ANIM_DURATION = 100000; // ms
 
 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,61 +73,70 @@ 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');
 
-promise_test(function(t) {
+async_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();
 
-  return animation.ready.then(function() {
+  animation.ready.then(t.step_func(function() {
     animation.currentTime = ANIM_DURATION;
     return waitForAnimationFrames(2);
-  });
+  })).then(t.step_func(function() {
+    t.done();
+  }));
 }, 'onfinish event is not fired when paused');
 
-promise_test(function(t) {
+async_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');
   });
 
-  return animation.ready.then(function() {
+  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');
 
-promise_test(function(t) {
+async_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');
   });
 
-  return animation.ready.then(function() {
+  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,132 +10,147 @@
 <body>
 <script>
 'use strict';
 
 function getMarginLeft(cs) {
   return parseFloat(cs.marginLeft);
 }
 
-promise_test(function(t) {
+async_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);
 
-  return animation.ready.then(waitForFrame).then(function() {
+  animation.ready.then(waitForFrame).then(t.step_func(function() {
     assert_true(getMarginLeft(cs) > previousAnimVal,
                 'margin-left is initially increasing');
     animation.pause();
     return animation.ready;
-  }).then(function() {
+  })).then(t.step_func(function() {
     previousAnimVal = getMarginLeft(cs);
     return waitForFrame();
-  }).then(function() {
+  })).then(t.step_func(function() {
     assert_equals(getMarginLeft(cs), previousAnimVal,
                   'margin-left does not increase after calling pause()');
-  });
+    t.done();
+  }));
 }, 'pause() a running animation');
 
-promise_test(function(t) {
+async_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';
 
-  return animation.ready.then(waitForFrame).then(function() {
+  animation.ready.then(waitForFrame).then(t.step_func(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');
 
-promise_test(function(t) {
+async_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() {
+    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) {
+  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();
 
-  return animation.ready.then(waitForFrame).then(function() {
-    assert_true(getMarginLeft(cs) > 0,
-                'Playing value of margin-left is greater than zero');
-  });
-}, 'play() overrides animation-play-state');
-
-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;
 
-  return animation.ready.then(function() {
+  animation.ready.then(function() {
     div.style.animationPlayState = 'running';
     cs.animationPlayState; // Trigger style resolution
     return waitForFrame();
-  }).then(function() {
+  }).then(t.step_func(function() {
     assert_equals(cs.animationPlayState, 'running',
                   'animation-play-state is running');
     div.style.animationPlayState = 'paused';
     return animation.ready;
-  }).then(function() {
+  })).then(t.step_func(function() {
     assert_equals(cs.animationPlayState, 'paused',
                   'animation-play-state is paused');
     previousAnimVal = getMarginLeft(cs);
     return waitForFrame();
-  }).then(function() {
+  })).then(t.step_func(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"');
 
-promise_test(function(t) {
+async_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);
 
-  return animation.ready.then(waitForFrame).then(function() {
+  animation.ready.then(waitForFrame).then(t.step_func(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');
 
-promise_test(function(t) {
+async_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
@@ -144,91 +159,99 @@ promise_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);
 
-  return animation.ready.then(waitForFrame).then(function() {
+  animation.ready.then(waitForFrame).then(t.step_func(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.)
 
-promise_test(function(t) {
+async_test(function(t) {
   var div = addDiv(t, { style: 'animation: anim 1000s' });
   var animation = div.getAnimations()[0];
+
   var readyPromiseRun = false;
 
-  return animation.ready.then(function() {
+  animation.ready.then(t.step_func(function() {
     div.style.animationPlayState = 'paused';
     assert_equals(animation.playState, 'pending', 'Animation is pause pending');
 
     // Set current time
-    animation.currentTime = 5 * MS_PER_SEC;
+    animation.currentTime = 5000;
     assert_equals(animation.playState, 'paused',
                   'Animation is paused immediately after setting currentTime');
     assert_equals(animation.startTime, null,
                   'Animation startTime is unresolved immediately after ' +
                   'setting currentTime');
-    assert_equals(animation.currentTime, 5 * MS_PER_SEC,
+    assert_equals(animation.currentTime, 5000,
                   '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');
 
-promise_test(function(t) {
+async_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
-  return animation.ready.then(function() {
+  animation.ready.then(t.step_func(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');
 
-promise_test(function(t) {
+async_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 * MS_PER_SEC,
+  assert_equals(animation.currentTime, 1000 * 1000,
                 'currentTime is set to the effect end');
 
-  return animation.ready.then(function() {
-    assert_equals(animation.currentTime, 1000 * MS_PER_SEC,
+  animation.ready.then(t.step_func(function() {
+    assert_equals(animation.currentTime, 1000 * 1000,
                   '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');
@@ -237,16 +260,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 * MS_PER_SEC,
+      assert_equals(animation.currentTime, 1000 * 1000,
                     '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,236 +5,247 @@
 @keyframes abc {
   to { transform: translate(10px) }
 }
 </style>
 <body>
 <script>
 'use strict';
 
-promise_test(function(t) {
+async_test(function(t) {
   var div = addDiv(t);
   div.style.animation = 'abc 100s';
   var animation = div.getAnimations()[0];
+
   var originalReadyPromise = animation.ready;
   var pauseReadyPromise;
 
-  return animation.ready.then(function() {
+  animation.ready.then(t.step_func(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(function() {
+  })).then(t.step_func(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');
 
-promise_test(function(t) {
+async_test(function(t) {
   var div = addDiv(t);
   div.style.animation = 'abc 100s paused';
   var animation = div.getAnimations()[0];
+
   var originalReadyPromise = animation.ready;
-
-  return animation.ready.then(function() {
+  animation.ready.then(t.step_func(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');
 
-promise_test(function(t) {
+async_test(function(t) {
   var div = addDiv(t);
   div.style.animation = 'abc 100s';
   var animation = div.getAnimations()[0];
 
-  return animation.ready.then(function() {
+  animation.ready.then(t.step_func(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');
 
-promise_test(function(t) {
+async_test(function(t) {
   var div = addDiv(t);
   div.style.animation = 'abc 100s';
   var animation = div.getAnimations()[0];
 
-  return animation.ready.then(function(resolvedAnimation) {
+  animation.ready.then(t.step_func(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');
 
-promise_test(function(t) {
+async_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
-  var retPromise = animation.ready.then(function() {
+  animation.ready.then(t.step_func(function() {
     assert_unreached('ready promise is fulfilled');
-  }).catch(function(err) {
+  })).catch(t.step_func(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');
 
-promise_test(function(t) {
+async_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
-  var retPromise = animation.ready.then(function() {
+  animation.ready.then(t.step_func(function() {
     assert_unreached('ready promise was fulfilled');
-  }).catch(function(err) {
+  })).catch(t.step_func(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');
 
-promise_test(function(t) {
+async_test(function(t) {
   var div = addDiv(t);
   div.style.animation = 'abc 100s';
   var animation = div.getAnimations()[0];
 
-  var retPromise = animation.ready.then(function() {
+  animation.ready.then(t.step_func(function() {
     assert_unreached('ready promise was fulfilled');
-  }).catch(function(err) {
+  })).catch(t.step_func(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()');
 
-promise_test(function(t) {
+async_test(function(t) {
   var div = addDiv(t);
   div.style.animation = 'abc 100s';
   var animation = div.getAnimations()[0];
 
-  return animation.ready.then(function() {
+  animation.ready.then(t.step_func(function() {
     animation.pause();
 
     // Set up listeners on pause-pending ready promise
-    var retPromise = animation.ready.then(function() {
+    animation.ready.then(t.step_func(function() {
       assert_unreached('ready promise was fulfilled');
-    }).catch(function(err) {
+    })).catch(t.step_func(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()');
 
-promise_test(function(t) {
+async_test(function(t) {
   var div = addDiv(t, { style: 'animation: abc 100s' });
   var animation = div.getAnimations()[0];
+
   var originalReadyPromise = animation.ready;
-
-  return animation.ready.then(function() {
+  animation.ready.then(t.step_func(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');
 
-promise_test(function(t) {
+async_test(function(t) {
   var div = addDiv(t, { style: 'animation: abc 100s' });
   var animation = div.getAnimations()[0];
 
-  return animation.ready.then(function() {
+  animation.ready.then(t.step_func(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');
 
-promise_test(function(t) {
+async_test(function(t) {
   var div = addDiv(t, { style: 'animation: abc 100s' });
   var animation = div.getAnimations()[0];
 
-  return animation.ready.then(function() {
+  animation.ready.then(t.step_func(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(function() {
+  })).then(t.step_func(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');
 
-promise_test(function(t) {
+async_test(function(t) {
   var div = addDiv(t, { style: 'animation: abc 100s' });
   var animation = div.getAnimations()[0];
 
-  return animation.ready.then(function() {
+  animation.ready.then(t.step_func(function() {
     div.style.animationPlayState = 'paused';
     return animation.ready;
-  }).then(function(resolvedAnimation) {
+  })).then(t.step_func(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,154 +5,169 @@
 @keyframes anim {
   to { transform: translate(100px) }
 }
 </style>
 <body>
 <script>
 'use strict';
 
-promise_test(function(t) {
+async_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).
-  return animation.ready.then(waitForFrame).then(function() {
+  animation.ready.then(waitForFrame).then(t.step_func_done(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');
 
-promise_test(function(t) {
+async_test(function(t) {
   var div = addDiv(t, { style: 'animation: anim 100s infinite' });
   var animation = div.getAnimations()[0];
-  animation.currentTime = 50 * MS_PER_SEC;
+
+  animation.currentTime = 50000;
   animation.pause();
-
-  return animation.ready.then(function() {
+  animation.ready.then(t.step_func(function() {
     animation.reverse();
     return animation.ready;
-  }).then(function() {
+  })).then(t.step_func_done(function() {
     assert_equals(animation.playState, 'running',
       'Animation.playState should be "running" after reverse()');
-  });
+  }));
 }, 'reverse() starts to play when pausing animation');
 
-test(function(t) {
+async_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, 100 * MS_PER_SEC,
+  assert_equals(animation.currentTime, 100000,
     'animation.currentTime should be its effect end');
+  t.done();
 }, 'reverse() from idle state starts playing the animation');
 
-test(function(t) {
+async_test(function(t) {
   var div = addDiv(t, { style: 'animation: anim 100s' });
   var animation = div.getAnimations()[0];
-  animation.currentTime = 50 * MS_PER_SEC;
+
+  animation.currentTime = 50000;
   animation.reverse();
 
-  assert_equals(animation.currentTime, 50 * MS_PER_SEC,
+  assert_equals(animation.currentTime, 50000,
     'reverse() should not change the currentTime ' +
     'if the currentTime is in the middle of animation duration');
+  t.done();
 }, 'reverse() maintains the same currentTime');
 
-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) {
+async_test(function(t) {
   var div = addDiv(t, { style: 'animation: anim 100s' });
   var animation = div.getAnimations()[0];
 
-  animation.currentTime = -200 * MS_PER_SEC;
+  animation.currentTime = 200000;
   animation.reverse();
 
-  assert_equals(animation.currentTime, 100 * MS_PER_SEC,
+  assert_equals(animation.currentTime, 100000,
+    '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');
+
+async_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');
 
-test(function(t) {
+async_test(function(t) {
   var div = addDiv(t, { style: 'animation: anim 100s' });
   var animation = div.getAnimations()[0];
+
   animation.playbackRate = -1;
-  animation.currentTime = -200 * MS_PER_SEC;
+  animation.currentTime = -200000;
   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');
 
-test(function(t) {
+async_test(function(t) {
   var div = addDiv(t, { style: 'animation: anim 100s' });
   var animation = div.getAnimations()[0];
+
   animation.playbackRate = -1;
-  animation.currentTime = 200 * MS_PER_SEC;
+  animation.currentTime = 200000;
   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');
 
-test(function(t) {
+async_test(function(t) {
   var div = addDiv(t, { style: 'animation: anim 100s infinite' });
   var animation = div.getAnimations()[0];
-  animation.currentTime = -200 * MS_PER_SEC;
+
+  animation.currentTime = -200000;
 
   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');
 
-test(function(t) {
+async_test(function(t) {
   var div = addDiv(t, { style: 'animation: anim 100s infinite' });
   var animation = div.getAnimations()[0];
+
   animation.playbackRate = -1;
-  animation.currentTime = -200 * MS_PER_SEC;
+  animation.currentTime = -200000;
   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');
 
-test(function(t) {
+async_test(function(t) {
   var div = addDiv(t, { style: 'animation: anim 100s' });
   var animation = div.getAnimations()[0];
+
   animation.playbackRate = 0;
-  animation.currentTime = 50 * MS_PER_SEC;
+  animation.currentTime = 50000;
   animation.reverse();
 
   assert_equals(animation.playbackRate, 0,
     'reverse() should preserve playbackRate if the playbackRate == 0');
-  assert_equals(animation.currentTime, 50 * MS_PER_SEC,
+  assert_equals(animation.currentTime, 50000,
     '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 = 1000 * MS_PER_SEC; // 1000s
-const ANIM_DUR_MS = 1000 * MS_PER_SEC; // 1000s
+const ANIM_DELAY_MS = 1000000; // 1000s
+const ANIM_DUR_MS = 1000000; // 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,161 +172,172 @@ 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');
 
-promise_test(function(t)
+async_test(function(t)
 {
   var div = addDiv(t, { 'style': 'animation: anim 100s' });
   var animation = div.getAnimations()[0];
-  return animation.ready.then(function() {
+  animation.ready.then(t.step_func(function() {
     assert_true(animation.startTime > 0,
                 'startTime is resolved when running');
-  });
+    t.done();
+  }));
 }, 'startTime is resolved when running');
 
-promise_test(function(t)
+async_test(function(t)
 {
   var div = addDiv(t, { 'style': 'animation: anim 100s paused' });
   var animation = div.getAnimations()[0];
-  return animation.ready.then(function() {
+  animation.ready.then(t.step_func(function() {
     assert_equals(animation.startTime, null,
                   'startTime is unresolved when paused');
-  });
+    t.done();
+  }));
 }, 'startTime is unresolved when paused');
 
-promise_test(function(t)
+async_test(function(t)
 {
   var div = addDiv(t, { 'style': 'animation: anim 100s' });
   var animation = div.getAnimations()[0];
-  return animation.ready.then(function() {
+  animation.ready.then(t.step_func(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');
 
-promise_test(function(t) {
+async_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 * MS_PER_SEC;
-  return animation.ready.then(function() {
+  animation.currentTime = 100 * 1000;
+  animation.ready.then(t.step_func(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()');
 
-promise_test(function(t) {
+async_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;
 
-  return animation.ready.then(function() {
+  animation.ready.then(t.step_func(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(function() {
+  })).then(t.step_func(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');
 
-promise_test(function(t) {
+
+async_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];
 
-  return animation.ready.then(function() {
+  animation.ready.then(t.step_func(function() {
     checkStateOnReadyPromiseResolved(animation);
 
     animation.startTime = startTimeForStartOfActiveInterval(animation.timeline);
     return eventWatcher.wait_for('animationstart');
-  }).then(function() {
+  })).then(t.step_func(function() {
     checkStateAtActiveIntervalStartTime(animation);
 
     animation.startTime =
       startTimeForFiftyPercentThroughActiveInterval(animation.timeline);
     checkStateAtFiftyPctOfActiveInterval(animation);
 
     animation.startTime = startTimeForEndOfActiveInterval(animation.timeline);
     return eventWatcher.wait_for('animationend');
-  }).then(function() {
+  })).then(t.step_func(function() {
     checkStateAtActiveIntervalEndTime(animation);
+  })).catch(t.step_func(function(reason) {
+    assert_unreached(reason);
+  })).then(function() {
+    t.done();
   });
 }, 'Skipping forward through animation');
 
-promise_test(function(t) {
+
+async_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.
-  return eventWatcher.wait_for(['animationstart',
-                                'animationend']).then(function() {
+  eventWatcher.wait_for(['animationstart',
+                         'animationend']).then(t.step_func(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:
@@ -341,190 +352,210 @@ promise_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(function() {
+  })).then(t.step_func(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(function() {
+  })).then(t.step_func(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.
-  checkStateAtActiveIntervalEndTime(animation);
+  // XXX For some reason this fails occasionally (either the animation.playState
+  // check or the marginLeft check).
+  //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.
 
-promise_test(function(t) {
+async_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);
 
-  return waitForAnimationFrames(2);
+  waitForAnimationFrames(2).then(function() {
+    t.done();
+  });
 }, 'Redundant change, before -> active, then back');
 
-promise_test(function(t) {
+async_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);
 
-  return waitForAnimationFrames(2);
+  waitForAnimationFrames(2).then(function() {
+    t.done();
+  });
 }, 'Redundant change, before -> after, then back');
 
-promise_test(function(t) {
+async_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];
 
-  var retPromise =  eventWatcher.wait_for('animationstart').then(function() {
+  eventWatcher.wait_for('animationstart').then(function() {
     animation.startTime = startTimeForBeforePhase(animation.timeline);
     animation.startTime = startTimeForActivePhase(animation.timeline);
 
-    return waitForAnimationFrames(2);
+    waitForAnimationFrames(2).then(function() {
+      t.done();
+    });
   });
   // get us into the initial state:
   animation.startTime = startTimeForActivePhase(animation.timeline);
-
-  return retPromise;
 }, 'Redundant change, active -> before, then back');
 
-promise_test(function(t) {
+async_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];
 
-  var retPromise = eventWatcher.wait_for('animationstart').then(function() {
+  eventWatcher.wait_for('animationstart').then(function() {
     animation.startTime = startTimeForAfterPhase(animation.timeline);
     animation.startTime = startTimeForActivePhase(animation.timeline);
 
-    return waitForAnimationFrames(2);
+    waitForAnimationFrames(2).then(function() {
+      t.done();
+    });
   });
   // get us into the initial state:
   animation.startTime = startTimeForActivePhase(animation.timeline);
-
-  return retPromise;
 }, 'Redundant change, active -> after, then back');
 
-promise_test(function(t) {
+async_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];
 
-  var retPromise = eventWatcher.wait_for(['animationstart',
-                                          'animationend']).then(function() {
+  eventWatcher.wait_for(['animationstart',
+                         'animationend']).then(function() {
     animation.startTime = startTimeForBeforePhase(animation.timeline);
     animation.startTime = startTimeForAfterPhase(animation.timeline);
 
-    return waitForAnimationFrames(2);
+    waitForAnimationFrames(2).then(function() {
+      t.done();
+    });
   });
   // get us into the initial state:
   animation.startTime = startTimeForAfterPhase(animation.timeline);
-
-  return retPromise;
 }, 'Redundant change, after -> before, then back');
 
-promise_test(function(t) {
+async_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];
 
-  var retPromise = eventWatcher.wait_for(['animationstart',
-                                          'animationend']).then(function() {
+  eventWatcher.wait_for(['animationstart',
+                         'animationend']).then(function() {
     animation.startTime = startTimeForActivePhase(animation.timeline);
     animation.startTime = startTimeForAfterPhase(animation.timeline);
 
-    return waitForAnimationFrames(2);
+    waitForAnimationFrames(2).then(function() {
+      t.done();
+    });
   });
   // get us into the initial state:
   animation.startTime = startTimeForAfterPhase(animation.timeline);
-
-  return retPromise;
 }, 'Redundant change, after -> active, then back');
 
-promise_test(function(t) {
+
+async_test(function(t) {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.animation = ANIM_PROPERTY_VAL;
 
   var animation = div.getAnimations()[0];
 
   var storedCurrentTime;
 
-  return animation.ready.then(function() {
+  animation.ready.then(t.step_func(function() {
     storedCurrentTime = animation.currentTime;
     animation.startTime = null;
     return animation.ready;
-  }).then(function() {
+  })).catch(t.step_func(function(reason) {
+    assert_unreached(reason);
+  })).then(t.step_func(function() {
     assert_equals(animation.currentTime, storedCurrentTime,
       'Test that hold time is correct');
-  });
+    t.done();
+  }));
 }, 'Setting startTime to null');
 
-promise_test(function(t) {
+
+async_test(function(t) {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.animation = 'anim 100s';
 
   var animation = div.getAnimations()[0];
 
-  return animation.ready.then(function() {
+  animation.ready.then(t.step_func(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(function() {
+  })).then(t.step_func(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');
 
-promise_test(function(t) {
+async_test(function(t) {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.animation = 'anim 100s';
 
   var animation = div.getAnimations()[0];
-  return animation.ready.then(function() {
+  animation.ready.then(t.step_func(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,46 +6,48 @@
   to { left: 100px }
 }
 @keyframes anim2 { }
 </style>
 <body>
 <script>
 'use strict';
 
-promise_test(function(t) {
+async_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).
-  return originalAnimation.ready.then(function() {
+  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(function() {
+  }).then(t.step_func(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();
@@ -56,99 +58,102 @@ 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');
 
-promise_test(function(t) {
+async_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).
-  return waitForAllAnimations(animations).then(waitForFrame).then(function() {
+  waitForAllAnimations(animations).then(waitForFrame).then(t.step_func(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(function() {
+  })).then(t.step_func(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');
 
-promise_test(function(t) {
+async_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
-  return secondAnimation.ready.then(waitForFrame).then(function() {
+  secondAnimation.ready.then(waitForFrame).then(t.step_func(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');
 
-promise_test(function(t) {
+async_test(function(t) {
   var div = addDiv(t);
   div.style.animation = 'anim1 100s';
   var firstAddedAnimation = div.getAnimations()[0],
       secondAddedAnimation,
       animations;
 
   // Wait and add second Animation
-  return firstAddedAnimation.ready.then(waitForFrame).then(function() {
+  firstAddedAnimation.ready.then(waitForFrame).then(t.step_func(function() {
     div.style.animation = 'anim1 100s, anim1 100s';
     secondAddedAnimation = div.getAnimations()[0];
 
     // Wait again and add another Animation
     return secondAddedAnimation.ready.then(waitForFrame);
-  }).then(function() {
+  })).then(t.step_func(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(function() {
+  })).then(t.step_func(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"] },
-                                          3 * MS_PER_SEC);
+                                          3000);
   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,51 +19,52 @@
 
 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');
 
-promise_test(function(t) {
+async_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');
-  return animations[0].ready.then(function() {
+  animations[0].ready.then(t.step_func(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(function() {
+  })).then(t.step_func(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(function() {
+  })).then(t.step_func(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');
 
@@ -72,39 +73,40 @@ 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');
 
-promise_test(function(t) {
+async_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();
-  return animations[0].ready.then(waitForFrame).then(function() {
+  animations[0].ready.then(waitForFrame).then(t.step_func(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,
@@ -159,37 +161,38 @@ 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');
 
-promise_test(function(t) {
+async_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');
 
-  return animations[0].ready.then(waitForFrame).then(function() {
+  animations[0].ready.then(waitForFrame).then(t.step_func(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(function() {
+  })).then(t.step_func(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'
@@ -199,28 +202,29 @@ 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');
 
-promise_test(function(t) {
+async_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');
-  return animations[0].ready.then(waitForFrame).then(function() {
+  animations[0].ready.then(waitForFrame).then(t.step_func(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');
@@ -265,21 +269,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');
 
-promise_test(function(t) {
+async_test(function(t) {
   var div = addDiv(t);
   div.style.animation = 'anim2 100s';
 
-  return div.getAnimations()[0].ready.then(function() {
+  div.getAnimations()[0].ready.then(t.step_func(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',
@@ -291,17 +295,18 @@ promise_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"] },
-                                          3 * MS_PER_SEC);
+                                          3000);
   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 ' +