web-font-styled-text-resize-swap-after-interaction.html (3514B)
1 <!DOCTYPE html> 2 <script src="/resources/testharness.js"></script> 3 <script src="/resources/testharnessreport.js"></script> 4 <script src=/resources/testdriver.js></script> 5 <script src=/resources/testdriver-actions.js></script> 6 <script src=/resources/testdriver-vendor.js></script> 7 <style></style> 8 <!-- 9 Web-font styled text that gets resized after an interaction stops LCP 10 observation should not make a new LCP emission. 11 --> 12 <textarea id='input'></textarea> 13 <div class="test">LCP: Web Font Styled Text Resize</div> 14 <script> 15 function addCSSRules() { 16 styleSheet = document.styleSheets[0]; 17 fontRuleSet = "@font-face {\ 18 font-family: 'ADTestFaceInteraction';\ 19 src: url('/fonts/AD.woff');\ 20 font-display: swap;\ 21 }"; 22 fontAtRule = ".test {\ 23 font-family: 'ADTestFaceInteraction';\ 24 } "; 25 styleSheet.insertRule(fontRuleSet); 26 styleSheet.insertRule(fontAtRule); 27 } 28 29 function LCPEntryList(t) { 30 return new Promise(resolve => { 31 let = lcpEntries = []; 32 new PerformanceObserver((entryList, observer) => { 33 lcpEntries = lcpEntries.concat(entryList.getEntries()); 34 if (lcpEntries) { 35 // Adding timeout to wait a bit more so that if there are more than 36 // expected LCP entries emitted, they can be observed. 37 t.step_timeout(() => { 38 resolve(lcpEntries); 39 observer.disconnect(); 40 }, 200); 41 } 42 }).observe({ type: 'largest-contentful-paint', buffered: true }); 43 }); 44 } 45 46 promise_test(async t => { 47 await document.fonts.ready; 48 let system_font_size = document.getElementsByClassName('test')[0].offsetHeight; 49 50 // Verify an LCP entry is emitted. 51 let entryList = await LCPEntryList(t); 52 assert_equals(entryList.length, 1, 'Text with system font should make a LCP emission.'); 53 54 let lcpEntryBeforeInteraction = entryList[0]; 55 56 // Add event listener so that CSS rule would be added after there's an 57 // input. 58 let inputElement = document.getElementById('input'); 59 inputElement.addEventListener('keydown', addCSSRules); 60 61 // Send key as input. 62 await test_driver.send_keys(inputElement, 'k'); 63 64 // Wait for web font to load. 65 await document.fonts.ready; 66 67 // Verify web font is downloaded. 68 assert_own_property(window, 'PerformanceResourceTiming', "ResourceTiming not supported"); 69 let url = '/fonts/AD.woff'; 70 var absoluteURL = new URL(url, location.href).href; 71 assert_equals(performance.getEntriesByName(absoluteURL).length, 1, 'Web font should be downloaded.'); 72 73 // Verify web font is available. 74 assert_true(document.fonts.check('16px ADTestFaceInteraction'), 'Font should be the web font added'); 75 76 // Verify web font is applied. 77 let web_font_size = document.getElementsByClassName('test')[0].offsetHeight; 78 assert_not_equals(web_font_size, system_font_size, 'Web font swap should happen'); 79 80 // Assert there is only 1 LCP entry, which verifies the added web font does 81 // not make a new LCP entry after an input. 82 entryList = await LCPEntryList(t); 83 assert_equals(entryList.length, 1, 'Text with system font should not make a LCP emission.'); 84 85 // Verify the LCP entry is the same one emitted before interaction by 86 // asserting the size is the same. 87 assert_equals(lcpEntryBeforeInteraction.size, entryList[0].size, 'There should be only 1 LCP entry emitted.'); 88 89 }, "LCP should be not updated if the web font styled text resize occurs after an interaction happens"); 90 </script>