<!DOCTYPE HTML> <meta charset=utf-8> <title>Largest Contentful Paint: largest image is reported.</title> <body> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="resources/largest-contentful-paint-helpers.js"></script> <!-- There is some text and some images. We care about blue.png being reported, as it is the largest. --> <p>This is some text! :)</p> <img src='' id='red' /> <img src='' id='blue' /> <img src='' id='black' /> <p>More text!</p> <script> // Add listener for load event that is fired when image is loaded. function image_load_promise(image_element) { return new Promise(resolve => { image_element.addEventListener('load', resolve); }); } promise_test(async (t) => { assert_implements(window.LargestContentfulPaint, "LargestContentfulPaint is not implemented"); let promise = image_load_promise(document.getElementById('red')); document.getElementById('red').src = '/images/red.png'; await promise; const beforeLoad = performance.now(); promise = image_load_promise(document.getElementById('blue')); document.getElementById('blue').src = '/images/blue.png'; await promise; promise = image_load_promise(document.getElementById('black')); document.getElementById('black').src = '/images/black-rectangle.png'; await promise; const observer = new PerformanceObserver( t.step_func(entryList => { entryList.getEntries().forEach(entry => { // The text or other image could be reported as LCP if it is rendered before the blue image. if (entry.id !== 'blue') return; const url = window.location.origin + '/images/blue.png'; // blue.png is 133 by 106. const size = 133 * 106; checkImage(entry, url, 'blue', size, beforeLoad); t.done(); }) }) ); observer.observe({ type: 'largest-contentful-paint', buffered: true }); }, 'Largest Contentful Paint: largest image is reported.'); </script> </body>