--- a/layout/reftests/css-animations/no-stacking-context-opacity-removing-animation-in-delay.html
+++ b/layout/reftests/css-animations/no-stacking-context-opacity-removing-animation-in-delay.html
@@ -23,25 +23,26 @@ span {
 <span></span>
 <div id="test"></div>
 <script>
 window.addEventListener("load", () => {
   var target = document.getElementById("test");
   target.style.animation = "Opacity0 100s 100s";
 
   // We need to wait for MozAfterPaint instead of requestAnimationFrame to
-  // ensure the stacking context has been updated (removed) on the compositor
-  // before we snapshot.
+  // ensure the stacking context has been updated on the compositor.
   window.addEventListener("MozAfterPaint", function firstPaint() {
     window.removeEventListener("MozAfterPaint", firstPaint, false);
     // Here we have CSS animation on 100% opacity style element, so
     // there should be a stacking context.
 
     target.style.animation = "";
-    window.addEventListener("MozAfterPaint", function secondPaint() {
-      window.removeEventListener("MozAfterPaint", secondPaint, false);
+
+    // This time we don't need to wait for MozAfterPaint because reftest tool
+    // will be received MozAferPaint event.
+    requestAnimationFrame(() => {
       // Now we have only 100% opacity style, so we should not create any
       // stacking context.
       document.documentElement.classList.remove("reftest-wait");
-    }, false);
+    });
   }, false);
 });
 </script>

--- a/layout/reftests/css-animations/no-stacking-context-transform-removing-animation-in-delay.html
+++ b/layout/reftests/css-animations/no-stacking-context-transform-removing-animation-in-delay.html
@@ -23,25 +23,25 @@ span {
 <span></span>
 <div id="test"></div>
 <script>
 window.addEventListener("load", () => {
   var target = document.getElementById("test");
   target.style.animation = "TransformNone 100s 100s";
 
   // We need to wait for MozAfterPaint instead of requestAnimationFrame to
-  // ensure the stacking context has been updated (removed) on the compositor
-  // before we snapshot.
+  // ensure the stacking context has been updated on the compositor.
   window.addEventListener("MozAfterPaint", function firstPaint() {
     window.removeEventListener("MozAfterPaint", firstPaint, false);
     // Here we have CSS animation on transform:none style element, so
     // there should be a stacking context.
 
     target.style.animation = "";
-    window.addEventListener("MozAfterPaint", function secondPaint() {
-      window.removeEventListener("MozAfterPaint", secondPaint, false);
+    // This time we don't need to wait for MozAfterPaint because reftest tool
+    // will be received MozAferPaint event.
+    requestAnimationFrame(() => {
       // Now we have only transform:none style, so we should not create any
       // stacking context.
       document.documentElement.classList.remove("reftest-wait");
-    }, false);
+    });
   }, false);
 });
 </script>