layout/style/test/test_load_events_on_stylesheets.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <!--
   4 https://bugzilla.mozilla.org/show_bug.cgi?id=185236
   5 -->
   6 <head>
   7   <title>Test for Bug 185236</title>
   8   <script src="/tests/SimpleTest/SimpleTest.js"></script>
   9   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
  10   <script>
  11     var pendingEventCounter = 0;
  12     SimpleTest.waitForExplicitFinish();
  13     addLoadEvent(function() {
  14       is(pendingEventCounter, 0,
  15          "How did onload for the page fire before onload for all the stylesheets?");
  16       SimpleTest.finish();
  17     });
  18     // Count the link we're about to parse
  19     pendingEventCounter = 1;
  20   </script>
  21   <link rel="stylesheet" href="data:text/css,*{}"
  22         onload="--pendingEventCounter;
  23                 ok(true, 'Load event firing on basic stylesheet')"
  24         onerror="--pendingEventCounter;
  25                  ok(false, 'Error event firing on basic stylesheet')">
  26 </head>
  27 <body>
  28 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=185236">Mozilla Bug 185236</a>
  29 <p id="display"></p>
  30 <div id="content" style="display: none">
  31
  32 </div>
  33 <pre id="test">
  34 <script>
  35 /** Test for Bug 185236 **/
  36
  37 function checkSheetComplete(sheet, length) {
  38   try {
  39     is(sheet.cssRules.length, length, `Should be loaded with ${length} rule(s)`);
  40   } catch (e) {
  41     ok(false, "Sheet has not been loaded completely");
  42   }
  43 }
  44
  45
  46 // There should be usually 1 pending event but the load event might have fired
  47 // if the parser yields between the link and starting the script execution.
  48 const pendingEventCounterAtStart = pendingEventCounter;
  49
  50 ok(pendingEventCounter <= 1, `There should be at most one pending event, got ${pendingEventCounterAtStart}`);
  51
  52 is(document.styleSheets.length, 2, "Should have two stylesheets");
  53 checkSheetComplete(document.styleSheets[1], 1);
  54
  55 // Test sheet that will already be complete when we write it out
  56 ++pendingEventCounter;
  57 document.write('<link rel="stylesheet" href="data:text/css,*{}"\
  58                 onload="--pendingEventCounter;\
  59                         ok(true, \'Load event firing on basic stylesheet\')"\
  60                 onerror="--pendingEventCounter;\
  61                         ok(false, \'Error event firing on basic stylesheet\')">');
  62
  63 // Make sure we have that second stylesheet
  64 is(document.styleSheets.length, 3, "Should have three stylesheets");
  65
  66 // Make sure that the second stylesheet is all loaded
  67 // If we ever switch away from sync loading of already-complete sheets, this
  68 // test will need adjusting
  69 checkSheetComplete(document.styleSheets[2], 1);
  70
  71 // Make sure the load event for that stylesheet has not fired yet
  72 is(pendingEventCounter, pendingEventCounterAtStart + 1, "After first document write");
  73 ++pendingEventCounter;
  74
  75 document.write('<style\
  76                 onload="--pendingEventCounter;\
  77                         ok(true, \'Load event firing on inline stylesheet\')"\
  78                 onerror="--pendingEventCounter;\
  79                         ok(false, \'Error event firing on inline stylesheet\')"></style>');
  80
  81 // Make sure the load event for that second stylesheet has not fired yet
  82 is(pendingEventCounter, pendingEventCounterAtStart + 2, "after second document write");
  83 ++pendingEventCounter;
  84
  85 document.write('<link rel="stylesheet" href="http://www.example.com"\
  86                 onload="--pendingEventCounter;\
  87                         ok(false, \'Load event firing on broken stylesheet 1\')"\
  88                 onerror="--pendingEventCounter;\
  89                         ok(true, \'Error event firing on broken stylesheet 1\')">');
  90 ++pendingEventCounter;
  91
  92 var link = document.createElement("link");
  93 link.rel = "stylesheet";
  94 link.href = "http://www.example.com";
  95 link.onload = function() { --pendingEventCounter;
  96   ok(false, 'Load event firing on broken stylesheet 2');
  97 };
  98 link.onerror = function() { --pendingEventCounter;
  99   ok(true, 'Error event firing on broken stylesheet 2');
 100 }
 101 document.body.appendChild(link);
 102
 103 ++pendingEventCounter;
 104 link = document.createElement("link");
 105 link.rel = "stylesheet";
 106 link.href = "data:text/css,*{}";
 107 link.onload = function() { --pendingEventCounter;
 108   ok(true, 'Load event firing on external stylesheet');
 109 };
 110 link.onerror = function() { --pendingEventCounter;
 111   ok(false, 'Error event firing on external stylesheet');
 112 }
 113 document.body.appendChild(link);
 114
 115 // If we ever switch away from sync loading of already-complete sheets, this
 116 // test will need adjusting
 117 checkSheetComplete(link.sheet, 1);
 118
 119 ++pendingEventCounter;
 120 link = document.createElement("link");
 121 link.rel = "stylesheet";
 122 link.href = "data:text/css,@import url('data:text/css,*{}')";
 123 link.onload = function() { --pendingEventCounter;
 124   ok(true, 'Load event firing on external stylesheet');
 125 };
 126 link.onerror = function() { --pendingEventCounter;
 127   ok(false, 'Error event firing on external stylesheet');
 128 }
 129 document.body.appendChild(link);
 130
 131 ++pendingEventCounter;
 132 link = document.createElement("link");
 133 link.rel = "stylesheet";
 134 link.href = "data:text/css,@import url('http://www.example.com')";
 135 link.onload = function() { --pendingEventCounter;
 136   ok(false, 'Load event firing on broken stylesheet 3');
 137 };
 138 link.onerror = function() { --pendingEventCounter;
 139   ok(true, 'Error event firing on broken stylesheet 3');
 140 }
 141 document.body.appendChild(link);
 142
 143 function absoluteURL(relativeURL) {
 144   return new URL(relativeURL, location.href).href;
 145 }
 146
 147 ++pendingEventCounter;
 148 link = document.createElement("link");
 149 link.rel = "stylesheet";
 150 link.href = `data:text/css,@import url('http://www.example.com'); @import url(${absoluteURL('slow_ok_sheet.sjs')});`;
 151 link.onload = function() { --pendingEventCounter;
 152   ok(false, 'Load event firing on broken stylesheet 4');
 153 };
 154 link.onerror = function() { --pendingEventCounter;
 155   ok(true, 'Error event firing on broken stylesheet 4');
 156 }
 157 document.body.appendChild(link);
 158
 159 ++pendingEventCounter;
 160 link = document.createElement("link");
 161 link.rel = "stylesheet";
 162 link.href = `data:text/css,@import url(${absoluteURL('slow_broken_sheet.sjs')}); @import url('data:text/css,');`;
 163 link.onload = function() { --pendingEventCounter;
 164   ok(false, 'Load event firing on broken stylesheet 5');
 165 };
 166 link.onerror = function() { --pendingEventCounter;
 167   ok(true, 'Error event firing on broken stylesheet 5');
 168 }
 169 document.body.appendChild(link);
 170
 171 // Make sure the load events for all those stylesheets have not fired yet
 172 is(pendingEventCounter, pendingEventCounterAtStart + 9, "There should be nine more pending events");
 173 </script>
 174 </pre>
 175 </body>
 176 </html>