non-render-blocking-scripts.optional.html (2588B)
1 <!DOCTYPE html> 2 <title>Tests when script is not implicitly potentially render-blocking</title> 3 <link rel="help" href="https://github.com/whatwg/html/pull/7894"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="support/test-render-blocking.js"></script> 7 8 <!-- 9 The test is marked "optional" because even when the document is not 10 render-blocked, the user agent is still free to take other factors, which are 11 not limited by the spec, into consideration and therefore decide not to 12 render. However, it is still more desirable if rendering starts 13 immediately/soon. 14 --> 15 16 <script class="test" data="parser-inserted async script" async 17 src="support/dummy-1.js?pipe=trickle(d1)&async"></script> 18 <script class="test" data="parser-inserted defer script" defer 19 src="support/dummy-1.js?pipe=trickle(d1)&defer"></script> 20 <script class="test" data="parser-inserted module script" type="module" 21 src="support/dummy-1.mjs?pipe=trickle(d1)"></script> 22 <script class="test" data="parser-inserted async module script" type="module" 23 async src="support/dummy-1.mjs?pipe=trickle(d1)&async"></script> 24 25 <script> 26 function addTestScriptElement(title, attributes) { 27 let element = document.createElement('script'); 28 element.className = 'test'; 29 element.setAttribute('data', title); 30 Object.assign(element, attributes); 31 document.head.appendChild(element); 32 } 33 34 addTestScriptElement('script-inserted script', {src: 'support/dummy-1.js?pipe=trickle(d1)&dynamic'}); 35 addTestScriptElement('script-inserted sync script', {async: false, src: 'support/dummy-1.js?pipe=trickle(d1)&dynamicSync'}); 36 addTestScriptElement('script-inserted module script', {type: 'module', src: 'support/dummy-1.mjs?pipe=trickle(d1)&dynamic'}); 37 </script> 38 39 <div id="dummy">Some text</div> 40 41 <script> 42 const testElements = [...document.querySelectorAll('.test')]; 43 const loadObservers = testElements.map(element => new LoadObserver(element)); 44 45 promise_setup(async () => { 46 // Test cases are run after rendering is unblocked. 47 await new Promise(resolve => requestAnimationFrame(resolve)); 48 }); 49 50 for (let index = 0; index < testElements.length; ++index) { 51 promise_test( 52 async () => assert_false(loadObservers[index].finished), 53 testElements[index].getAttribute('data') + ' is not implicitly render-blocking'); 54 } 55 56 for (let index = 0; index < testElements.length; ++index) { 57 promise_test( 58 () => loadObservers[index].load, 59 testElements[index].getAttribute('data') + ' should eventually be loaded and evaluated'); 60 } 61 </script>