link-sequence-of-events.html (1326B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Test the sequence of events when reporting link timing.</title> 4 <meta name="timeout" content="long"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <body> 8 <script> 9 promise_test(async t => { 10 const link = document.createElement('link'); 11 const delay = 500; 12 const src = `./resources/import.sub.css?delay=${delay}` 13 const absoluteURL = new URL(src, location.href).toString(); 14 new PerformanceObserver(t.step_func(() => { 15 const allPerformanceEntries = performance.getEntriesByType('resource'); 16 const linkEntry = allPerformanceEntries.find(e => e.name.includes('import.sub.css')); 17 const importEntry = allPerformanceEntries.find(e => e.name.includes('delay-css')); 18 if (!linkEntry || !importEntry) 19 return; 20 const linkEndTime = linkEntry.startTime + linkEntry.duration; 21 const importEndTime = importEntry.startTime + importEntry.duration; 22 assert_greater_than_equal(importEndTime, linkEndTime + delay, "link load should be done before import load"); 23 t.done(); 24 25 })).observe({type: 'resource'}); 26 link.href = src; 27 link.rel = 'stylesheet'; 28 document.head.appendChild(link); 29 }, "test that @imports don't affect link resource timings"); 30 </script>