fontface-fonts-loading.html (1177B)
1 <!DOCTYPE html> 2 <title>Test document.fonts.ready loading with two fonts</title> 3 <link rel="help" href="https://drafts.csswg.org/css-font-loading/#fontfaceset-ready"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 @font-face { 8 font-family: "AhemTest"; 9 src: url("/fonts/Ahem.ttf") format("truetype"); 10 } 11 .initial { 12 font-family: "AhemTest", sans-serif; 13 font-size: 20px; 14 } 15 </style> 16 <div>Font loading test</div> 17 <script> 18 promise_test(async t => { 19 const fontSet = document.fonts; 20 const readyPromise1 = fontSet.ready; 21 await readyPromise1; 22 assert_equals(fontSet.status, "loaded", "ready promise should resolve when fonts loaded"); 23 24 const dynamicFace = new FontFace("AhemTest2", "url(/fonts/Ahem.ttf)"); 25 fontSet.add(dynamicFace); 26 dynamicFace.load(); 27 const readyPromise2 = fontSet.ready; 28 assert_not_equals(readyPromise1, readyPromise2, "A new FontFace added should create a new document.fonts.ready promise"); 29 30 await readyPromise2; 31 assert_equals(fontSet.status, "loaded", "document.fonts.status should be 'loaded'"); 32 }, "document.fonts.ready is replaced as new fonts are loaded"); 33 </script>