image-loading-lazy-relevant-mutations.html (3184B)
1 <!DOCTYPE html> 2 <head> 3 <title>Relevant mutations on deferred loading=lazy images should not trigger 4 a request</title> 5 <link rel="author" title="Dom Farolino" href="mailto:dom@chromium.org"> 6 <link rel="help" href="https://html.spec.whatwg.org/multipage/images.html#updating-the-image-data"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 </head> 10 11 <script> 12 let below_viewport_1_loaded = false, 13 below_viewport_2_loaded = false, 14 below_viewport_3_loaded = false 15 16 // For general lazy loading behavior. 17 promise_test(() => { 18 // When the page loads, start the rest of the tests. 19 return new Promise(resolve => { 20 window.addEventListener("load", e => { 21 const kAssertion = 'image should never load'; 22 assert_false(below_viewport_1_loaded, `below-viewport-1 ${kAssertion}`); 23 assert_false(below_viewport_2_loaded, `below-viewport-2 ${kAssertion}`); 24 assert_false(below_viewport_3_loaded, `below-viewport-3 ${kAssertion}`); 25 resolve(); 26 }); 27 }); 28 }, "Images are lazyloaded"); 29 30 // For `referrerPolicy` attribute mutations. 31 promise_test(t => { 32 return new Promise((resolve, reject) => { 33 const below_viewport_1 = document.querySelector('img#below-viewport-1'); 34 below_viewport_1.onload = reject; 35 below_viewport_1.onerror = reject; 36 t.step_timeout(resolve, 1000); 37 38 below_viewport_1.referrerPolicy = 'no-referrer'; 39 }); 40 }, "Image referrerPolicy mutation does not cause deferred loading=lazy " + 41 "images to be fetched"); 42 43 // For `crossOrigin` attribute mutations. 44 promise_test(t => { 45 return new Promise((resolve, reject) => { 46 const below_viewport_2 = document.querySelector('img#below-viewport-2'); 47 below_viewport_2.onload = reject; 48 below_viewport_2.onerror = reject; 49 t.step_timeout(resolve, 1000); 50 51 below_viewport_2.crossOrigin = 'anonymous'; 52 }); 53 }, "Image crossOrigin mutation does not cause deferred loading=lazy " + 54 "images to be fetched"); 55 56 // For `src` attribute mutations. 57 promise_test(t => { 58 return new Promise((resolve, reject) => { 59 const below_viewport_3 = document.querySelector('img#below-viewport-3'); 60 below_viewport_3.onload = reject; 61 below_viewport_3.onerror = reject; 62 t.step_timeout(resolve, 1000); 63 64 below_viewport_3.src = "resources/image.png?relevant-mutations-change"; 65 }); 66 }, "Image src mutation does not cause deferred loading=lazy " + 67 "images to be fetched"); 68 </script> 69 70 <body> 71 <div style="height:1000vh;"></div> 72 <img id="below-viewport-1" src="resources/image.png?relevant-mutations-1" loading="lazy" 73 onload="below_viewport_1_loaded = true" 74 onerror="below_viewport_1_loaded = true"> 75 76 <img id="below-viewport-2" src="resources/image.png?relevant-mutations-2" loading="lazy" 77 onload="below_viewport_2_loaded = true" 78 onerror="below_viewport_2_loaded = true"> 79 80 <img id="below-viewport-3" src="resources/image.png?relevant-mutations-3" loading="lazy" 81 onload="below_viewport_3_loaded = true" 82 onerror="below_viewport_3_loaded = true"> 83 </body>