diff --git a/layout/reftests/transform-3d/animate-backface-hidden.html b/layout/reftests/transform-3d/animate-backface-hidden.html
index dc99d16823a3..f52b912f663f 100644
--- a/layout/reftests/transform-3d/animate-backface-hidden.html
+++ b/layout/reftests/transform-3d/animate-backface-hidden.html
@@ -16,6 +16,8 @@ body { padding: 50px }
   background: blue;
   height: 200px; width: 200px;
   backface-visibility: hidden;
+  /* use a -99.9s delay to start at 99.9% and then move to 0% */
+  animation: flip 100s -99.9s linear 2 paused;
 }
 
 </style>
@@ -25,6 +27,15 @@ body { padding: 50px }
 
 <script>
 
+document.getElementById("test")
+        .addEventListener("animationstart", StartListener);
+
+function StartListener(event) {
+  var test = document.getElementById("test");
+  test.style.animationPlayState = 'running';
+  test.addEventListener("animationiteration", IterationListener);
+}
+
 function IterationListener(event) {
   setTimeout(RemoveReftestWait, 0);
 }
@@ -33,13 +44,4 @@ function RemoveReftestWait() {
   document.documentElement.classList.remove("reftest-wait");
 }
 
-document.addEventListener('MozReftestInvalidate', () => {
-  test.addEventListener("animationstart", () => {
-    test.style.animationPlayState = 'running';
-    test.addEventListener("animationiteration", IterationListener);
-  });
-  /* use a -99.9s delay to start at 99.9% and then move to 0% */
-  test.style.animation = 'flip 100s -99.9s linear 2 paused';
-}, false);
-
 </script>
diff --git a/layout/reftests/transform-3d/animate-preserve3d-child.html b/layout/reftests/transform-3d/animate-preserve3d-child.html
index fcf77f9756a3..5ac5f290cfd9 100644
--- a/layout/reftests/transform-3d/animate-preserve3d-child.html
+++ b/layout/reftests/transform-3d/animate-preserve3d-child.html
@@ -1,5 +1,5 @@
 <!DOCTYPE HTML>
-<html class="reftest-wait reftest-no-flush">
+<html class="reftest-wait">
 <title>Testcase, bug 1176969</title>
 <style>
 
@@ -17,6 +17,8 @@ body { padding: 50px }
   height: 200px; width: 200px;
   border: 1px solid black;
   transform-style: preserve-3d;
+  /* use a -99.9s delay to start at 99.9% and then move to 0% */
+  animation: spin 100s -99.9s linear 2;
 }
 
 @keyframes noop {
@@ -27,6 +29,7 @@ body { padding: 50px }
   height: 100px; width: 100px; margin: 50px;
   background: yellow;
   box-shadow: 3px 3px olive;
+  animation: noop infinite 10s linear;
 }
 
 </style>
@@ -40,6 +43,9 @@ body { padding: 50px }
 
 <script>
 
+document.getElementById("parent")
+        .addEventListener("animationiteration", IterationListener);
+
 function IterationListener(event) {
   setTimeout(RemoveReftestWait, 0);
 }
@@ -48,13 +54,4 @@ function RemoveReftestWait() {
   document.documentElement.classList.remove("reftest-wait");
 }
 
-document.addEventListener('MozReftestInvalidate', () => {
-  const parentElement = document.getElementById('parent');
-  parentElement.addEventListener('animationiteration', IterationListener);
-
-  /* use a -99.9s delay to start at 99.9% and then move to 0% */
-  parentElement.style.animation = 'spin 100s -99.9s linear 2';
-  child.style.animation = 'noop infinite 10s linear';
-}, false);
-
 </script>
diff --git a/layout/reftests/transform-3d/animate-preserve3d-parent.html b/layout/reftests/transform-3d/animate-preserve3d-parent.html
index 0131d33e6f15..9aa8816d3f89 100644
--- a/layout/reftests/transform-3d/animate-preserve3d-parent.html
+++ b/layout/reftests/transform-3d/animate-preserve3d-parent.html
@@ -1,5 +1,5 @@
 <!DOCTYPE HTML>
-<html class="reftest-wait reftest-no-flush">
+<html class="reftest-wait">
 <title>Testcase, bug 1176969</title>
 <style>
 
@@ -17,6 +17,8 @@ body { padding: 50px }
   height: 200px; width: 200px;
   border: 1px solid black;
   transform-style: preserve-3d;
+  /* use a -99.9s delay to start at 99.9% and then move to 0% */
+  animation: spin 100s -99.9s linear 2 paused;
 }
 
 #child {
@@ -37,6 +39,14 @@ body { padding: 50px }
 
 <script>
 
+document.getElementById("parent").addEventListener("animationstart", StartListener);
+
+function StartListener(event) {
+  var test = document.getElementById("parent");
+  test.style.animationPlayState = 'running';
+  test.addEventListener("animationiteration", IterationListener);
+}
+
 function IterationListener(event) {
   setTimeout(RemoveReftestWait, 0);
 }
@@ -45,12 +55,4 @@ function RemoveReftestWait() {
   document.documentElement.classList.remove("reftest-wait");
 }
 
-document.addEventListener('MozReftestInvalidate', () => {
-  const test = document.getElementById("parent");
-  test.addEventListener("animationiteration", IterationListener);
-
-  /* use a -99.9s delay to start at 99.9% and then move to 0% */
-  test.style.animation = 'spin 100s -99.9s linear 2';
-}, false);
-
 </script>
