Bug 1603744 - Make test_animated_gif.html reliable. r=tnikkel

Now the test runs following steps;

1) Start the test
2) Set iframe's src attribute to load the iframe document
3) Waits for a `loadComplete` message from the iframe
4) Waits 1 second to make sure `decodeComplete` doesn't happen in the iframe

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

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

image/test/mochitest/test_animated_gif.html

@@ -12,31 +12,39 @@
 <div id="content" style="display: none"></div>
 <div id="scroller" style="height: 300px; overflow: scroll;">
   <div style="width: 100%; height: 5000px;"></div>
-  <iframe src="http://example.org/tests/image/test/mochitest/child.html"></iframe>
+  <iframe id="iframe"></iframe>
   <div style="width: 100%; height: 5000px;"></div>
 </div>
 <pre id="test"></pre>
 <script>
-  SimpleTest.waitForExplicitFinish();
+  add_task(async () => {
+    window.addEventListener("message", event => {
+      isnot(event.data, "decodeComplete",
+            "decoceComplete should never be received");
+    });
 
-  let loadCompleteCount = 0;
-  window.addEventListener("message", event => {
-    isnot(event.data, "decodeComplete",
-          "The image outside of the display port should not be decoded");
-    if (event.data == "loadComplete") {
-      loadCompleteCount++
-    }
+    await new Promise(resolve => {
+      window.addEventListener("message", event => {
+        if (event.data == "loadComplete") {
+          ok(true, "Got loadComplete");
+          resolve();
+        }
+      }, { once: true });
+
+      const iframe = document.getElementById("iframe");
+      iframe.src = "http://example.org/tests/image/test/mochitest/child.html";
+    });
+
+    const start = document.timeline.currentTime;
+
+    // Waits a second;
+    await SimpleTest.promiseWaitForCondition(() => {
+      return 1000 < (document.timeline.currentTime - start);
+    });
+
+    ok(true, "decodeComplete didn't receive within a second");
   });
 
-  const start = document.timeline.currentTime;
-  // Waits a second;
-  SimpleTest.waitForCondition(() => {
-    return 1000 < (document.timeline.currentTime - start);
-  }, () => {
-    is(loadCompleteCount, 1,
-       "`loadComplete` should be received once");
-    SimpleTest.finish();
-  });
 </script>
 </body>
 </html>