test_load_events_on_stylesheets.html (6420B)
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>