gecko-dev/layout/style/test/test_load_events_on_stylesh...

<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=185236
-->
<head>
  <title>Test for Bug 185236</title>
  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
  <script>
    var pendingEventCounter = 0;
    var messagePosted = false;
    SimpleTest.waitForExplicitFinish();
    addLoadEvent(function() {
      is(messagePosted, true, "Should have gotten onmessage event");
      is(pendingEventCounter, 0,
         "How did onload for the page fire before onload for all the stylesheets?");
      SimpleTest.finish();
    });
    // Count the link we're about to parse
    pendingEventCounter = 1;
  </script>
  <link rel="stylesheet" href="data:text/css,*{}"
        onload="--pendingEventCounter;
                ok(true, 'Load event firing on basic stylesheet')"
        onerror="--pendingEventCounter;
                 ok(false, 'Error event firing on basic stylesheet')">
</head>
<body>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=185236">Mozilla Bug 185236</a>
<p id="display"></p>
<div id="content" style="display: none">

</div>
<pre id="test">
<script type="application/javascript">
/** Test for Bug 185236 **/
// Verify that there are no in-flight sheet loads right now; we should have
// waited for them when we hit the script tag
is(pendingEventCounter, 0, "There should be no pending events");

// Test sheet that will already be complete when we write it out
++pendingEventCounter;

// Make sure that a postMessage we do right now fires after the onload handler
// for the stylesheet.  If we ever change the timing of sheet onload, we will
// need to change that.
window.onmessage = function() {
  messagePosted = true;
  // There are 4 pending events: two from the two direct example.com loads,
  // and 2 from the two data:text/css loads that import things
  is(pendingEventCounter, 4, "Load event for sheet should have fired");
}
window.postMessage("", "*");

function checkSheetComplete(sheet, length) {
  try {
    is(sheet.cssRules.length, length, `Should be loaded with ${length} rule(s)`);
  } catch (e) {
    ok(false, "Sheet has not been loaded completely");
  }
}

document.write('<link rel="stylesheet" href="data:text/css,*{}"\
                onload="--pendingEventCounter;\
                        ok(true, \'Load event firing on basic stylesheet\')"\
                onerror="--pendingEventCounter;\
                        ok(false, \'Error event firing on basic stylesheet\')">');

// Make sure we have that second stylesheet
is(document.styleSheets.length, 3, "Should have three stylesheets");

// Make sure that the second stylesheet is all loaded
// If we ever switch away from sync loading of already-complete sheets, this
// test will need adjusting
checkSheetComplete(document.styleSheets[2], 1);

// Make sure the load event for that stylesheet has not fired yet
is(pendingEventCounter, 1, "There should be one pending event");

++pendingEventCounter;
document.write('<style\
                onload="--pendingEventCounter;\
                        ok(true, \'Load event firing on inline stylesheet\')"\
                onerror="--pendingEventCounter;\
                        ok(false, \'Error event firing on inline stylesheet\')"></style>');

// Make sure the load event for that second stylesheet has not fired yet
is(pendingEventCounter, 2, "There should be two pending events");

++pendingEventCounter;
document.write('<link rel="stylesheet" href="http://www.example.com"\
                onload="--pendingEventCounter;\
                        ok(false, \'Load event firing on broken stylesheet\')"\
                onerror="--pendingEventCounter;\
                        ok(true, \'Error event firing on broken stylesheet\')">');

++pendingEventCounter;
var link = document.createElement("link");
link.rel = "stylesheet";
link.href = "http://www.example.com";
link.onload = function() { --pendingEventCounter;
  ok(false, 'Load event firing on broken stylesheet');
};
link.onerror = function() { --pendingEventCounter;
  ok(true, 'Error event firing on broken stylesheet');
}
document.body.appendChild(link);

++pendingEventCounter;
link = document.createElement("link");
link.rel = "stylesheet";
link.href = "data:text/css,*{}";
link.onload = function() { --pendingEventCounter;
  ok(true, 'Load event firing on external stylesheet');
};
link.onerror = function() { --pendingEventCounter;
  ok(false, 'Error event firing on external stylesheet');
}
document.body.appendChild(link);

// Make sure we have that last stylesheet
is(document.styleSheets.length, 7, "Should have seven stylesheets here");

// Make sure that the sixth stylesheet is all loaded
// If we ever switch away from sync loading of already-complete sheets, this
// test will need adjusting
checkSheetComplete(document.styleSheets[6], 1);

++pendingEventCounter;
link = document.createElement("link");
link.rel = "stylesheet";
link.href = "data:text/css,@import url('data:text/css,*{}')";
link.onload = function() { --pendingEventCounter;
  ok(true, 'Load event firing on external stylesheet');
};
link.onerror = function() { --pendingEventCounter;
  ok(false, 'Error event firing on external stylesheet');
}
document.body.appendChild(link);

++pendingEventCounter;
link = document.createElement("link");
link.rel = "stylesheet";
link.href = "data:text/css,@import url('http://www.example.com')";
link.onload = function() { --pendingEventCounter;
  ok(false, 'Load event firing on broken stylesheet');
};
link.onerror = function() { --pendingEventCounter;
  ok(true, 'Error event firing on broken stylesheet');
}
document.body.appendChild(link);

// Make sure the load events for all those stylesheets have not fired yet
is(pendingEventCounter, 7, "There should be one pending event");

</script>
</pre>
</body>
</html>