preload-connect-to-doc.html (4116B)
1 <!doctype html> 2 <meta name="timeout" content="long"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script src="/common/utils.js"></script> 6 <script src="/preload/resources/preload_helper.js"></script> 7 <body> 8 <script> 9 10 ['attached', 'detacted'].forEach(state => 11 promise_test(async t => { 12 const href = '/common/square.png'; 13 const sequence = []; 14 const name = `with-preload-${state}`; 15 const loaded = new Promise(resolveLoad => { 16 customElements.define(name, class extends HTMLElement { 17 constructor() { 18 super(); 19 const shadow = this.attachShadow({ mode: "closed" }); 20 const link = document.createElement('link'); 21 link.rel = 'preload'; 22 link.as = 'image'; 23 link.href = href; 24 if (state === 'attached') 25 shadow.appendChild(link); 26 sequence.push('constructed'); 27 link.addEventListener('load', () => { 28 sequence.push('loaded'); 29 resolveLoad(); 30 }); 31 } 32 33 connectedCallback() { 34 sequence.push('connected'); 35 } 36 }); 37 }); 38 39 const wrapper = document.createElement(name); 40 const timeout = 500; 41 await new Promise(resolve => t.step_timeout(resolve, timeout)); 42 document.body.appendChild(wrapper); 43 await Promise.any([loaded, new Promise(resolve => t.step_timeout(() => { 44 sequence.push('timeout'); 45 resolve(); 46 }, timeout))]); 47 assert_array_equals(sequence, ['constructed', 'connected', state === 'attached' ? 'loaded' : 'timeout']); 48 }, `preload link should ${state === 'attached' ? 'be fetched when attached' : 'note fetched when detached from'} a shadow DOM`)); 49 50 promise_test(async t => { 51 const href = '/common/square.png'; 52 const doc = document.implementation.createHTMLDocument(); 53 const link = doc.createElement('link'); 54 link.rel = 'preload'; 55 link.as = 'image'; 56 link.href = href; 57 const loaded = new Promise(resolve => link.addEventListener('load', () => resolve('loaded'))); 58 const timeoutMillis = 1000; 59 const timeout = new Promise(resolve => t.step_timeout(() => resolve('timeout'), timeoutMillis)); 60 doc.head.appendChild(link); 61 const result = await Promise.any([loaded, timeout]); 62 assert_equals(result, 'timeout'); 63 }, 'preload links only work for documents within browsing contexts'); 64 65 promise_test(async t => { 66 const href = '/common/square.png'; 67 const fragment = document.createDocumentFragment(); 68 const link = document.createElement('link'); 69 link.rel = 'preload'; 70 link.as = 'image'; 71 link.href = href; 72 fragment.appendChild(link); 73 const timeoutMillis = 1000; 74 let didLoad = false; 75 const loaded = new Promise(resolve => link.addEventListener('load', () => { 76 resolve('loaded'); 77 didLoad = true; 78 })); 79 80 const timeout = () => new Promise(resolve => t.step_timeout(() => resolve('timeout'), timeoutMillis)); 81 await timeout(); 82 assert_false(didLoad, 'Loaded prematurely, fragment not connected to document yet'); 83 document.head.appendChild(link); 84 await Promise.any([loaded, timeout()]); 85 assert_true(didLoad); 86 }, 'preload links from DocumentFragment only work when attached'); 87 88 promise_test(async t => { 89 const href = '/common/square.png'; 90 const link = document.createElement('link'); 91 link.rel = 'preload'; 92 link.as = 'image'; 93 link.href = href; 94 const loaded = new Promise(resolve => link.addEventListener('load', () => resolve('loaded'))); 95 const timeoutMillis = 1000; 96 const timeout = new Promise(resolve => t.step_timeout(() => resolve('timeout'), timeoutMillis)); 97 const result = await Promise.any([loaded, timeout]); 98 assert_equals(result, 'timeout'); 99 }, 'preload links only work when attached to the document'); 100 101 </script> 102 </body>