transparent-text.html (1322B)
1 <!DOCTYPE html> 2 <script src="/resources/testharness.js"></script> 3 <script src="/resources/testharnessreport.js"></script> 4 <!-- 5 Transparent text should not be eligible for LCP. 6 --> 7 <style> 8 .large-transparent { 9 font-size: 2000px; 10 position: fixed; 11 top: 0; 12 left: 0; 13 padding: 0; 14 margin: 0; 15 pointer-events: none; 16 color: transparent; 17 z-index: -999; 18 } 19 </style> 20 21 <body> 22 <img src='/images/lcp-133x106.png' id='lcp' /> 23 <p id="fake_lcp" class='large-transparent'>fake LCP</p> 24 25 <script> 26 const LcpEntryListPromise = (t) => { 27 return new Promise(resolve => { 28 new PerformanceObserver((entryList, observer) => { 29 if (entryList.getEntries().length > 0) { 30 resolve(entryList.getEntries()); 31 32 observer.disconnect(); 33 } 34 }).observe({ type: 'largest-contentful-paint', buffered: true }); 35 }); 36 } 37 38 promise_test(async t => { 39 assert_implements(window.LargestContentfulPaint, "LargestContentfulPaint is not implemented"); 40 41 lcpEntries = await LcpEntryListPromise(); 42 43 assert_equals(lcpEntries.length, 1, "There should only be 1 entry."); 44 45 assert_true(lcpEntries[0].url.includes('lcp-133x106.png'), "The LCP entry should be the image."); 46 }, "Transparent text should not be LCP.") 47 </script> 48 </body>