generic-family-keywords-001.html (2142B)
1 <!DOCTYPE html> 2 <title>CSS Test: Test generic family keywords matching for @font-face</title> 3 <link rel="help" href="https://drafts.csswg.org/css-fonts-4/#family-name-syntax"> 4 <link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.com"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/css/css-fonts/support/font-family-keywords.js"></script> 8 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"/> 9 <style> 10 div { 11 font-size: 10px; 12 } 13 #ahem { 14 font-family: Ahem; 15 } 16 </style> 17 <body> 18 <div><span id="ahem">00000</span></div> 19 <div><span id="test">00000</span></div> 20 <script> 21 setup({ explicit_done: true }); 22 window.addEventListener("load", () => { document.fonts.ready.then(runTests); }); 23 function runTests() { 24 let ahem = document.getElementById('ahem'); 25 let ahem_expected_width = ahem.offsetWidth; 26 kGenericFontFamilyKeywords.forEach(keyword => { 27 promise_test(async function() { 28 let element = document.getElementById('test'); 29 element.setAttribute("style", `font-family: ${keyword};`); 30 let expected_width = element.offsetWidth; 31 32 // Insert the @font-face rules for quoted and unquoted keywords. 33 // NOTE that we have to wait for font loads again at each step, 34 // as new asynchronous loads may be initiated when the style changes. 35 document.documentElement.insertAdjacentHTML('beforeend', ` 36 <style> 37 @font-face { 38 font-family: ${keyword}; 39 src: local(Ahem), url('/fonts/Ahem.ttf'); 40 } 41 </style> 42 <style> 43 @font-face { 44 font-family: "${keyword}"; 45 src: local(Ahem), url('/fonts/Ahem.ttf'); 46 } 47 </style>`); 48 await document.fonts.ready; 49 assert_equals(element.offsetWidth, expected_width, `unquoted ${keyword} does not match @font-face rule`); 50 51 element.setAttribute("style", `font-family: "${keyword}";`); 52 await document.fonts.ready; 53 assert_equals(element.offsetWidth, ahem_expected_width, `quoted ${keyword} matches @font-face rule`); 54 }, `@font-face matching for quoted and unquoted ${keyword}`); 55 }); 56 done(); 57 } 58 </script> 59 </body>