| <!DOCTYPE html> |
| <head> |
| <meta charset="utf-8" /> |
| <title>This test validates the render blocking status of resources.</title> |
| <link rel="help" href="https://www.w3.org/TR/resource-timing-2/#sec-performanceresourcetiming"/> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| |
| <!-- Start of test cases --> |
| <script> |
| // Dynamic style using document.write in head |
| document.write(` |
| <link rel=stylesheet |
| href='resources/empty_style.css?stylesheet-head-dynamic-docWrite'> |
| `); |
| document.write(` |
| <link rel=stylesheet |
| href='resources/empty_style.css?stylesheet-head-dynamic-docWrite-print' |
| media=print> |
| `); |
| </script> |
| |
| <link rel=stylesheet href="resources/empty_style.css?stylesheet-head"> |
| <link rel=stylesheet href="resources/empty_style.css?stylesheet-head-media-print" |
| media=print> |
| <link rel="alternate stylesheet" |
| href="resources/empty_style.css?stylesheet-head-alternate"> |
| <link rel=preload as=style href="resources/empty_style.css?link-style-head-preload"> |
| <link rel=preload as=style href="resources/empty_style.css?link-style-preload-used"> |
| <link rel=stylesheet href="resources/importer.css?stylesheet-importer-head"> |
| <link rel=stylesheet id="link-head-remove-attr" blocking="render" |
| href="resources/empty_style.css?stylesheet-head-blocking-render-remove-attr"> |
| <link rel=modulepreload href="resources/empty_script.js?link-head-modulepreload"> |
| |
| <style>@import url(resources/empty_style.css?stylesheet-inline-imported);</style> |
| <style media=print> |
| @import url(resources/empty_style.css?stylesheet-inline-imported-print); |
| </style> |
| </head> |
| |
| <body> |
| |
| <link rel=stylesheet href="resources/empty_style.css?stylesheet-body"> |
| <link rel=stylesheet href="resources/importer.css?stylesheet-importer-body"> |
| <link rel=stylesheet href="resources/empty_style.css?stylesheet-body-media-print" |
| media=print> |
| <link rel=stylesheet blocking="render" |
| href="resources/empty_style.css?stylesheet-body-blocking-render"> |
| |
| <!-- https://html.spec.whatwg.org/multipage/urls-and-fetching.html#blocking-attributes |
| mentions that an element is potentially render-blocking if its blocking |
| tokens set contains "render", or if it is implicitly potentially |
| render-blocking. By default, an element is not implicitly potentially |
| render-blocking. |
| https://html.spec.whatwg.org/multipage/links.html#link-type-stylesheet |
| specifies that a link element of type stylesheet is implicitly potentially |
| render-blocking only if the element was created by its node document's parser. --> |
| <script> |
| // Dynamic style using document.write in body |
| document.write(` |
| <link rel=stylesheet |
| href='resources/empty_style.css?stylesheet-body-dynamic-docWrite'> |
| `); |
| document.write(` |
| <link rel=stylesheet |
| href='resources/empty_style.css?stylesheet-body-dynamic-docWrite-print' |
| media=print> |
| `); |
| |
| // Dynamic style using innerHTML |
| document.head.innerHTML += ` |
| <link rel=stylesheet |
| href='resources/empty_style.css?stylesheet-head-dynamic-innerHTML'> |
| `; |
| document.head.innerHTML += ` |
| <link rel=stylesheet |
| href='resources/empty_style.css?stylesheet-head-dynamic-innerHTML-print' |
| media=print> |
| `; |
| document.head.innerHTML += ` |
| <link rel=stylesheet blocking=render |
| href='resources/empty_style.css?stylesheet-head-blocking-render-dynamic-innerHTML'> |
| `; |
| |
| // Dynamic style using DOM API |
| var link = document.createElement("link"); |
| link.href = "resources/empty_style.css?stylesheet-head-dynamic-dom"; |
| link.rel = "stylesheet"; |
| document.head.appendChild(link); |
| |
| // Add a dynamic render-blocking style with DOM API |
| link = document.createElement("link"); |
| link.href = "resources/empty_style.css?stylesheet-head-blocking-render-dynamic-dom"; |
| link.rel = "stylesheet"; |
| link.blocking = "render"; |
| document.head.appendChild(link); |
| |
| // Dynamic style preload using DOM API |
| link = document.createElement("link"); |
| link.href = "resources/empty_style.css?link-style-head-preload-dynamic-dom"; |
| link.rel = "preload"; |
| link.as = "style"; |
| document.head.appendChild(link); |
| |
| // Dynamic module via modulepreload using DOM API |
| link = document.createElement("link"); |
| link.href = "resources/empty_script.js?link-head-modulepreload-dynamic-dom"; |
| link.rel = "modulepreload"; |
| document.head.appendChild(link); |
| |
| // Add a style preload with DOM API to be used later |
| link = document.createElement("link"); |
| link.href = "resources/empty_style.css?link-style-preload-used-dynamic"; |
| link.rel = "preload"; |
| link.as = "style"; |
| document.head.appendChild(link); |
| // Use the preload |
| link = document.createElement("link"); |
| link.href = "resources/empty_style.css?link-style-preload-used-dynamic"; |
| link.rel = "stylesheet"; |
| document.head.appendChild(link); |
| |
| // Dynamic inline CSS |
| // Add an inline CSS importer |
| document.write(` |
| <style> |
| @import url('resources/empty_style.css?stylesheet-inline-imported-dynamic-docwrite') |
| </style> |
| `); |
| document.write(` |
| <style media=print> |
| @import url('resources/empty_style.css?stylesheet-inline-imported-dynamic-docwrite-print') |
| </style> |
| `); |
| |
| // Add a dynamic inline CSS importer using DOM API |
| let style = document.createElement("style"); |
| style.textContent = "@import url('resources/empty_style.css?stylesheet-inline-imported-dynamic-dom')"; |
| document.head.appendChild(style); |
| |
| // Add a dynamic render-blocking inline CSS importer |
| style = document.createElement("style"); |
| style.textContent = "@import url('resources/empty_style.css?stylesheet-inline-imported-blocking-render-dynamic-dom')"; |
| style.blocking = "render"; |
| document.head.appendChild(style); |
| |
| // Dynamic CSS importer |
| document.write(` |
| <link rel=stylesheet href='resources/importer_dynamic.css'> |
| `); |
| document.write(` |
| <link rel=stylesheet href='resources/importer_print.css' media=print> |
| `); |
| |
| // Removing blocking render attribute after request is made |
| const sheet = document.getElementById("link-head-remove-attr"); |
| sheet.blocking = ""; |
| </script> |
| |
| <link rel=stylesheet href="resources/empty_style.css?link-style-preload-used"> |
| |
| <script> |
| |
| const wait_for_onload = () => { |
| return new Promise(resolve => { |
| window.addEventListener("load", resolve); |
| })}; |
| |
| promise_test( |
| async () => { |
| const expectedRenderBlockingStatus = { |
| 'stylesheet-head-dynamic-docWrite': 'blocking', |
| 'stylesheet-head-dynamic-docWrite-print': 'non-blocking', |
| 'stylesheet-head': 'blocking', |
| 'stylesheet-head-media-print' : 'non-blocking', |
| 'stylesheet-head-alternate' : 'non-blocking', |
| 'link-style-head-preload' : 'non-blocking', |
| 'stylesheet-importer-head' : 'blocking', |
| 'stylesheet-head-blocking-render-remove-attr' : 'blocking', |
| 'link-head-modulepreload' : 'non-blocking', |
| 'stylesheet-inline-imported' : 'blocking', |
| 'stylesheet-inline-imported-print' : 'non-blocking', |
| 'stylesheet-body': 'non-blocking', |
| 'stylesheet-importer-body' : 'non-blocking', |
| 'stylesheet-body-media-print' : 'non-blocking', |
| 'stylesheet-body-blocking-render' : 'non-blocking', |
| 'stylesheet-body-dynamic-docWrite' : 'non-blocking', |
| 'stylesheet-body-dynamic-docWrite-print': 'non-blocking', |
| 'stylesheet-head-dynamic-innerHTML' : 'non-blocking', |
| 'stylesheet-head-dynamic-innerHTML-print' : 'non-blocking', |
| 'stylesheet-head-blocking-render-dynamic-innerHTML' : 'blocking', |
| 'stylesheet-head-dynamic-dom' : 'non-blocking', |
| 'stylesheet-head-blocking-render-dynamic-dom' : 'blocking', |
| 'link-style-head-preload-dynamic-dom' : 'non-blocking', |
| 'link-head-modulepreload-dynamic-dom' : 'non-blocking', |
| 'link-style-preload-used' : 'non-blocking', |
| 'link-style-preload-used-dynamic' : 'non-blocking', |
| 'stylesheet-inline-imported-dynamic-docwrite': 'blocking', |
| 'stylesheet-inline-imported-dynamic-docwrite-print' : 'non-blocking', |
| 'stylesheet-inline-imported-dynamic-dom' : 'non-blocking', |
| 'stylesheet-inline-imported-blocking-render-dynamic-dom' : 'blocking', |
| 'stylesheet-imported' : 'blocking', |
| 'stylesheet-imported-print' : 'non-blocking', |
| 'stylesheet-imported-dynamic' : 'non-blocking' |
| }; |
| |
| await wait_for_onload(); |
| |
| const entry_list = performance.getEntriesByType("resource"); |
| for (entry of entry_list) { |
| if (entry.name.includes("empty_style.css") || |
| entry.name.includes("importer.css") || |
| entry.name.includes("empty_script.js")) { |
| key = entry.name.split("?").pop(); |
| expectedStatus = expectedRenderBlockingStatus[key]; |
| assert_equals(entry.renderBlockingStatus, expectedStatus, |
| `render blocking status for ${entry.name} should be ${expectedStatus}`); |
| } |
| } |
| }, "Validate render blocking status of link resources in PerformanceResourceTiming"); |
| |
| </script> |
