broken-image-icon.html (1549B)
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <title>Broken Image Icon Should Not Be LCP</title> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 </head> 9 10 <body> 11 <img src="../non-existent-image.jpg"> 12 <img src="/css/css-images/support/colors-16x8.png"> 13 14 <script> 15 promise_test(async () => { 16 // Wait for the first-contentful-paint entry so that we know the broken image 17 // icon has been painted. 18 await new Promise(resolve => { 19 new PerformanceObserver((entryList, observer) => { 20 if (entryList.getEntriesByName('first-contentful-paint').length > 0) { 21 observer.disconnect(); 22 resolve(); 23 } 24 }).observe({ type: 'paint', buffered: true }); 25 }); 26 27 // There should be only 1 LCP entry and it should be the colors-16x8.png though 28 // being smaller than the broken image icon. The broken image icon should not 29 // emit an LCP entry. 30 let LcpEntryListLength = await new Promise(resolve => { 31 new PerformanceObserver((entryList, observer) => { 32 if (entryList.getEntries().filter(e => e.url.includes('colors-16x8.png'))) { 33 observer.disconnect(); 34 resolve(entryList.getEntries().length); 35 } 36 }).observe({ type: 'largest-contentful-paint', buffered: true }); 37 }); 38 39 assert_equals(LcpEntryListLength, 1, 'There should be one and only one LCP entry.'); 40 41 }, "The broken image icon should not emit an LCP entry."); 42 </script> 43 </body> 44 45 </html>