initially-invisible-images.html (2033B)
1 <!DOCTYPE HTML> 2 <head> 3 <title>Largest Contentful Paint: initially out-of-viewport image gets an LCP entry once they are visible.</title> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 .flex-container { 8 display: flex; 9 flex-direction: row; 10 width: 1000px; 11 overflow-x: hidden; 12 scroll-behavior: auto; 13 } 14 </style> 15 </head> 16 <body> 17 <div> 18 <div class='flex-container' id="container"> 19 <img src='/images/lcp-100x50.png?pipe=trickle(d1)' width="1000" height="1000"/> 20 <img src='/images/lcp-1x1.png?1' width="1000" height="1000"/> 21 <img src='/images/lcp-1x1.png?2' width="1000" height="1000"/> 22 <img src='/images/lcp-1x1.png?3' width="1000" height="1000"/> 23 </div> 24 </div> 25 <script> 26 // Spin the carousel 27 setup({"hide_test_state": true}); 28 const images = document.querySelectorAll('img'); 29 30 let selected = 0; 31 const container = document.getElementById("container"); 32 const transition = () => { 33 container.scrollLeft = selected * 1000; 34 selected = (selected + 1) % images.length; 35 } 36 37 container.scrollLeft=1000; 38 setInterval(transition, 1000); 39 40 promise_test(async t => { 41 42 return new Promise(resolve => { 43 assert_implements(window.LargestContentfulPaint, 44 "LargestContentfulPaint is not implemented"); 45 const observer = new PerformanceObserver(entryList => { 46 entryList.getEntries().forEach(entry => { 47 // May receive a text entry. Ignore that entry. 48 if (!entry.url) { 49 return; 50 } 51 assert_true(entry.url.includes("lcp-100x50.png"), "Re-visible image has an entry"); 52 resolve(); 53 }); 54 }); 55 observer.observe({type: 'largest-contentful-paint', buffered: true}); 56 t.step_timeout(() => { 57 assert_unreached("The image should have become visible by now, which should have triggered an LCP entry."); 58 t.done(); 59 }, 2000); 60 }); 61 }, 'Image visibility: out-of-viewport images are observable by LargestContentfulPaint once they become visible.'); 62 </script> 63 </body>