web-font-styled-text-resize-block.html (1940B)
1 <!DOCTYPE html> 2 <script src="/resources/testharness.js"></script> 3 <script src="/resources/testharnessreport.js"></script> 4 <!-- 5 Web-font styled text that gets resized during block period should not make a 6 LCP emission. 7 --> 8 <style> 9 @font-face { 10 font-family: 'ADTestFaceBlock'; 11 src: url('/fonts/AD.woff'); 12 font-display: block; 13 } 14 15 .test { 16 font-family: 'ADTestFaceBlock'; 17 } 18 19 </style> 20 <div class="test">LCP: Web Font Styled Text Resize</div> 21 <script> 22 function LCPEntryList(t) { 23 return new Promise(resolve => { 24 let = lcpEntries = []; 25 new PerformanceObserver((entryList, observer) => { 26 lcpEntries = lcpEntries.concat(entryList.getEntries()); 27 if (lcpEntries) { 28 // Adding timeout to wait a bit more so that if there are more than 29 // expected LCP entries emitted, they can be observed. 30 t.step_timeout(() => { 31 resolve(lcpEntries); 32 observer.disconnect(); 33 }, 200); 34 } 35 }).observe({ type: 'largest-contentful-paint', buffered: true }); 36 }); 37 } 38 39 promise_test(async t => { 40 await document.fonts.ready; 41 42 // Verify web font is downloaded. 43 assert_own_property(window, 'PerformanceResourceTiming', "ResourceTiming not supported"); 44 let url = '/fonts/AD.woff'; 45 var absoluteURL = new URL(url, location.href).href; 46 assert_equals(performance.getEntriesByName(absoluteURL).length, 1, 'Web font\ 47 should be downloaded'); 48 49 // Verify web font is available. 50 assert_true(document.fonts.check('16px ADTestFaceBlock'), 'Font should be the web font added'); 51 52 // Verify there is only one LCP entry. 53 let entryList = await LCPEntryList(t); 54 assert_equals(entryList.length, 1, 'Web font styled text resize that occurs during block period should not make a new LCP emission.'); 55 56 }, "LCP should be not updated if the web font styled text resize occurs during the block period."); 57 </script>