document-fonts-ready.html (1379B)
1 <!DOCTYPE HTML> 2 <title>document.fonts.ready resolves after layout depending on loaded fonts</title> 3 <link rel="help" href="https://drafts.csswg.org/css-font-loading/#fontfaceset-pending-on-the-environment"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 7 <style> 8 #foo { 9 font: 100px/1 Ahem; 10 } 11 </style> 12 <div id="log"></div> 13 <span id="foo">X</span> 14 <script> 15 // The purpose of this test is to ensure that testharness.js tests can use 16 // `document.fonts.ready` to wait for a web font to load, without having to 17 // wait for the window load event before or requestAnimationFrame after. 18 // 19 // The spec says that a FontFaceSet is "pending on the environment" if "the 20 // document has pending layout operations which might cause the user agent to 21 // request a font, or which depend on recently-loaded fonts", and both are 22 // assumed to hold true in this test. 23 async_test(t => { 24 assert_equals(document.fonts.size, 1, 'one font is pending'); 25 document.fonts.ready.then(t.step_func_done(() => { 26 const span = document.getElementById('foo'); 27 const rect = span.getBoundingClientRect(); 28 // If Ahem has loaded, the X will be 100px wide. 29 assert_equals(rect.width, 100, 'span is 100px wide'); 30 })); 31 }); 32 </script>