1 files changed, 128 insertions, 0 deletions
diff --git a/image/test/mochitest/test_synchronized_animation.html b/image/test/mochitest/test_synchronized_animation.html
new file mode 100644
index 000000000..01ddd481e
--- /dev/null
+++ b/image/test/mochitest/test_synchronized_animation.html
@@ -0,0 +1,128 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=867758
+-->
+<head>
+  <title>Test for Bug 867758</title>
+  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script type="application/javascript" src="/tests/SimpleTest/WindowSnapshot.js"></script>
+  <script type="application/javascript" src="imgutils.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=867758">Mozilla Bug 867758</a>
+<p id="display"></p>
+<div id="content">
+</div>
+<pre id="test">
+<script type="application/javascript;version=1.8">
+/** Test for Bug 867758**/
+
+SimpleTest.requestFlakyTimeout("Early failure timeout");
+SimpleTest.waitForExplicitFinish();
+
+const FAILURE_TIMEOUT = 120000; // Fail early after 120 seconds (2 minutes)
+
+const Cc = SpecialPowers.Cc;
+const Ci = SpecialPowers.Ci;
+const gContent = document.getElementById("content");
+
+var gDispatched = false;
+var gRanEvent = false;
+var gObserver;
+var gImg1;
+var gImg2;
+var gFirstImageLoaded = false;
+var gOuter;
+var gFinished = false;
+var gFirstRequest = null;
+
+function cleanUpAndFinish() {
+  if (gFinished) {
+    return;
+  }
+  var imgLoadingContent = SpecialPowers.wrap(gImg1).QueryInterface(Ci.nsIImageLoadingContent);
+  imgLoadingContent.removeObserver(gOuter);
+
+  imgLoadingContent = SpecialPowers.wrap(gImg2).QueryInterface(Ci.nsIImageLoadingContent);
+  imgLoadingContent.removeObserver(gOuter);
+
+  SimpleTest.finish();
+
+  gFinished = true;
+}
+
+function frameUpdate(aRequest) {
+  if (!gDispatched) {
+    Promise.resolve().then(function() { 
+      gRanEvent = true;
+    });
+    gDispatched = true;
+    gFirstRequest = aRequest;
+  } else if (aRequest != gFirstRequest) {
+    ok(!gRanEvent, "Should not have run event before all frame update events occurred!");
+    cleanUpAndFinish();
+  }
+}
+
+function failTest() {
+  ok(false, "timing out after " + FAILURE_TIMEOUT + "ms.  ");
+  cleanUpAndFinish();
+}
+
+function waitForLoadAndTest(image) {
+  return () => {
+    // Draw the image into a canvas to ensure it's decoded.
+    var canvas = document.createElement('canvas');
+    var context = canvas.getContext('2d');
+    context.drawImage(image, 0, 0);
+
+    // Attach the observer.
+    var imgLoadingContent = SpecialPowers.wrap(image).QueryInterface(Ci.nsIImageLoadingContent);
+    imgLoadingContent.addObserver(gOuter);
+
+    // If the other image already loaded, add both images to the document, which
+    // begins the real test.
+    if (gFirstImageLoaded) {
+      gContent.appendChild(gImg1);
+      gContent.appendChild(gImg2);
+    } else {
+      gFirstImageLoaded = true;
+    }
+  };
+}
+
+function main() {
+  gImg1 = new Image();
+  gImg2 = new Image();
+
+  // Create and customize decoder observer
+  var obs = new ImageDecoderObserverStub();
+  obs.frameUpdate = frameUpdate;
+
+  gOuter = Cc["@mozilla.org/image/tools;1"].getService(Ci.imgITools).createScriptedObserver(SpecialPowers.wrapCallbackObject(obs));
+
+  // We want to test the cold loading behavior, so clear cache in case an
+  // earlier test got our image in there already.
+  clearAllImageCaches();
+
+  // These are two copies of the same image; hence, they have the same frame rate.
+  gImg1.src = "animated1.gif";
+  gImg2.src = "animated2.gif";
+
+  // Wait for each image to load.
+  gImg1.addEventListener('load', waitForLoadAndTest(gImg1));
+  gImg2.addEventListener('load', waitForLoadAndTest(gImg2));
+
+  // In case something goes wrong, fail earlier than mochitest timeout,
+  // and with more information.
+  setTimeout(failTest, FAILURE_TIMEOUT);
+}
+
+window.onload = main;
+
+</script>
+</pre>
+</body>
+</html>