larger-image.html (2149B)
1 <!DOCTYPE HTML> 2 <meta charset=utf-8> 3 <title>Largest Contentful Paint: largest image is reported.</title> 4 5 <body> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="resources/largest-contentful-paint-helpers.js"></script> 9 <!-- There is some text and some images. We care about lcp-133x106.png being reported, as it is the largest. --> 10 <p>This is some text! :)</p> 11 <img src='' id='lcp1' /> 12 <img src='' id='lcp2' /> 13 <img src='' id='lcp3' /> 14 <p>More text!</p> 15 <script> 16 // Add listener for load event that is fired when image is loaded. 17 function image_load_promise(image_element) { 18 return new Promise(resolve => { 19 image_element.addEventListener('load', resolve); 20 }); 21 } 22 23 promise_test(async (t) => { 24 assert_implements(window.LargestContentfulPaint, "LargestContentfulPaint is not implemented"); 25 26 let promise = image_load_promise(document.getElementById('lcp1')); 27 document.getElementById('lcp1').src = '/images/lcp-100x50.png'; 28 await promise; 29 30 const beforeLoad = performance.now(); 31 32 promise = image_load_promise(document.getElementById('lcp2')); 33 document.getElementById('lcp2').src = '/images/lcp-133x106.png'; 34 await promise; 35 36 promise = image_load_promise(document.getElementById('lcp3')); 37 document.getElementById('lcp3').src = '/images/lcp-100x50-alt.png'; 38 await promise; 39 40 const observer = new PerformanceObserver( 41 t.step_func(entryList => { 42 entryList.getEntries().forEach(entry => { 43 // The text or other image could be reported as LCP if it is rendered before the larger image. 44 if (entry.id !== 'lcp2') 45 return; 46 47 const url = window.location.origin + '/images/lcp-133x106.png'; 48 const size = 133 * 106; 49 checkImage(entry, url, 'lcp2', size, beforeLoad); 50 t.done(); 51 }) 52 }) 53 ); 54 observer.observe({ type: 'largest-contentful-paint', buffered: true }); 55 }, 'Largest Contentful Paint: largest image is reported.'); 56 </script> 57 </body>