transparent-text-with-text-stroke.html (1475B)
1 <!DOCTYPE html> 2 <script src="/resources/testharness.js"></script> 3 <script src="/resources/testharnessreport.js"></script> 4 <!-- 5 Transparent text with text stroke decoration should be eligible for LCP. 6 --> 7 <style> 8 .large-transparent { 9 font-size: 200px; 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 -webkit-text-stroke: 1px blue; 19 } 20 </style> 21 22 <body> 23 <img src='/images/lcp-133x106.png' id='image' /> 24 <p id='larger_text' class='large-transparent'>fake LCP</p> 25 26 <script> 27 const LcpEntryPromise = (entry_id) => { 28 return new Promise(resolve => { 29 new PerformanceObserver((entryList, observer) => { 30 if (entryList.getEntries().filter(e => e.id == entry_id).length > 0) { 31 resolve(entryList.getEntries()); 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 LcpEntryPromise('larger_text'); 42 43 assert_equals(lcpEntries[lcpEntries.length - 1].id, 'larger_text', 44 "Transparent text with text stroke decoration was included in LCP but not at correct place in timeline."); 45 }, "Transparent text with text stroke decoration should not be excluded from LCP.") 46 </script> 47 </body>