progressively-loaded-image.html (2003B)
1 <!DOCTYPE HTML> 2 <meta charset=utf-8> 3 <title>Largest Contentful Paint: Progressively Loaded Image</title> 4 <body> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="resources/largest-contentful-paint-helpers.js"></script> 8 <script src="/common/get-host-info.sub.js"></script> 9 <script> 10 promise_test(async function (t) { 11 assert_implements(window.LargestContentfulPaint, "LargestContentfulPaint is not implemented"); 12 const beforeLoad = performance.now(); 13 const observer = new PerformanceObserver( 14 t.step_func_done(function(entryList) { 15 assert_equals(entryList.getEntries().length, 1); 16 const entry = entryList.getEntries()[0]; 17 const imgElement = document.getElementById('image_id'); 18 const imageSrc = imgElement.currentSrc; 19 const imageWidth = imgElement.naturalWidth; 20 const imageHeight = imgElement.naturalHeight; 21 const size = imageWidth * imageHeight; 22 const lcpLoadTime = entry.loadTime; 23 const lcpRenderTime = entry.renderTime; 24 const resLoadTime = calculateResourceLoadTime(imageSrc); 25 assert_greater_than_equal(lcpLoadTime,resLoadTime,'Load before LCP event fired'); 26 assert_greater_than_equal(lcpRenderTime,resLoadTime,'Load before LCP event rendered'); 27 checkImage(entry, imageSrc, 'image_id', size, beforeLoad); 28 }) 29 ); 30 observer.observe({type: 'largest-contentful-paint', buffered: true}) 31 }, 'Ensure Progressive JPEG LCP load and render events occur after resource loading'); 32 33 function calculateResourceLoadTime(imageSrc) { 34 const entries = performance.getEntriesByName(imageSrc); 35 const resourceEntry = entries[0]; 36 assert_equals(entries.length, 1, 'No Resource timing entry found'); 37 return resourceEntry.responseEnd; 38 } 39 </script> 40 <img src='/images/computer.jpg?pipe=trickle(982:d1)' id='image_id'/> 41 </body> 42 </html>