<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=867758
-->
<head>
  <title>Test for Bug 867758</title>
  <script src="/tests/SimpleTest/SimpleTest.js"></script>
  <script 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">
/** 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);
  imgLoadingContent.removeObserver(gOuter);

  imgLoadingContent = SpecialPowers.wrap(gImg2);
  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);
    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>
