render-blocking-status-script.html (8615B)
1 <!DOCTYPE html> 2 <head> 3 <meta charset="utf-8" /> 4 <title>This test validates the render blocking status of resources.</title> 5 <link rel="help" href="https://www.w3.org/TR/resource-timing-2/#sec-performanceresourcetiming"/> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 9 <!-- Start of test cases --> 10 <script src="resources/empty_script.js?script-head"></script> 11 <script type="module" src="resources/empty_script.js?script-head-module"></script> 12 <script async type=module 13 src="resources/empty_script.js?script-head-async-module"> 14 </script> 15 <script async src="resources/empty_script.js?script-head-async"></script> 16 <script defer src="resources/empty_script.js?script-head-defer"></script> 17 <script blocking=render 18 src="resources/empty_script.js?script-head-blocking-render"> 19 </script> 20 <script async blocking=render 21 src="resources/empty_script.js?script-head-async-blocking-render"> 22 </script> 23 <script type=module blocking=render 24 src="resources/empty_script.js?script-head-module-blocking-render"> 25 </script> 26 <script async type=module blocking=render 27 src="resources/empty_script.js?script-head-async-module-blocking-render"> 28 </script> 29 <script defer blocking=render 30 src="resources/empty_script.js?script-head-defer-blocking-render"> 31 </script> 32 33 <script id="script-head-remove-attr" blocking=render 34 src="resources/empty_script.js?script-head-blocking-render-remove-attr"> 35 </script> 36 37 <script> 38 document.write(` 39 <script defer 40 src="resources/empty_script.js?script-head-defer-dynamic-docwrite"> 41 <\/script>`); 42 </script> 43 </head> 44 45 <body> 46 47 <script src="resources/empty_script.js?script-body"></script> 48 <script type="module" src="resources/empty_script.js?script-body-module"></script> 49 <script async type=module 50 src="resources/empty_script.js?script-body-async-module"> 51 </script> 52 <script async src="resources/empty_script.js?script-body-async"></script> 53 <script defer src="resources/empty_script.js?script-body-defer"></script> 54 55 <script> 56 const script = document.createElement("script"); 57 script.src = "resources/empty_script.js?script-head-dynamic-dom"; 58 document.head.appendChild(script); 59 60 // Dynamic explicitly async script 61 const async_script = document.createElement("script"); 62 async_script.src = "resources/empty_script.js?script-head-async-dynamic-dom"; 63 async_script.async = true; 64 document.head.appendChild(async_script); 65 66 // Dynamic non-async script 67 // https://html.spec.whatwg.org/multipage/scripting.html#script-processing-model 68 // mentions that a script element has to be parser-inserted to be 69 // implicitly potentially render-blocking 70 const non_async_script = document.createElement("script"); 71 non_async_script.src = "resources/empty_script.js?script-head-non-async-dynamic-dom"; 72 non_async_script.async = false; 73 document.head.appendChild(non_async_script); 74 75 // Dynamic defer script 76 const defer_script = document.createElement("script"); 77 defer_script.src = "resources/empty_script.js?script-head-defer-dynamic-dom"; 78 defer_script.defer = true; 79 document.head.appendChild(defer_script); 80 81 // Dynamic explicitly render-blocking script 82 const blocking_script = document.createElement("script"); 83 blocking_script.src = "resources/empty_script.js?script-head-blocking-render-dynamic-dom"; 84 blocking_script.blocking = "render"; 85 document.head.appendChild(blocking_script); 86 87 // Dynamic explicitly render-blocking module script 88 const blocking_module_script = document.createElement("script"); 89 blocking_module_script.src = "resources/empty_script.js?script-head-module-blocking-render-dynamic-dom"; 90 blocking_module_script.type = "module"; 91 blocking_module_script.blocking = "render"; 92 document.head.appendChild(blocking_module_script); 93 94 // Dynamic async module script 95 const async_module_script = document.createElement("script"); 96 async_module_script.src = "resources/empty_script.js?script-head-async-module-dynamic-dom"; 97 async_module_script.type = "module"; 98 async_module_script.async = true; 99 document.head.appendChild(async_module_script); 100 101 // Dynamic async render-blocking module script 102 const async_blocking_module_script = document.createElement("script"); 103 async_blocking_module_script.src = "resources/empty_script.js?script-head-async-module-blocking-render-dynamic-dom"; 104 async_blocking_module_script.type = "module"; 105 async_blocking_module_script.async = true; 106 async_blocking_module_script.blocking = "render" 107 document.head.appendChild(async_blocking_module_script); 108 109 // Add a module that imports more modules 110 const importer_script = document.createElement("script"); 111 importer_script.src = "resources/fake_responses.py?url=importer.js"; 112 importer_script.type = "module"; 113 document.head.appendChild(importer_script); 114 115 // Add an async module that imports more modules 116 const importer_async_script = document.createElement("script"); 117 importer_async_script.src = "resources/fake_responses.py?url=importer_async.js"; 118 importer_async_script.type = "module"; 119 importer_async_script.async = true; 120 document.head.appendChild(importer_async_script); 121 122 // Removing blocking render attribute after request is made 123 const script_element = document.getElementById("script-head-remove-attr"); 124 script_element.blocking = ""; 125 </script> 126 127 128 <script> 129 130 const wait_for_onload = () => { 131 return new Promise(resolve => { 132 window.addEventListener("load", resolve); 133 })}; 134 135 promise_test( 136 async () => { 137 const expectedRenderBlockingStatus = { 138 'script-head': 'blocking', 139 'script-head-module' : 'non-blocking', 140 'script-head-async-module' : 'non-blocking', 141 'script-head-async' : 'non-blocking', 142 'script-head-defer' : 'non-blocking', 143 'script-head-blocking-render' : 'blocking', 144 'script-head-async-blocking-render' : 'blocking', 145 'script-head-module-blocking-render' : 'blocking', 146 'script-head-async-module-blocking-render' : 'blocking', 147 'script-head-defer-blocking-render' : 'blocking', 148 'script-head-blocking-render-remove-attr' : 'blocking', 149 'script-head-defer-dynamic-docwrite' : 'non-blocking', 150 'script-body' : 'non-blocking', 151 'script-body-module' : 'non-blocking', 152 'script-body-async-module' : 'non-blocking', 153 'script-body-async' : 'non-blocking', 154 'script-body-defer' : 'non-blocking', 155 'script-head-dynamic-dom': 'non-blocking', 156 'script-head-async-dynamic-dom' : 'non-blocking', 157 'script-head-non-async-dynamic-dom': 'non-blocking', 158 'script-head-defer-dynamic-dom' : 'non-blocking', 159 'script-head-blocking-render-dynamic-dom' : 'blocking', 160 'script-head-module-blocking-render-dynamic-dom' : 'blocking', 161 'script-head-async-module-dynamic-dom' : 'non-blocking', 162 'script-head-async-module-blocking-render-dynamic-dom' : 'blocking', 163 'script-head-import-defer' : 'non-blocking', 164 'script-head-import-defer-dynamic' : 'non-blocking', 165 'script-head-import-async' : 'non-blocking', 166 'script-head-import-async-dynamic' : 'non-blocking', 167 'script-importer' : 'non-blocking', 168 'script-importer-async' : 'non-blocking' 169 }; 170 171 await wait_for_onload(); 172 173 const entry_list = performance.getEntriesByType("resource"); 174 for (entry of entry_list) { 175 if (entry.name.includes("empty_script.js")) { 176 key = entry.name.split("?").pop(); 177 expectedStatus = expectedRenderBlockingStatus[key]; 178 assert_equals(entry.renderBlockingStatus, expectedStatus, 179 `render blocking status for ${entry.name} should be ${expectedStatus}`); 180 } 181 else if (entry.name.includes("importer.js")){ 182 key = 'script-importer'; 183 expectedStatus = expectedRenderBlockingStatus[key]; 184 assert_equals(entry.renderBlockingStatus, expectedStatus, 185 `render blocking status for ${entry.name} should be ${expectedStatus}`); 186 } 187 else if (entry.name.includes("importer_async.js")){ 188 key = 'script-importer-async'; 189 expectedStatus = expectedRenderBlockingStatus[key]; 190 assert_equals(entry.renderBlockingStatus, expectedStatus, 191 `render blocking status for ${entry.name} should be ${expectedStatus}`); 192 } 193 } 194 }, "Validate render blocking status of script resources in PerformanceResourceTiming"); 195 196 </script>