relevant-mutations-lazy.html (2748B)
1 <!doctype html> 2 <title>img relevant mutations, lazy-loaded</title> 3 <meta name="timeout" content="long"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="support/relevant-mutations.js"></script> 7 <div id=log></div> 8 9 <img src="/images/green-2x2.png"> <!-- block the window load event --> 10 11 <!-- should invoke update the image data, but omit events for layout changes --> 12 <!-- but also see https://github.com/whatwg/html/issues/8492 --> 13 14 <img srcset="/images/green-2x2.png 2w" sizes="auto" width="2" loading="lazy" data-desc="width attribute changes"> 15 16 <img srcset="/images/green-2x2.png 2w" sizes="auto" style="width: 2px" loading="lazy" data-desc="width property changes"> 17 18 <div style="width: 2px"> 19 <img srcset="/images/green-2x2.png 2w" sizes="auto" style="width: 100%" loading="lazy" data-desc="percentage width, CB width changes"> 20 </div> 21 22 <img srcset="/images/green-2x2.png 2w" sizes="auto" style="height: 2px; aspect-ratio: 2 / 2" loading="lazy" data-desc="height property changes (with aspect-ratio)"> 23 24 <img srcset="/images/green-2x2.png 2w" sizes="auto" style="width: 2px" loading="lazy" data-desc="being rendered changes"> 25 26 <!-- should not invoke update the image data --> 27 28 <img srcset="/images/green-2x2.png 2w" sizes="auto" style="width: 2px" loading="lazy" data-desc="loading attribute state changes"> 29 30 <img srcset="/images/green-2x2.png 2w" sizes="auto" style="width: 2px" loading="lazy" data-desc="display property changes to inline-block"> 31 32 <img srcset="/images/green-2x2.png 2w" sizes="auto" style="width: 2px" loading="lazy" data-desc="loading attribute changes to LAZY"> 33 34 <script> 35 const rAF = () => new Promise(resolve => requestAnimationFrame(resolve)); 36 37 onload = async function() { 38 39 await rAF(); 40 await rAF(); 41 42 // lazy-loaded images should have fired their first 'load' event at this point. 43 44 t('width attribute changes', function(img) { 45 img.width = '4'; 46 }, 'load'); 47 48 t('width property changes', function(img) { 49 img.style.width = '4px'; 50 }, 'timeout'); 51 52 t('percentage width, CB width changes', function(img) { 53 img.parentNode.style.width = '4px'; 54 }, 'timeout'); 55 56 t('height property changes (with aspect-ratio)', function(img) { 57 img.style.height = '4px'; 58 }, 'timeout'); 59 60 t('loading attribute state changes', function(img) { 61 img.loading = 'eager'; 62 }, 'timeout'); 63 64 t('being rendered changes', function(img) { 65 img.style.display = 'none'; 66 }, 'timeout'); 67 68 t('display property changes to inline-block', function(img) { 69 img.style.display = 'inline-block'; 70 }, 'timeout'); 71 72 t('loading attribute changes to LAZY', function(img) { 73 img.setAttribute('loading', 'LAZY'); 74 }, 'timeout'); 75 76 done(); 77 }; 78 </script>