--- a/layout/style/test/test_animations.html
+++ b/layout/style/test/test_animations.html
@@ -1184,20 +1184,25 @@ div.style.animation = "kf1 1s -0.1s ease
 is_approx(px_to_num(cs.marginTop), 100 - 50 * gTF.ease_in(0.2), 0.01,
           "delay and implicit starting values test");
 done_div();
 
 // test large negative delay that causes the animation to start
 // in the fourth iteration
 new_div("animation: anim2 1s -3.6s ease-in 5 alternate forwards");
 listen(); // rely on no flush having happened yet
+cs.animationName; // flush styles so animation is created
+advance_clock(0); // complete pending animation start
 is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.4), 0.01,
           "large negative delay test at 0ms");
 check_events([{ type: 'animationstart', target: div,
                 animationName: 'anim2', elapsedTime: 3.6,
+                pseudoElement: "" },
+              { type: 'animationiteration', target: div,
+                animationName: 'anim2', elapsedTime: 3.6,
                 pseudoElement: "" }],
              "right after start in large negative delay test");
 advance_clock(380);
 is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.02), 0.01,
           "large negative delay test at 380ms");
 check_events([]);
 advance_clock(20);
 is(cs.marginRight, "0px", "large negative delay test at 400ms");
@@ -1563,17 +1568,18 @@ check_events([{ type: 'animationstart', 
               { type: 'animationend', target: div,
                 animationName: 'anim2', elapsedTime: 2,
                 pseudoElement: "" }],
              "events after skipping past event moments");
 done_div();
 
 new_div("animation: anim2 1s -2s");
 listen();
-advance_clock(0);
+cs.animationName; // build animation
+advance_clock(0); // finish pending
 check_events([{ type: 'animationstart', target: div,
                 animationName: 'anim2', elapsedTime: 1,
                 pseudoElement: "" },
               { type: 'animationend', target: div,
                 animationName: 'anim2', elapsedTime: 1,
                 pseudoElement: "" }],
              "events after skipping over animation with negative delay");
 done_div();
@@ -1728,17 +1734,18 @@ is(cs.getPropertyValue("margin-right"), 
    "margin-right during forwards fill of infinitely repeating and " +
    "alternate-reverse zero-duration animation");
 done_div();
 
 // Test with negative delay
 new_div("margin-right: 200px;"
         + " animation: anim2 0s -1s both reverse 12.7 linear");
 listen();
-advance_clock(0);
+cs.animationName; // build animation
+advance_clock(0); // finish pending
 is(cs.getPropertyValue("margin-right"), "30px",
    "margin-right during forwards fill of reversed and repeated " +
    "zero-duration animation with negative delay");
 check_events([{ type: 'animationstart', target: div,
                 animationName: 'anim2', elapsedTime: 0,
                 pseudoElement: "" },
               { type: 'animationend', target: div,
                 animationName: 'anim2', elapsedTime: 0,

--- a/layout/style/test/test_animations_event_order.html
+++ b/layout/style/test/test_animations_event_order.html
@@ -87,16 +87,17 @@ function checkEventOrder(...args) {
 
 var divs = [ document.createElement('div'),
              document.createElement('div'),
              document.createElement('div') ];
 divs.forEach((div, i) => {
   gDisplay.appendChild(div);
   div.setAttribute('style', 'animation: anim 10s');
   div.setAttribute('id', 'div' + i);
+  getComputedStyle(div).animationName; // trigger building of animation
 });
 
 advance_clock(0);
 checkEventOrder([ divs[0], 'animationstart' ],
                 [ divs[1], 'animationstart' ],
                 [ divs[2], 'animationstart' ],
                 'Simultaneous start on siblings');
 
@@ -119,16 +120,17 @@ divs = [ document.createElement('div'),
 
 gDisplay.appendChild(divs[0]);
 gDisplay.appendChild(divs[1]);
 divs[0].appendChild(divs[2]);
 
 divs.forEach((div, i) => {
   div.setAttribute('style', 'animation: anim 10s');
   div.setAttribute('id', 'div' + i);
+  getComputedStyle(div).animationName; // trigger building of animation
 });
 
 advance_clock(0);
 checkEventOrder([ divs[0], 'animationstart' ],
                 [ divs[2], 'animationstart' ],
                 [ divs[1], 'animationstart' ],
                 'Simultaneous start on children');
 
@@ -158,16 +160,18 @@ divs.forEach((div, i) => {
   div.setAttribute('id', 'div' + i);
 });
 
 var extraStyle = document.createElement('style');
 document.head.appendChild(extraStyle);
 var sheet = extraStyle.sheet;
 sheet.insertRule('#div0::after { animation: anim 10s }', 0);
 sheet.insertRule('#div0::before { animation: anim 10s }', 1);
+getComputedStyle(divs[0]).animationName; // build animation
+getComputedStyle(divs[1]).animationName; // build animation
 
 advance_clock(0);
 checkEventOrder([ divs[0], 'animationstart' ],
                 [ divs[0], '::before', 'animationstart' ],
                 [ divs[0], '::after', 'animationstart' ],
                 [ divs[1], 'animationstart' ],
                 'Simultaneous start on pseudo-elements');
 
@@ -207,16 +211,17 @@ divs = [];
 // 2b. Test different events within the one element
 
 var div = document.createElement('div');
 gDisplay.appendChild(div);
 div.style.animation = 'anim 4s 2, ' +   // Repeat at t=4s
                       'anim 10s 5s, ' + // Start at t=5s
                       'anim 3s';        // End at t=3s
 div.setAttribute('id', 'div');
+getComputedStyle(div).animationName; // build animation
 
 advance_clock(0);
 advance_clock(5000);
 
 checkEventOrder([ div, 'animationstart' ],
                 [ div, 'animationstart' ],
                 [ div, 'animationend' ],
                 [ div, 'animationiteration' ],
@@ -256,16 +261,17 @@ divs = [];
 // 3. TESTS FOR SORTING BY animation-name POSITION
 
 // 3a. Test animation-name position
 
 div = document.createElement('div');
 gDisplay.appendChild(div);
 div.style.animation = 'animA 10s, animB 5s, animC 5s 2';
 div.setAttribute('id', 'div');
+getComputedStyle(div).animationName; // build animation
 
 advance_clock(0);
 
 checkEventOrder([ 'animA', 'animationstart' ],
                 [ 'animB', 'animationstart' ],
                 [ 'animC', 'animationstart' ],
                 'Sorting of simultaneous animationstart events by ' +
                 'animation-name');

--- a/layout/style/test/test_animations_omta.html
+++ b/layout/style/test/test_animations_omta.html
@@ -1399,16 +1399,19 @@ addAsyncAnimTest(function *() {
   // in the fourth iteration
   new_div("animation: anim2 1s -3.6s ease-in 5 alternate forwards");
   listen();
   yield waitForPaintsFlushed();
   omta_is_approx("opacity", gTF.ease_in(0.4), 0.01, RunningOn.Compositor,
                  "large negative delay test at 0ms");
   check_events([{ type: 'animationstart', target: gDiv,
                   animationName: 'anim2', elapsedTime: 3.6,
+                  pseudoElement: "" },
+                { type: 'animationiteration', target: gDiv,
+                  animationName: 'anim2', elapsedTime: 3.6,
                   pseudoElement: "" }],
                "right after start in large negative delay test");
   advance_clock(380);
   omta_is_approx("opacity", gTF.ease_in(0.02), 0.01, RunningOn.Compositor,
                  "large negative delay test at 380ms");
   check_events([]);
   advance_clock(20);
   omta_is("opacity", 0, RunningOn.Compositor,