fontface-load-in-modal-dialog.html (980B)
1 <!doctype html> 2 <link rel="author" title="Xiaocheng Hu" href="xiaochengh@chromium.org"> 3 <link rel="help" href="https://drafts.csswg.org/css-font-loading/#font-face-load"> 4 <link rel="help" href="https://crbug.com/1092411"> 5 <meta name="assert" content="Ensure that content of a modal dialog is re-rendered with loaded web font." /> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <style> 9 #target { 10 font: 25px/1 custom-font, monospace; 11 } 12 </style> 13 <dialog><span id=target>0123456789</span></dialog> 14 <script> 15 document.querySelector('dialog').showModal(); 16 17 function raf() { 18 return new Promise(resolve => requestAnimationFrame(resolve)); 19 } 20 21 promise_test(async () => { 22 await raf(); 23 24 const face = new FontFace('custom-font', 'url(/fonts/Ahem.ttf)'); 25 document.fonts.add(face); 26 await face.load(); 27 28 assert_equals(target.offsetWidth, 250); 29 }, 'Modal dialog content should be re-rendered with loaded web font'); 30 </script>