image-src-change.html (2422B)
1 <!DOCTYPE HTML> 2 <meta charset=utf-8> 3 <title>Largest Contentful Paint: src change triggers new entry.</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 <img src='' id='image_id' /> 10 <script> 11 setup({ "hide_test_state": true }); 12 13 let first_image_src = '/images/black-rectangle.png'; 14 let second_image_src = '/images/blue.png'; 15 let image_id = 'image_id'; 16 17 // Add listener for load event that is fired when image is loaded. 18 const image_load_promise = image_element => { 19 return new Promise(resolve => { 20 image_element.addEventListener('load', resolve); 21 }); 22 } 23 24 // Create a promise that resolves when an LCP is observed. 25 const lcp_observation_promise = image_src => { 26 return new Promise(resolve => { 27 new PerformanceObserver((entryList) => { 28 let lcpEntry = entryList.getEntries().find(e => e.url.includes(image_src)); 29 30 if (lcpEntry) { 31 resolve(lcpEntry); 32 } 33 34 }).observe({ type: 'largest-contentful-paint' }); 35 }); 36 } 37 38 const loadImageAndGetLCPEntry = async image_src => { 39 let LCPObserverPromise = lcp_observation_promise(image_src); 40 41 let image_element = document.getElementById(image_id); 42 43 let promise = image_load_promise(image_element); 44 45 image_element.src = image_src; 46 47 await promise; 48 49 return await LCPObserverPromise; 50 } 51 52 promise_test(async t => { 53 54 assert_implements(window.LargestContentfulPaint, "LargestContentfulPaint is not implemented"); 55 56 57 // Load first image. 58 let beforeLoad = performance.now(); 59 60 let first_LCP = await loadImageAndGetLCPEntry(first_image_src); 61 62 // Verify first LCP entry correctness. The black-rectangle.png is 100 x 50. 63 checkImage(first_LCP, window.location.origin + first_image_src, image_id, 100 * 50, beforeLoad); 64 65 // Load second image. 66 beforeLoad = performance.now(); 67 68 let second_LCP = await loadImageAndGetLCPEntry(second_image_src); 69 70 // Verify second LCP entry correctness. The blue.png is 133 by 106. 71 checkImage(second_LCP, window.location.origin + second_image_src, image_id, 133 * 106, beforeLoad); 72 73 }, 'Largest Contentful Paint: changing src causes a new entry to be dispatched.'); 74 </script> 75 </body>