preload-time-to-fetch.https.html (3703B)
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 function test_preload_change(before, after, expected, label) { 11 promise_test(async t => { 12 const link = document.createElement('link'); 13 link.rel = 'preload'; 14 t.add_cleanup(() => link.remove()); 15 const loadErrorOrTimeout = () => new Promise(resolve => { 16 const timeoutMillis = 1000; 17 link.addEventListener('load', () => resolve('load')); 18 link.addEventListener('error', () => resolve('error')); 19 t.step_timeout(() => resolve('timeout'), timeoutMillis); 20 }); 21 for (const attr in before) 22 link.setAttribute(attr, before[attr]); 23 document.head.appendChild(link); 24 const result1 = await loadErrorOrTimeout(); 25 for (const attr in after) { 26 if (attr in before && after[attr] === null) 27 link.removeAttribute(attr); 28 else 29 link.setAttribute(attr, after[attr]); 30 } 31 const result2 = await loadErrorOrTimeout(); 32 assert_array_equals([result1, result2], expected); 33 }, label); 34 } 35 36 test_preload_change( 37 {href: '/common/square.png?1', as: 'image'}, 38 {href: '/common/square.png?2'}, 39 ['load', 'load'], 40 'Changing a preload href should trigger a fetch'); 41 42 test_preload_change( 43 {href: '/common/square.png?3', as: 'style'}, 44 {as: 'image'}, 45 ['load', 'load'], 46 'Changing a preload "as" from a previously non-matching destination should trigger a fetch'); 47 48 test_preload_change( 49 {href: '/common/square.png?4', type: 'text/plain', as: 'image'}, 50 {type: 'image/png'}, 51 ['timeout', 'load'], 52 'Changing a preload "type" (non-matching->matching) should trigger a fetch'); 53 54 test_preload_change( 55 {href: '/common/square.png?4', type: 'text/plain', as: 'image'}, 56 {type: null}, 57 ['timeout', 'load'], 58 'Removing a preload non-matching "type" should trigger a fetch'); 59 60 61 test_preload_change( 62 {href: '/common/square.png?4', type: 'image/png', as: 'image'}, 63 {type: null}, 64 ['load', 'timeout'], 65 'Removing a preload matching "type" should not trigger a fetch'); 66 67 test_preload_change( 68 {href: '/common/square.png?5', as: 'image', media: 'screen and (max-width: 10px)'}, 69 {media: 'screen and (max-width: 20000px)'}, 70 ['timeout', 'load'], 71 'Changing a preload media attribute (non matching->matching) should trigger a fetch'); 72 73 test_preload_change( 74 {href: '/common/square.png?6', as: 'image', media: 'screen and (max-width: 10px)'}, 75 {media: 'screen and (max-width: 20px)'}, 76 ['timeout', 'timeout'], 77 'Changing a preload media attribute (non matching->non matching) should not trigger a fetch'); 78 79 test_preload_change( 80 {href: '/common/square.png?7', as: 'image', media: 'screen and (max-width: 100000px)'}, 81 {media: 'screen and (max-width: 20000px)'}, 82 ['load', 'timeout'], 83 'Changing a preload media attribute (matching->matching) should not trigger a new fetch'); 84 85 test_preload_change( 86 {href: '/common/square.png?8', as: 'image', media: 'screen and (max-width: 100000px)'}, 87 {media: null}, 88 ['load', 'timeout'], 89 'Removing a matching preload media attribute should not trigger a new fetch'); 90 91 92 test_preload_change( 93 {href: '/common/square.png?9', as: 'image', media: 'screen and (max-width: 10px)'}, 94 {media: null}, 95 ['timeout', 'load'], 96 'Removing a non-matching preload media attribute should trigger a new fetch'); 97 98 </script> 99 </body>