test_synchronized_animation.html

Enable keyboard shortcuts

<!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>