Bug 1283754 - Part 2: Replace await_frame() with waitForFrame(). r?boris draft
authorHiroyuki Ikezoe <hiikezoe@mozilla-japan.org>
Fri, 14 Oct 2016 06:51:48 +0900
changeset 425007 637e88009a2a27518f257b17fc980960da367199
parent 425006 304d79bd9c2d1e67fa07cacdb5fb36a46bd865e3
child 425008 3c4b3a5881e52b3a1822845959c279f1840ca1ab
push id32314
push userbmo:hiikezoe@mozilla-japan.org
push dateFri, 14 Oct 2016 00:31:54 +0000
reviewersboris
bugs1283754
milestone52.0a1
Bug 1283754 - Part 2: Replace await_frame() with waitForFrame(). r?boris MozReview-Commit-ID: 3PhjL7H5qip
dom/animation/test/chrome/test_animation_observers.html
--- a/dom/animation/test/chrome/test_animation_observers.html
+++ b/dom/animation/test/chrome/test_animation_observers.html
@@ -47,17 +47,17 @@ var gCurrentTestName;
 
 function addAsyncAnimTest(aName, aOptions, aTestGenerator) {
   aTestGenerator.testName = aName;
   aTestGenerator.options = aOptions || {};
   gTests.push(aTestGenerator);
 }
 
 function runAsyncTest(aTestGenerator) {
-  return await_frame().then(function() {
+  return waitForFrame().then(function() {
     var generator;
 
     function step(arg) {
       var next;
       try {
         next = generator.next(arg);
       } catch (e) {
         return Promise.reject(e);
@@ -103,25 +103,16 @@ is = function(a, b, message) {
 }
 ok = function(a, message) {
   if (gCurrentTestName && message) {
     message = `[${gCurrentTestName}] ${message}`;
   }
   old_ok(a, message);
 }
 
-// Returns a Promise that is resolved by a requestAnimationFrame callback.
-function await_frame() {
-  return new Promise(function(aResolve) {
-    requestAnimationFrame(function() {
-      aResolve();
-    });
-  });
-}
-
 // Adds an event listener and returns a Promise that is resolved when the
 // event listener is called.
 function await_event(aElement, aEventName) {
   return new Promise(function(aResolve) {
     function listener(aEvent) {
       aElement.removeEventListener(aEventName, listener);
       aResolve();
     }
@@ -177,31 +168,31 @@ function assert_records(expected, desc) 
     var transitionEnd = await_event(e, "transitionend");
 
     // The transition should cause the creation of a single Animation.
     var animations = e.getAnimations();
     is(animations.length, 1, "getAnimations().length after transition start");
 
     // Wait for the single MutationRecord for the Animation addition to
     // be delivered.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: animations, changed: [], removed: [] }],
                    "records after transition start");
 
     // Advance until near the end of the transition, then wait for it to finish.
     animations[0].currentTime = 99900;
     yield transitionEnd;
 
     // After the transition has finished, the Animation should disappear.
     is(e.getAnimations().length, 0,
        "getAnimations().length after transition end");
 
     // Wait for the change MutationRecord for seeking the Animation to be
     // delivered, followed by the the removal MutationRecord.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: [], changed: animations, removed: [] },
                     { added: [], changed: [], removed: animations }],
                    "records after transition end");
 
     e.style = "";
   });
 
   // Test that starting a single transition that is cancelled by resetting
@@ -212,26 +203,26 @@ function assert_records(expected, desc) 
     e.style = "transition: background-color 100s; background-color: lime;";
 
     // The transition should cause the creation of a single Animation.
     var animations = e.getAnimations();
     is(animations.length, 1, "getAnimations().length after transition start");
 
     // Wait for the single MutationRecord for the Animation addition to
     // be delivered.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: animations, changed: [], removed: [] }],
                    "records after transition start");
 
     // Cancel the transition by setting transition-property.
     e.style.transitionProperty = "none";
 
     // Wait for the single MutationRecord for the Animation removal to
     // be delivered.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: [], changed: [], removed: animations }],
                    "records after transition end");
 
     e.style = "";
   });
 
   // Test that starting a single transition that is cancelled by setting
   // style to the currently animated value dispatches an added
@@ -241,28 +232,28 @@ function assert_records(expected, desc) 
     e.style = "transition: background-color 100s steps(2, end) -51s; background-color: lime;";
 
     // The transition should cause the creation of a single Animation.
     var animations = e.getAnimations();
     is(animations.length, 1, "getAnimations().length after transition start");
 
     // Wait for the single MutationRecord for the Animation addition to
     // be delivered.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: animations, changed: [], removed: [] }],
                    "records after transition start");
 
     // Cancel the transition by setting the current animation value.
     var value = "rgb(128, 255, 0)";
     is(getComputedStyle(e).backgroundColor, value, "half-way transition value");
     e.style.backgroundColor = value;
 
     // Wait for the single MutationRecord for the Animation removal to
     // be delivered.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: [], changed: [], removed: animations }],
                    "records after transition end");
 
     e.style = "";
   });
 
   // Test that starting a single transition that is cancelled by setting
   // style to a non-interpolable value dispatches an added notification
@@ -272,26 +263,26 @@ function assert_records(expected, desc) 
     e.style = "transition: line-height 100s; line-height: 100px;";
 
     // The transition should cause the creation of a single Animation.
     var animations = e.getAnimations();
     is(animations.length, 1, "getAnimations().length after transition start");
 
     // Wait for the single MutationRecord for the Animation addition to
     // be delivered.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: animations, changed: [], removed: [] }],
                    "records after transition start");
 
     // Cancel the transition by setting line-height to a non-interpolable value.
     e.style.lineHeight = "normal";
 
     // Wait for the single MutationRecord for the Animation removal to
     // be delivered.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: [], changed: [], removed: animations }],
                    "records after transition end");
 
     e.style = "";
   });
 
   // Test that starting a single transition and then reversing it
   // dispatches an added notification, then a simultaneous removed and
@@ -303,17 +294,17 @@ function assert_records(expected, desc) 
     // The transition should cause the creation of a single Animation.
     var animations = e.getAnimations();
     is(animations.length, 1, "getAnimations().length after transition start");
 
     var firstAnimation = animations[0];
 
     // Wait for the single MutationRecord for the Animation addition to
     // be delivered.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: [firstAnimation], changed: [], removed: [] }],
                    "records after transition start");
 
     // Wait for the Animation to be playing, then seek well into
     // the transition.
     yield firstAnimation.ready;
     firstAnimation.currentTime = 50 * MS_PER_SEC;
 
@@ -328,28 +319,28 @@ function assert_records(expected, desc) 
     var secondAnimation = animations[0];
 
     ok(firstAnimation != secondAnimation,
        "second Animation should be different from the first");
 
     // Wait for the change Mutation record from seeking the first animation
     // to be delivered, followed by a subsequent MutationRecord for the removal
     // of the original Animation and the addition of the new Animation.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: [], changed: [firstAnimation], removed: [] },
                     { added: [secondAnimation], changed: [],
                       removed: [firstAnimation] }],
                    "records after transition reversal");
 
     // Cancel the transition.
     e.style.transitionProperty = "none";
 
     // Wait for the single MutationRecord for the Animation removal to
     // be delivered.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: [], changed: [], removed: [secondAnimation] }],
                    "records after transition end");
 
     e.style = "";
   });
 
   // Test that multiple transitions starting and ending on an element
   // at the same time get batched up into a single MutationRecord.
@@ -360,17 +351,17 @@ function assert_records(expected, desc) 
               "color: blue; background-color: lime; line-height: 24px;";
 
     // The transitions should cause the creation of three Animations.
     var animations = e.getAnimations();
     is(animations.length, 3, "getAnimations().length after transition starts");
 
     // Wait for the single MutationRecord for the Animation additions to
     // be delivered.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: animations, changed: [], removed: [] }],
                    "records after transition starts");
 
     // Wait for the Animations to get going.
     yield animations[0].ready;
     is(animations.filter(p => p.playState == "running").length, 3,
        "number of running Animations");
 
@@ -391,27 +382,27 @@ function assert_records(expected, desc) 
 
     is(colorAnimation.length, 1,
        "number of non-running Animations after cancelling one");
     is(otherAnimations.length, 2,
        "number of running Animations after cancelling one");
 
     // Wait for the MutationRecords to be delivered: one for each animation
     // that was seeked, followed by one for the removal of the color animation.
-    yield await_frame();
+    yield waitForFrame();
     assert_records(seekRecords.concat(
                     { added: [], changed: [], removed: colorAnimation }),
                    "records after color transition end");
 
     // Cancel the remaining transitions.
     e.style.transitionProperty = "none";
 
     // Wait for the MutationRecord for the other two Animation
     // removals to be delivered.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: [], changed: [], removed: otherAnimations }],
                    "records after other transition ends");
 
     e.style = "";
   });
 
   // Test that starting a single animation that completes normally
   // dispatches an added notification and then a removed notification.
@@ -423,32 +414,32 @@ function assert_records(expected, desc) 
     var animationEnd = await_event(e, "animationend");
 
     // The animation should cause the creation of a single Animation.
     var animations = e.getAnimations();
     is(animations.length, 1, "getAnimations().length after animation start");
 
     // Wait for the single MutationRecord for the Animation addition to
     // be delivered.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: animations, changed: [], removed: [] }],
                    "records after animation start");
 
     // Advance until near the end of the animation, then wait for it to finish.
     animations[0].currentTime = 99900;
     yield animationEnd;
 
     // After the animation has finished, the Animation should disappear.
     is(e.getAnimations().length, 0,
        "getAnimations().length after animation end");
 
     // Wait for the change MutationRecord from seeking the Animation to
     // be delivered, followed by a further MutationRecord for the Animation
     // removal.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: [], changed: animations, removed: [] },
                     { added: [], changed: [], removed: animations }],
                    "records after animation end");
 
     e.style = "";
   });
 
   // Test that starting a single animation that is cancelled by resetting
@@ -459,26 +450,26 @@ function assert_records(expected, desc) 
     e.style = "animation: anim 100s;";
 
     // The animation should cause the creation of a single Animation.
     var animations = e.getAnimations();
     is(animations.length, 1, "getAnimations().length after animation start");
 
     // Wait for the single MutationRecord for the Animation addition to
     // be delivered.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: animations, changed: [], removed: [] }],
                    "records after animation start");
 
     // Cancel the animation by setting animation-name.
     e.style.animationName = "none";
 
     // Wait for the single MutationRecord for the Animation removal to
     // be delivered.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: [], changed: [], removed: animations }],
                    "records after animation end");
 
     e.style = "";
   });
 
   // Test that starting a single animation that is cancelled by updating
   // the animation-duration property dispatches an added notification and
@@ -488,31 +479,31 @@ function assert_records(expected, desc) 
     e.style = "animation: anim 100s;";
 
     // The animation should cause the creation of a single Animation.
     var animations = e.getAnimations();
     is(animations.length, 1, "getAnimations().length after animation start");
 
     // Wait for the single MutationRecord for the Animation addition to
     // be delivered.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: animations, changed: [], removed: [] }],
                    "records after animation start");
 
     // Advance the animation by a second.
     animations[0].currentTime += 1 * MS_PER_SEC;
 
     // Cancel the animation by setting animation-duration to a value less
     // than a second.
     e.style.animationDuration = "0.1s";
 
     // Wait for the change MutationRecord from seeking the Animation to
     // be delivered, followed by a further MutationRecord for the Animation
     // removal.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: [], changed: animations, removed: [] },
                     { added: [], changed: [], removed: animations }],
                    "records after animation end");
 
     e.style = "";
   });
 
   // Test that starting a single animation that is cancelled by updating
@@ -523,26 +514,26 @@ function assert_records(expected, desc) 
     e.style = "animation: anim 100s;";
 
     // The animation should cause the creation of a single Animation.
     var animations = e.getAnimations();
     is(animations.length, 1, "getAnimations().length after animation start");
 
     // Wait for the single MutationRecord for the Animation addition to
     // be delivered.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: animations, changed: [], removed: [] }],
                    "records after animation start");
 
     // Cancel the animation by setting animation-delay.
     e.style.animationDelay = "-200s";
 
     // Wait for the single MutationRecord for the Animation removal to
     // be delivered.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: [], changed: [], removed: animations }],
                    "records after animation end");
 
     e.style = "";
   });
 
   // Test that starting a single animation that is cancelled by updating
   // the animation-fill-mode property dispatches an added notification and
@@ -555,17 +546,17 @@ function assert_records(expected, desc) 
     var animationEnd = await_event(e, "animationend");
 
     // The animation should cause the creation of a single Animation.
     var animations = e.getAnimations();
     is(animations.length, 1, "getAnimations().length after animation start");
 
     // Wait for the single MutationRecord for the Animation addition to
     // be delivered.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: animations, changed: [], removed: [] }],
                    "records after animation start");
 
     // Advance until near the end of the animation, then wait for it to finish.
     animations[0].currentTime = 99900;
     yield animationEnd;
 
     // The only MutationRecord at this point should be the change from
@@ -573,17 +564,17 @@ function assert_records(expected, desc) 
     assert_records([{ added: [], changed: animations, removed: [] }],
                    "records after animation starts filling");
 
     // Cancel the animation by setting animation-fill-mode.
     e.style.animationFillMode = "none";
 
     // Wait for the single MutationRecord for the Animation removal to
     // be delivered.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: [], changed: [], removed: animations }],
                    "records after animation end");
 
     e.style = "";
   });
 
   // Test that starting a single animation that is cancelled by updating
   // the animation-iteration-count property dispatches an added notification
@@ -594,35 +585,35 @@ function assert_records(expected, desc) 
     e.style = "animation: anim 0.5s infinite;";
 
     // The animation should cause the creation of a single Animation.
     var animations = e.getAnimations();
     is(animations.length, 1, "getAnimations().length after animation start");
 
     // Wait for the single MutationRecord for the Animation addition to
     // be delivered.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: animations, changed: [], removed: [] }],
                    "records after animation start");
 
     // Advance the animation until we are past the first iteration.
     animations[0].currentTime += 1 * MS_PER_SEC;
 
     // The only MutationRecord at this point should be the change from
     // seeking the Animation.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: [], changed: animations, removed: [] }],
                    "records after seeking animations");
 
     // Cancel the animation by setting animation-iteration-count.
     e.style.animationIterationCount = "1";
 
     // Wait for the single MutationRecord for the Animation removal to
     // be delivered.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: [], changed: [], removed: animations }],
                    "records after animation end");
 
     e.style = "";
   });
 
   // Test that starting a single animation that is cancelled by calling
   // cancel() dispatches an added notification and then a removed
@@ -632,32 +623,32 @@ function assert_records(expected, desc) 
     e.style = "animation: anim 100s forwards;";
 
     // The animation should cause the creation of a single Animation.
     var animations = e.getAnimations();
     is(animations.length, 1, "getAnimations().length after animation start");
 
     // Wait for the single MutationRecord for the Animation addition to
     // be delivered.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: animations, changed: [], removed: [] }],
                    "records after animation start");
 
     // Cancel the animation
     animations[0].cancel();
 
     // Wait for the single MutationRecord for the Animation removal to
     // be delivered.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: [], changed: [], removed: animations }],
                    "records after animation end");
 
     // Re-trigger the animation
     animations[0].play();
-    yield await_frame();
+    yield waitForFrame();
 
     // Wait for the single MutationRecord for the Animation (re-)addition to
     // be delivered.
     assert_records([{ added: animations, changed: [], removed: [] }],
                    "records after animation start");
 
     e.style = "";
   });
@@ -677,34 +668,34 @@ function assert_records(expected, desc) 
       e.style = "animation: anim 100s;";
 
       // The animation should cause the creation of a single Animation.
       var animations = e.getAnimations();
       is(animations.length, 1, "getAnimations().length after animation start");
 
       // Wait for the single MutationRecord for the Animation addition to
       // be delivered.
-      yield await_frame();
+      yield waitForFrame();
       assert_records([{ added: animations, changed: [], removed: [] }],
                      "records after animation start");
 
       // Change a property of the animation such that it keeps running.
       e.style[aChangeTest.prop] = aChangeTest.val;
 
       // Wait for the single MutationRecord for the Animation change to
       // be delivered.
-      yield await_frame();
+      yield waitForFrame();
       assert_records([{ added: [], changed: animations, removed: [] }],
                      "records after animation change");
 
       // Cancel the animation.
       e.style.animationName = "none";
 
       // Wait for the addition, change and removal MutationRecords to be delivered.
-      yield await_frame();
+      yield waitForFrame();
       assert_records([{ added: [], changed: [], removed: animations }],
                       "records after animation end");
 
       e.style = "";
     });
   });
 
   // Test that updating a property on the Animation object dispatches a changed
@@ -724,254 +715,254 @@ function assert_records(expected, desc) 
       e.style = "animation: anim 100s forwards";
 
       // The animation should cause the creation of a single Animation.
       var animations = e.getAnimations();
       is(animations.length, 1, "getAnimations().length after animation start");
 
       // Wait for the single MutationRecord for the Animation addition to
       // be delivered.
-      yield await_frame();
+      yield waitForFrame();
       assert_records([{ added: animations, changed: [], removed: [] }],
                      "records after animation start");
 
       // Wait until the animation is playing
       yield animations[0].ready;
 
       // Update the property
       animations[0][aChangeTest.prop] = aChangeTest.val;
 
       // Make a redundant change
       animations[0][aChangeTest.prop] = animations[0][aChangeTest.prop];
 
       // Wait for the single MutationRecord for the Animation change to
       // be delivered.
-      yield await_frame();
+      yield waitForFrame();
       assert_records([{ added: [], changed: animations, removed: [] }],
                      "records after animation property change");
 
       // Cancel the animation.
       e.style = "";
 
       // Wait for the single removal notification.
-      yield await_frame();
+      yield waitForFrame();
       assert_records([{ added: [], changed: [], removed: animations }],
                      "records after animation end");
     });
   });
 
   addAsyncAnimTest("change_id", aOptions, function*() {
     e.style.animation = "anim 100s";
 
     var animation = div.getAnimations()[0];
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: [animation], changed: [], removed: []}],
                    "records after creation");
     animation.id = "new id";
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: [], changed: [animation], removed: []}],
                    "records after id is changed");
 
     animation.id = "new id";
-    yield await_frame();
+    yield waitForFrame();
     assert_records([],
                    "records after assigning same value with id");
 
     e.style.animation = "";
-    yield await_frame();
+    yield waitForFrame();
   });
 
   // Test that making a redundant change to currentTime while an Animation
   // is pause-pending still generates a change MutationRecord since setting
   // the currentTime to any value in this state aborts the pending pause.
   addAsyncAnimTest("change_currentTime_while_pause_pending", aOptions,
     function*() {
     // Start a long animation
     e.style = "animation: anim 100s";
 
     // The animation should cause the creation of a single Animation.
     var animations = e.getAnimations();
     is(animations.length, 1, "getAnimations().length after animation start");
 
     // Wait for the single MutationRecord for the Animation addition to
     // be delivered.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: animations, changed: [], removed: [] }],
                     "records after animation start");
 
     // Wait until the animation is playing
     yield animations[0].ready;
 
     // Pause the animation
     animations[0].pause();
 
     // We are now pause-pending. Even if we make a redundant change to the
     // currentTime, we should still get a change record because setting the
     // currentTime while pause-pending has the effect of cancelling a pause.
     animations[0].currentTime = animations[0].currentTime;
 
     // Wait for the two MutationRecords for the Animation changes to
     // be delivered: one for pausing, one for aborting the pause.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: [], changed: animations, removed: [] },
                     { added: [], changed: animations, removed: [] }],
                     "records after pausing then seeking");
 
     // Cancel the animation.
     e.style = "";
 
     // Wait for the single removal notification.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: [], changed: [], removed: animations }],
                     "records after animation end");
   });
 
   // Test that calling reverse() dispatches a changed notification.
   addAsyncAnimTest("reverse", aOptions, function*() {
     // Start a long animation
     e.style = "animation: anim 100s both";
 
     // The animation should cause the creation of a single Animation.
     var animations = e.getAnimations();
     is(animations.length, 1, "getAnimations().length after animation start");
 
     // Wait for the single MutationRecord for the Animation addition to
     // be delivered.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: animations, changed: [], removed: [] }],
                     "records after animation start");
 
     // Reverse
     animations[0].reverse();
 
     // Wait for the single MutationRecord for the Animation change to
     // be delivered.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: [], changed: animations, removed: [] }],
                     "records after calling reverse()");
 
     // Cancel the animation.
     e.style = "";
 
     // Wait for the single removal notification.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: [], changed: [], removed: animations }],
                     "records after animation end");
   });
 
   // Test that calling reverse() does *not* dispatch a changed notification
   // when playbackRate == 0.
   addAsyncAnimTest("reverse_with_zero_playbackRate", aOptions, function*() {
     // Start a long animation
     e.style = "animation: anim 100s both";
 
     // The animation should cause the creation of a single Animation.
     var animations = e.getAnimations();
     is(animations.length, 1, "getAnimations().length after animation start");
 
     // Wait for the single MutationRecord for the Animation addition to
     // be delivered.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: animations, changed: [], removed: [] }],
                     "records after animation start");
 
     // Seek to the middle and set playbackRate to zero.
     animations[0].currentTime = 50 * MS_PER_SEC;
     animations[0].playbackRate = 0;
 
     // Wait for the MutationRecords, one for each change, to be delivered.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: [], changed: animations, removed: [] },
                     { added: [], changed: animations, removed: [] }],
                     "records after seeking and setting playbackRate");
 
     // Reverse
     animations[0].reverse();
 
     // We should get no notifications.
     assert_records([], "records after calling reverse()");
 
     // Cancel the animation.
     e.style = "";
 
     // Wait for the single removal notification.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: [], changed: [], removed: animations }],
                     "records after animation end");
   });
 
   // Test that calling finish() on a forwards-filling Animation dispatches
   // a changed notification.
   addAsyncAnimTest("finish_with_forwards_fill", aOptions, function*() {
     // Start a long animation
     e.style = "animation: anim 100s forwards";
 
     // The animation should cause the creation of a single Animation.
     var animations = e.getAnimations();
     is(animations.length, 1, "getAnimations().length after animation start");
 
     // Wait for the single MutationRecord for the Animation addition to
     // be delivered.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: animations, changed: [], removed: [] }],
                     "records after animation start");
 
     // Wait until the animation is playing
     yield animations[0].ready;
 
     // Finish
     animations[0].finish();
 
     // Wait for the single MutationRecord for the Animation change to
     // be delivered.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: [], changed: animations, removed: [] }],
                     "records after finish()");
 
     // Redundant finish
     animations[0].finish();
 
     // Wait to ensure no change is dispatched
-    yield await_frame();
+    yield waitForFrame();
     assert_records([], "records after redundant finish()");
 
     // Cancel the animation.
     e.style = "";
 
     // Wait for the single removal notification.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: [], changed: [], removed: animations }],
                     "records after animation end");
   });
 
   // Test that calling finish() on an Animation that does not fill forwards,
   // dispatches a removal notification.
   addAsyncAnimTest("finish_without_fill", aOptions, function*() {
     // Start a long animation
     e.style = "animation: anim 100s";
 
     // The animation should cause the creation of a single Animation.
     var animations = e.getAnimations();
     is(animations.length, 1, "getAnimations().length after animation start");
 
     // Wait for the single MutationRecord for the Animation addition to
     // be delivered.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: animations, changed: [], removed: [] }],
                     "records after animation start");
 
     // Wait until the animation is playing
     yield animations[0].ready;
 
     // Finish
     animations[0].finish();
 
     // Wait for the single MutationRecord for the Animation removal to
     // be delivered.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: [], changed: [], removed: animations }],
                     "records after finishing");
 
     // Cancel the animation.
     e.style = "";
   });
 
   // Test that calling finish() on a paused (but otherwise finished) animation
@@ -981,17 +972,17 @@ function assert_records(expected, desc) 
     e.style = "animation: anim 100s forwards";
 
     // The animation should cause the creation of a single Animation.
     var animations = e.getAnimations();
     is(animations.length, 1, "getAnimations().length after animation start");
 
     // Wait for the single MutationRecord for the Animation addition to
     // be delivered.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: animations, changed: [], removed: [] }],
                     "records after animation start");
 
     // Wait until the animation is playing.
     yield animations[0].ready;
 
     // Finish and pause.
     animations[0].finish();
@@ -1011,42 +1002,42 @@ function assert_records(expected, desc) 
     // Call finish() again.
     animations[0].finish();
     is(animations[0].playState, "finished",
        "playState after finishing from paused state");
 
     // Wait for the single MutationRecord for the Animation change to
     // be delivered. Even though the currentTime does not change, the
     // playState will change.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: [], changed: animations, removed: [] }],
                     "records after finish() and pause()");
 
     // Cancel the animation.
     e.style = "";
 
     // Wait for the single removal notification.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: [], changed: [], removed: animations }],
                     "records after animation end");
   });
 
   // Test that calling finish() on a pause-pending (but otherwise finished)
   // animation dispatches a changed notification.
   addAsyncAnimTest("finish_from_pause_pending", aOptions, function*() {
     // Start a long animation
     e.style = "animation: anim 100s forwards";
 
     // The animation should cause the creation of a single Animation.
     var animations = e.getAnimations();
     is(animations.length, 1, "getAnimations().length after animation start");
 
     // Wait for the single MutationRecord for the Animation addition to
     // be delivered.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: animations, changed: [], removed: [] }],
                     "records after animation start");
 
     // Wait until the animation is playing.
     yield animations[0].ready;
 
     // Finish and pause.
     animations[0].finish();
@@ -1056,44 +1047,44 @@ function assert_records(expected, desc) 
 
     // Call finish() again to abort the pause
     animations[0].finish();
     is(animations[0].playState, "finished",
        "playState after finishing and calling pause()");
 
     // Wait for three MutationRecords for the Animation changes to
     // be delivered: one for each finish(), pause(), finish() operation.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: [], changed: animations, removed: [] },
                     { added: [], changed: animations, removed: [] },
                     { added: [], changed: animations, removed: [] }],
                     "records after finish(), pause(), finish()");
 
     // Cancel the animation.
     e.style = "";
 
     // Wait for the single removal notification.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: [], changed: [], removed: animations }],
                     "records after animation end");
   });
 
   // Test that calling play() on a paused Animation dispatches a changed
   // notification.
   addAsyncAnimTest("play", aOptions, function*() {
     // Start a long, paused animation
     e.style = "animation: anim 100s paused";
 
     // The animation should cause the creation of a single Animation.
     var animations = e.getAnimations();
     is(animations.length, 1, "getAnimations().length after animation start");
 
     // Wait for the single MutationRecord for the Animation addition to
     // be delivered.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: animations, changed: [], removed: [] }],
                     "records after animation start");
 
     // Wait until the animation is ready
     yield animations[0].ready;
 
     // Play
     animations[0].play();
@@ -1103,135 +1094,135 @@ function assert_records(expected, desc) 
     yield animations[0].ready;
     assert_records([{ added: [], changed: animations, removed: [] }],
                     "records after play()");
 
     // Redundant play
     animations[0].play();
 
     // Wait to ensure no change is dispatched
-    yield await_frame();
+    yield waitForFrame();
     assert_records([], "records after redundant play()");
 
     // Cancel the animation.
     e.style = "";
 
     // Wait for the single removal notification.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: [], changed: [], removed: animations }],
                     "records after animation end");
   });
 
   // Test that calling play() on a finished Animation that fills forwards
   // dispatches a changed notification.
   addAsyncAnimTest("play_filling_forwards", aOptions, function*() {
     // Start a long animation with a forwards fill
     e.style = "animation: anim 100s forwards";
 
     // The animation should cause the creation of a single Animation.
     var animations = e.getAnimations();
     is(animations.length, 1, "getAnimations().length after animation start");
 
     // Wait for the single MutationRecord for the Animation addition to
     // be delivered.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: animations, changed: [], removed: [] }],
                     "records after animation start");
 
     // Wait until the animation is ready
     yield animations[0].ready;
 
     // Seek to the end
     animations[0].finish();
 
     // Wait for the single MutationRecord for the Animation change to
     // be delivered.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: [], changed: animations, removed: [] }],
                     "records after finish()");
 
     // Since we are filling forwards, calling play() should produce a
     // change record since the animation remains relevant.
     animations[0].play();
 
     // Wait for the single MutationRecord for the Animation change to
     // be delivered.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: [], changed: animations, removed: [] }],
                     "records after play()");
 
     // Cancel the animation.
     e.style = "";
 
     // Wait for the single removal notification.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: [], changed: [], removed: animations }],
                     "records after animation end");
   });
 
   // Test that calling play() on a finished Animation that does *not* fill
   // forwards dispatches an addition notification.
   addAsyncAnimTest("play_after_finish", aOptions, function*() {
     // Start a long animation
     e.style = "animation: anim 100s";
 
     // The animation should cause the creation of a single Animation.
     var animations = e.getAnimations();
     is(animations.length, 1, "getAnimations().length after animation start");
 
     // Wait for the single MutationRecord for the Animation addition to
     // be delivered.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: animations, changed: [], removed: [] }],
                     "records after animation start");
 
     // Wait until the animation is ready
     yield animations[0].ready;
 
     // Seek to the end
     animations[0].finish();
 
     // Wait for the single MutationRecord for the Animation removal to
     // be delivered.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: [], changed: [], removed: animations }],
                     "records after finish()");
 
     // Since we are *not* filling forwards, calling play() is equivalent
     // to creating a new animation since it becomes relevant again.
     animations[0].play();
 
     // Wait for the single MutationRecord for the Animation addition to
     // be delivered.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: animations, changed: [], removed: [] }],
                     "records after play()");
 
     // Cancel the animation.
     e.style = "";
 
     // Wait for the single removal notification.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: [], changed: [], removed: animations }],
                     "records after animation end");
   });
 
   // Test that calling pause() on an Animation dispatches a changed
   // notification.
   addAsyncAnimTest("pause", aOptions, function*() {
     // Start a long animation
     e.style = "animation: anim 100s";
 
     // The animation should cause the creation of a single Animation.
     var animations = e.getAnimations();
     is(animations.length, 1, "getAnimations().length after animation start");
 
     // Wait for the single MutationRecord for the Animation addition to
     // be delivered.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: animations, changed: [], removed: [] }],
                     "records after animation start");
 
     // Wait until the animation is ready
     yield animations[0].ready;
 
     // Pause
     animations[0].pause();
@@ -1248,34 +1239,34 @@ function assert_records(expected, desc) 
     // Wait to ensure no change is dispatched
     yield animations[0].ready;
     assert_records([], "records after redundant pause()");
 
     // Cancel the animation.
     e.style = "";
 
     // Wait for the single removal notification.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: [], changed: [], removed: animations }],
                     "records after animation end");
   });
 
   // Test that calling pause() on an Animation that is pause-pending
   // does not dispatch an additional changed notification.
   addAsyncAnimTest("pause_while_pause_pending", aOptions, function*() {
     // Start a long animation
     e.style = "animation: anim 100s";
 
     // The animation should cause the creation of a single Animation.
     var animations = e.getAnimations();
     is(animations.length, 1, "getAnimations().length after animation start");
 
     // Wait for the single MutationRecord for the Animation addition to
     // be delivered.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: animations, changed: [], removed: [] }],
                     "records after animation start");
 
     // Wait until the animation is ready
     yield animations[0].ready;
 
     // Pause
     animations[0].pause();
@@ -1287,34 +1278,34 @@ function assert_records(expected, desc) 
     yield animations[0].ready;
     assert_records([{ added: [], changed: animations, removed: [] }],
                     "records after pause()");
 
     // Cancel the animation.
     e.style = "";
 
     // Wait for the single removal notification.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: [], changed: [], removed: animations }],
                     "records after animation end");
   });
 
   // Test that calling play() on an Animation that is pause-pending
   // dispatches a changed notification.
   addAsyncAnimTest("aborted_pause", aOptions, function*() {
     // Start a long animation
     e.style = "animation: anim 100s";
 
     // The animation should cause the creation of a single Animation.
     var animations = e.getAnimations();
     is(animations.length, 1, "getAnimations().length after animation start");
 
     // Wait for the single MutationRecord for the Animation addition to
     // be delivered.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: animations, changed: [], removed: [] }],
                     "records after animation start");
 
     // Wait until the animation is ready
     yield animations[0].ready;
 
     // Pause
     animations[0].pause();
@@ -1327,45 +1318,45 @@ function assert_records(expected, desc) 
     assert_records([{ added: [], changed: animations, removed: [] },
                     { added: [], changed: animations, removed: [] }],
                     "records after aborting a pause()");
 
     // Cancel the animation.
     e.style = "";
 
     // Wait for the single removal notification.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: [], changed: [], removed: animations }],
                     "records after animation end");
   });
 
   // Test that a non-cancelling change to an animation followed immediately by a
   // cancelling change will only send an animation removal notification.
   addAsyncAnimTest("coalesce_change_cancel", aOptions, function*() {
     // Start a long animation.
     e.style = "animation: anim 100s;";
 
     // The animation should cause the creation of a single Animation.
     var animations = e.getAnimations();
     is(animations.length, 1, "getAnimations().length after animation start");
 
     // Wait for the single MutationRecord for the Animation addition to
     // be delivered.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: animations, changed: [], removed: [] }],
                    "records after animation start");
 
     // Update the animation's delay such that it is still running.
     e.style.animationDelay = "-1s";
 
     // Then cancel the animation by updating its duration.
     e.style.animationDuration = "0.5s";
 
     // We should get a single removal notification.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: [], changed: [], removed: animations }],
                    "records after animation end");
 
     e.style = "";
   });
 
   // Test that attempting to start an animation that should already be finished
   // does not send any notifications.
@@ -1373,42 +1364,42 @@ function assert_records(expected, desc) 
     // Start an animation that should already be finished.
     e.style = "animation: anim 1s -2s;";
 
     // The animation should cause no Animations to be created.
     var animations = e.getAnimations();
     is(animations.length, 0, "getAnimations().length after animation start");
 
     // And we should get no notifications.
-    yield await_frame();
+    yield waitForFrame();
     assert_records([], "records after attempted animation start");
 
     e.style = "";
   });
 
   addAsyncAnimTest("animtion_order_change", aOptions, function*() {
     e.style.animation = "anim 100s, anotherAnim 100s";
 
     var animations = e.getAnimations();
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: animations, changed: [], removed: []}],
                    "records after creation");
     e.style.animation = "anotherAnim 100s, anim 100s";
     animations = e.getAnimations();
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: [], changed: animations, removed: []}],
                    "records after the order is changed");
 
     e.style.animation = "anotherAnim 100s, anim 100s";
-    yield await_frame();
+    yield waitForFrame();
     assert_records([],
                    "no records after applying the same order");
 
     e.style.animation = "";
-    yield await_frame();
+    yield waitForFrame();
   });
 
 });
 
 addAsyncAnimTest("tree_ordering", { observe: div, subtree: true }, function*() {
   // Add style for pseudo elements
   var extraStyle = document.createElement('style');
   document.head.appendChild(extraStyle);
@@ -1467,17 +1458,17 @@ addAsyncAnimTest("tree_ordering", { obse
   //
   // That is because we don't do any document-level batching of animation
   // mutation records when we flush styles. We may introduce that in the
   // future but for now all we are interested in testing here is that the order
   // these records are dispatched is consistent between runs.
   //
   // We currently expect to get records in order div::after, childA, childB,
   // childB::before, div, div::before
-  yield await_frame();
+  yield waitForFrame();
   assert_records([{ added: divAfterAnimations, changed: [], removed: [] },
                   { added: childAAnimations, changed: [], removed: [] },
                   { added: childBAnimations, changed: [], removed: [] },
                   { added: childBPseudoAnimations, changed: [], removed: [] },
                   { added: divAnimations, changed: [], removed: [] },
                   { added: divBeforeAnimations, changed: [], removed: [] }],
                  "records after simultaneous animation start");
 
@@ -1531,448 +1522,448 @@ addAsyncAnimTest("tree_ordering", { obse
   extraStyle.remove();
 });
 
 [ div, pseudoTarget ].forEach(function(target) {
   addAsyncAnimTest("change_duration_and_currenttime",
                    { observe: div, subtree: true }, function*() {
     var anim = target.animate({ opacity: [ 0, 1 ] }, 200 * MS_PER_SEC);
 
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: [anim], changed: [], removed: [] }],
                    "records after animation is added");
 
     anim.effect.timing.duration = 100 * MS_PER_SEC;
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: [], changed: [anim], removed: [] }],
                    "records after duration is changed");
 
     anim.effect.timing.duration = 100 * MS_PER_SEC;
-    yield await_frame();
+    yield waitForFrame();
     assert_records([], "records after assigning same value");
 
     anim.currentTime = anim.effect.timing.duration * 2;
     anim.finish();
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: [], changed: [], removed: [anim] }],
                    "records after animation end");
 
     anim.effect.timing.duration = anim.effect.timing.duration * 3;
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: [anim], changed: [], removed: [] }],
                    "records after animation restarted");
 
     anim.effect.timing.duration = "auto";
-    yield await_frame();
+    yield waitForFrame();
     assert_records([{ added: [], changed: [], removed: [anim] }],
                    "records after duration set \"auto\"");
 
     anim.effect.timing.duration = "auto";
-    yield await_frame();
+    yield waitForFrame();
     assert_records([], "records after assigning same value \"auto\"");
 
     anim.cancel();
-    yield await_frame();
+    yield waitForFrame();
   });
 });
 
 addAsyncAnimTest("change_enddelay_and_currenttime",
                  { observe: div, subtree: true }, function*() {
   var anim = div.animate({ opacity: [ 0, 1 ] }, { duration: 100 * MS_PER_SEC });
 
-  yield await_frame();
+  yield waitForFrame();
   assert_records([{ added: [anim], changed: [], removed: [] }],
                  "records after animation is added");
 
   anim.effect.timing.endDelay = 10 * MS_PER_SEC;
-  yield await_frame();
+  yield waitForFrame();
   assert_records([{ added: [], changed: [anim], removed: [] }],
                  "records after endDelay is changed");
 
   anim.effect.timing.endDelay = 10 * MS_PER_SEC;
-  yield await_frame();
+  yield waitForFrame();
   assert_records([], "records after assigning same value");
 
   anim.currentTime = 109 * MS_PER_SEC;
-  yield await_frame();
+  yield waitForFrame();
   assert_records([{ added: [], changed: [], removed: [anim] }],
                  "records after currentTime during endDelay");
 
   anim.effect.timing.endDelay = -110 * MS_PER_SEC;
-  yield await_frame();
+  yield waitForFrame();
   assert_records([], "records after assigning negative value");
 
   anim.cancel();
-  yield await_frame();
+  yield waitForFrame();
 });
 
 addAsyncAnimTest("change_enddelay_and_currenttime",
                  { observe: div, subtree: true }, function*() {
   var anim = div.animate({ opacity: [ 0, 1 ] },
                          { duration: 100 * MS_PER_SEC,
                            endDelay: -100 * MS_PER_SEC });
-  yield await_frame();
+  yield waitForFrame();
   assert_records([], "records after animation is added");
 });
 
 addAsyncAnimTest("change_iterations",
                  { observe: div, subtree: true }, function*() {
   var anim = div.animate({ opacity: [ 0, 1 ] }, 100 * MS_PER_SEC);
 
-  yield await_frame();
+  yield waitForFrame();
   assert_records([{ added: [anim], changed: [], removed: [] }],
                  "records after animation is added");
 
   anim.effect.timing.iterations = 2;
-  yield await_frame();
+  yield waitForFrame();
   assert_records([{ added: [], changed: [anim], removed: [] }],
                  "records after iterations is changed");
 
   anim.effect.timing.iterations = 2;
-  yield await_frame();
+  yield waitForFrame();
   assert_records([], "records after assigning same value");
 
   anim.effect.timing.iterations = 0;
-  yield await_frame();
+  yield waitForFrame();
   assert_records([{ added: [], changed: [], removed: [anim] }],
                  "records after animation end");
 
   anim.effect.timing.iterations = Infinity;
-  yield await_frame();
+  yield waitForFrame();
   assert_records([{ added: [anim], changed: [], removed: [] }],
                  "records after animation restarted");
 
   anim.cancel();
-  yield await_frame();
+  yield waitForFrame();
   assert_records([{ added: [], changed: [], removed: [anim] }],
                  "records after animation end");
 });
 
 addAsyncAnimTest("change_delay",
                  { observe: div, subtree: true }, function*() {
   var anim = div.animate({ opacity: [ 0, 1 ] }, 100000);
 
-  yield await_frame();
+  yield waitForFrame();
   assert_records([{ added: [anim], changed: [], removed: [] }],
                  "records after animation is added");
 
   anim.effect.timing.delay = 100;
-  yield await_frame();
+  yield waitForFrame();
   assert_records([{ added: [], changed: [anim], removed: [] }],
                  "records after delay is changed");
 
   anim.effect.timing.delay = 100;
-  yield await_frame();
+  yield waitForFrame();
   assert_records([], "records after assigning same value");
 
   anim.effect.timing.delay = -100000;
-  yield await_frame();
+  yield waitForFrame();
   assert_records([{ added: [], changed: [], removed: [anim] }],
                  "records after animation end");
 
   anim.effect.timing.delay = 0;
-  yield await_frame();
+  yield waitForFrame();
   assert_records([{ added: [anim], changed: [], removed: [] }],
                  "records after animation restarted");
 
   anim.cancel();
-  yield await_frame();
+  yield waitForFrame();
   assert_records([{ added: [], changed: [], removed: [anim] }],
                  "records after animation end");
 });
 
 addAsyncAnimTest("change_easing",
                  { observe: div, subtree: true }, function*() {
   var anim = div.animate({ opacity: [ 0, 1 ] },
                          { duration: 100 * MS_PER_SEC,
                            easing: "steps(2, start)" });
 
-  yield await_frame();
+  yield waitForFrame();
   assert_records([{ added: [anim], changed: [], removed: [] }],
                  "records after animation is added");
 
   anim.effect.timing.easing = "steps(2, end)";
-  yield await_frame();
+  yield waitForFrame();
   assert_records([{ added: [], changed: [anim], removed: [] }],
                  "records after easing is changed");
 
   anim.effect.timing.easing = "steps(2, end)";
-  yield await_frame();
+  yield waitForFrame();
   assert_records([], "records after assigning same value");
 
   anim.cancel();
-  yield await_frame();
+  yield waitForFrame();
 });
 
 addAsyncAnimTest("negative_delay_in_constructor",
                  { observe: div, subtree: true }, function*() {
   var anim = div.animate({ opacity: [ 0, 1 ] },
                          { duration: 100, delay: -100 });
-  yield await_frame();
+  yield waitForFrame();
   assert_records([], "records after assigning negative value");
 });
 
 addAsyncAnimTest("exclude_animations_targeting_pseudo_elements",
                  { observe: div, subtree: false }, function*() {
   var anim = div.animate({ opacity: [ 0, 1 ] },
                          { duration: 100 * MS_PER_SEC });
   var pAnim = pseudoTarget.animate({ opacity: [ 0, 1 ] },
                                    { duration: 100 * MS_PER_SEC });
 
-  yield await_frame();
+  yield waitForFrame();
   assert_records([{ added: [anim], changed: [], removed: [] }],
                  "records after animation is added");
 
   anim.finish();
   pAnim.finish();
-  yield await_frame();
+  yield waitForFrame();
   assert_records([{ added: [], changed: [], removed: [anim] }],
                  "records after animation is finished");
 });
 
 addAsyncAnimTest("create_animation_without_target",
                  { observe: document, subtree: true }, function*() {
   var effect = new KeyframeEffectReadOnly(null,
                                           { opacity: [ 0, 1 ] },
                                           { duration: 10000 });
   var anim = new Animation(effect, document.timeline);
   anim.play();
-  yield await_frame();
+  yield waitForFrame();
   assert_records([], "no records after animation is added");
 
   anim.cancel();
-  yield await_frame();
+  yield waitForFrame();
   assert_records([], "no records after animation is removed");
 });
 
 addAsyncAnimTest("set_animation_target",
                  { observe: document, subtree: true }, function*() {
   var anim = div.animate({ opacity: [ 0, 1 ] },
                          { duration: 100 * MS_PER_SEC });
 
-  yield await_frame();
+  yield waitForFrame();
   assert_records([{ added: [anim], changed: [], removed: [] }],
                  "records after animation is added");
 
   anim.effect.target = null;
-  yield await_frame();
+  yield waitForFrame();
   assert_records([{ added: [], changed: [], removed: [anim] }],
                  "records after setting null");
 
   anim.effect.target = div;
-  yield await_frame();
+  yield waitForFrame();
   assert_records([{ added: [anim], changed: [], removed: [] }],
                  "records after setting a target");
 
   var newTarget = document.createElement("div");
   document.body.appendChild(newTarget);
   anim.effect.target = newTarget;
-  yield await_frame();
+  yield waitForFrame();
   assert_records([{ added: [], changed: [], removed: [anim] },
                   { added: [anim], changed: [], removed: [] }],
                  "records after setting a different target");
 
   anim.cancel();
-  yield await_frame();
+  yield waitForFrame();
   assert_records([{ added: [], changed: [], removed: [anim] }],
                  "records after animation ends");
 
   newTarget.remove();
 });
 
 addAsyncAnimTest("set_redundant_animation_target",
                  { observe: div, subtree: true }, function*() {
   var anim = div.animate({ opacity: [ 0, 1 ] },
                          { duration: 100 * MS_PER_SEC });
-  yield await_frame();
+  yield waitForFrame();
   assert_records([{ added: [anim], changed: [], removed: [] }],
                  "records after animation is added");
 
   anim.effect.target = div;
-  yield await_frame();
+  yield waitForFrame();
   assert_records([], "no records after setting the same target");
 
   anim.effect.target = null;
-  yield await_frame();
+  yield waitForFrame();
   assert_records([{ added: [], changed: [], removed: [anim] }],
                  "records after setting null");
 
   anim.effect.target = null;
-  yield await_frame();
+  yield waitForFrame();
   assert_records([], "records after setting redundant null");
 
   anim.cancel();
-  yield await_frame();
+  yield waitForFrame();
 });
 
 addAsyncAnimTest("set_null_animation_effect",
                  { observe: div, subtree: true }, function*() {
   var anim = div.animate({ opacity: [ 0, 1 ] },
                          { duration: 100 * MS_PER_SEC });
-  yield await_frame();
+  yield waitForFrame();
   assert_records([{ added: [anim], changed: [], removed: [] }],
                  "records after animation is added");
 
   anim.effect = null;
-  yield await_frame();
+  yield waitForFrame();
   assert_records([{ added: [], changed: [], removed: [anim] }],
                  "records after animation is removed");
 
   anim.cancel();
-  yield await_frame();
+  yield waitForFrame();
 });
 
 addAsyncAnimTest("set_effect_on_null_effect_animation",
                  { observe: div, subtree: true }, function*() {
   var anim = new Animation();
   anim.play();
   anim.effect = new KeyframeEffect(div, { opacity: [ 0, 1 ] },
                                    100 * MS_PER_SEC);
-  yield await_frame();
+  yield waitForFrame();
   assert_records([{ added: [anim], changed: [], removed: [] }],
                  "records after animation is added");
 
   anim.cancel();
-  yield await_frame();
+  yield waitForFrame();
 });
 
 addAsyncAnimTest("replace_effect_targeting_on_the_same_element",
                  { observe: div, subtree: true }, function*() {
   var anim = div.animate({ marginLeft: [ "0px", "100px" ] },
                          100 * MS_PER_SEC);
-  yield await_frame();
+  yield waitForFrame();
   assert_records([{ added: [anim], changed: [], removed: [] }],
                  "records after animation is added");
 
   anim.effect = new KeyframeEffect(div, { opacity: [ 0, 1 ] },
                                    100 * MS_PER_SEC);
-  yield await_frame();
+  yield waitForFrame();
   assert_records([{ added: [], changed: [anim], removed: [] }],
                  "records after replace effects");
 
   anim.cancel();
-  yield await_frame();
+  yield waitForFrame();
 });
 
 addAsyncAnimTest("replace_effect_targeting_on_the_same_element_not_in_effect",
                  { observe: div, subtree: true }, function*() {
   var anim = div.animate({ marginLeft: [ "0px", "100px" ] },
                          100 * MS_PER_SEC);
-  yield await_frame();
+  yield waitForFrame();
   assert_records([{ added: [anim], changed: [], removed: [] }],
                  "records after animation is added");
 
   anim.currentTime = 60 * MS_PER_SEC;
-  yield await_frame();
+  yield waitForFrame();
   assert_records([{ added: [], changed: [anim], removed: [] }],
                  "records after animation is changed");
 
   anim.effect = new KeyframeEffect(div, { opacity: [ 0, 1 ] },
                                    50 * MS_PER_SEC);
-  yield await_frame();
+  yield waitForFrame();
   assert_records([{ added: [], changed: [], removed: [anim] }],
                  "records after replacing effects");
 
   anim.cancel();
-  yield await_frame();
+  yield waitForFrame();
 });
 
 addAsyncAnimTest("set_effect_with_previous_animation",
                  { observe: div, subtree: true }, function*() {
   var child = document.createElement("div");
   div.appendChild(child);
 
   var anim1 = div.animate({ marginLeft: [ "0px", "50px" ] },
                           100 * MS_PER_SEC);
   var anim2 = child.animate({ marginLeft: [ "0px", "100px" ] },
                               50 * MS_PER_SEC);
-  yield await_frame();
+  yield waitForFrame();
   assert_records([{ added: [anim1], changed: [], removed: [] },
                   { added: [anim2], changed: [], removed: [] }],
                  "records after animation is added");
 
   // After setting a new effect, we remove the current animation, anim1, because
   // it is no longer attached to |div|, and then remove the previous animation,
   // anim2. Finally, add back the anim1 which is in effect on |child| now.
   // In addition, we sort them by tree order and they are batched.
   anim1.effect = anim2.effect;
-  yield await_frame();
+  yield waitForFrame();
   assert_records([{ added: [], changed: [], removed: [anim1] },       // div
                   { added: [anim1], changed: [], removed: [anim2] }], // child
                  "records after animation effects are changed");
 
   anim1.cancel();
   anim2.cancel();
   child.remove();
-  yield await_frame();
+  yield waitForFrame();
 });
 
 addAsyncAnimTest("set_spacing",
                  { observe: div, subtree: true }, function*() {
   var anim = div.animate([ { marginLeft: "0px" },
                            { marginLeft: "-20px" },
                            { marginLeft: "100px" },
                            { marginLeft: "50px" } ],
                          { duration: 100 * MS_PER_SEC });
-  yield await_frame();
+  yield waitForFrame();
   assert_records([{ added: [anim], changed: [], removed: [] }],
                  "records after animation is added");
 
   anim.effect.spacing = "paced(margin-left)";
-  yield await_frame();
+  yield waitForFrame();
   assert_records([{ added: [], changed: [anim], removed: [] }],
                  "records after animation is changed");
 
   anim.cancel();
-  yield await_frame();
+  yield waitForFrame();
   assert_records([{ added: [], changed: [], removed: [anim] }],
                  "records after animation end");
 });
 
 addAsyncAnimTest("set_spacing_on_a_non-animatable_property",
                  { observe: div, subtree: true }, function*() {
   var anim = div.animate([ { marginLeft: "0px" },
                            { marginLeft: "-20px" },
                            { marginLeft: "100px" },
                            { marginLeft: "50px" } ],
                          { duration: 100 * MS_PER_SEC,
                            spacing: "paced(margin-left)" });
-  yield await_frame();
+  yield waitForFrame();
   assert_records([{ added: [anim], changed: [], removed: [] }],
                  "records after animation is added");
 
   anim.effect.spacing = "paced(animation-duration)";
-  yield await_frame();
+  yield waitForFrame();
   assert_records([{ added: [], changed: [anim], removed: [] }],
                  "records after setting a non-animatable paced property");
 
   anim.cancel();
-  yield await_frame();
+  yield waitForFrame();
   assert_records([{ added: [], changed: [], removed: [anim] }],
                  "records after animation end");
 });
 
 addAsyncAnimTest("set_the_same_spacing",
                  { observe: div, subtree: true }, function*() {
   var anim = div.animate([ { marginLeft: "0px" },
                            { marginLeft: "-20px" },
                            { marginLeft: "100px" },
                            { marginLeft: "50px" } ],
                          { duration: 100 * MS_PER_SEC,
                            spacing: "paced(margin-left)" });
-  yield await_frame();
+  yield waitForFrame();
   assert_records([{ added: [anim], changed: [], removed: [] }],
                  "records after animation is added");
 
   anim.effect.spacing = "paced(margin-left)";
-  yield await_frame();
+  yield waitForFrame();
   assert_records([], "no record after setting the same spacing");
 
   anim.cancel();
-  yield await_frame();
+  yield waitForFrame();
   assert_records([{ added: [], changed: [], removed: [anim] }],
                  "records after animation end");
 });
 
 // Run the tests.
 SimpleTest.requestLongerTimeout(2);
 SimpleTest.waitForExplicitFinish();