Bug 1470350. Wait for MozReftestInvalidate event in delaytest.html and then wait for the animated image to complete. r=emilio

Just waiting for the load event of the image doesn't even mean the image has been painted at all yet, but by the time MozReftestInvalidate fires the first frame should be guaranteed to have been painted.

Also, switch to using new img.decode api. img.decode will decode an animated version of the img, whereas drawing to a canvas will kick off a first frame only decode which the page can't use.

Differential Revision: https://phabricator.services.mozilla.com/D70104

--HG--
extra : moz-landing-system : lando

image/test/crashtests/delaytest.html

@@ -7,6 +7,9 @@
 <!-- non-empty alt to avoid the broken image icon -->
 <img id="image1" alt=" ">
 <script>
+
+window.addEventListener("MozReftestInvalidate", reftestInvalidateListener);
+
 // This loads a externally specified image, forces a draw (in case of
 // decode-on-draw), waits 350ms, and then triggers the reftest snapshot.
 // This allows the animation on the page to complete.
@@ -23,17 +26,25 @@ img.src = imgURL;
 img.onload = forceDecode;
 img.onerror = forceDecode;
 
+let decodeComplete = false;
+let gotReftestInvalidate = false;
+
 function forceDecode() {
+  img.decode().then(function() {
+    decodeComplete = true;
+    maybeStartTimer();
+  });
+}
 
-  try {
-    // We need to force drawing of the image in an invisible context
-    var canvas = document.createElement("canvas");
-    var ctx = canvas.getContext("2d");
-    ctx.drawImage(img, 0, 0);
-  } catch(e) {}
+function reftestInvalidateListener() {
+  gotReftestInvalidate = true;
+  maybeStartTimer();
+}
 
-  // We've force the decode. start the timer to trigger the reftest
-  startTimer();
+function maybeStartTimer() {
+  if (decodeComplete && gotReftestInvalidate) {
+    startTimer();
+  }
 }
 
 function startTimer() {

image/test/reftest/apng/delaytest.html

@@ -7,6 +7,9 @@
 <!-- non-empty alt to avoid the broken image icon -->
 <img id="image1" alt=" ">
 <script>
+
+window.addEventListener("MozReftestInvalidate", reftestInvalidateListener);
+
 // This loads a externally specified image, forces a draw (in case of
 // decode-on-draw), waits 100ms, and then triggers the reftest snapshot.
 // This allows the animation on the page to complete.
@@ -22,15 +25,25 @@ var img = document.images[0];
 img.src = imgURL;
 img.onload = forceDecode;
 
+let decodeComplete = false;
+let gotReftestInvalidate = false;
+
 function forceDecode() {
+  img.decode().then(function() {
+    decodeComplete = true;
+    maybeStartTimer();
+  });
+}
 
-  // We need to force drawing of the image in an invisible context
-  var canvas = document.createElement("canvas");
-  var ctx = canvas.getContext("2d");
-  ctx.drawImage(img, 0, 0);
+function reftestInvalidateListener() {
+  gotReftestInvalidate = true;
+  maybeStartTimer();
+}
 
-  // We've force the decode. start the timer to trigger the reftest
-  startTimer();
+function maybeStartTimer() {
+  if (decodeComplete && gotReftestInvalidate) {
+    startTimer();
+  }
 }
 
 function startTimer() {

image/test/reftest/gif/delaytest.html

@@ -7,6 +7,9 @@
 <!-- non-empty alt to avoid the broken image icon -->
 <img id="image1" alt=" ">
 <script>
+
+window.addEventListener("MozReftestInvalidate", reftestInvalidateListener);
+
 // This loads a externally specified image, forces a draw (in case of
 // decode-on-draw), waits 100ms, and then triggers the reftest snapshot.
 // This allows the animation on the page to complete.
@@ -22,15 +25,25 @@ var img = document.images[0];
 img.src = imgURL;
 img.onload = forceDecode;
 
+let decodeComplete = false;
+let gotReftestInvalidate = false;
+
 function forceDecode() {
+  img.decode().then(function() {
+    decodeComplete = true;
+    maybeStartTimer();
+  });
+}
 
-  // We need to force drawing of the image in an invisible context
-  var canvas = document.createElement("canvas");
-  var ctx = canvas.getContext("2d");
-  ctx.drawImage(img, 0, 0);
+function reftestInvalidateListener() {
+  gotReftestInvalidate = true;
+  maybeStartTimer();
+}
 
-  // We've force the decode. start the timer to trigger the reftest
-  startTimer();
+function maybeStartTimer() {
+  if (decodeComplete && gotReftestInvalidate) {
+    startTimer();
+  }
 }
 
 function startTimer() {