generic-family-keywords-003.html (2199B)
1 <!DOCTYPE html> 2 <title>Test quotes vs. no-quotes matchings of generic font family keywords in a CanvasRenderingContext2D</title> 3 <link rel="help" href="https://drafts.csswg.org/css-fonts-4/#family-name-syntax"> 4 <link rel="author" title="Frédéric Wang" href="mailto:fwang@igalia.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 <body> 10 <canvas id="canvas" width="400" height="150"></canvas> 11 <script> 12 setup({ explicit_done: true }); 13 window.addEventListener("load", () => { document.fonts.load("25px Ahem").then(runTests); }); 14 function runTests() { 15 const measured_text = "|||||"; 16 const canvas = document.getElementById("canvas"); 17 const ctx = canvas.getContext("2d"); 18 ctx.font = `25px Ahem`; 19 let ahem_expected_width = ctx.measureText(measured_text).width; 20 21 kGenericFontFamilyKeywords.forEach(keyword => { 22 promise_test(async function() { 23 ctx.font = `25px ${keyword}`; 24 let expected_width = ctx.measureText(measured_text).width; 25 26 // Insert the @font-face rules for quoted and unquoted keywords. 27 document.documentElement.insertAdjacentHTML('beforeend', ` 28 <style> 29 @font-face { 30 font-family: ${keyword}; 31 src: local(Ahem), url('/fonts/Ahem.ttf'); 32 } 33 </style> 34 <style> 35 @font-face { 36 font-family: "${keyword}"; 37 src: local(Ahem), url('/fonts/Ahem.ttf'); 38 } 39 </style>`); 40 41 await document.fonts.load(`25px ${keyword}`); 42 ctx.font = `25px ${keyword}`; 43 let unquoted_width = ctx.measureText(measured_text).width; 44 assert_equals(unquoted_width, expected_width, `unquoted ${keyword} does not match @font-face rule`); 45 46 await document.fonts.load(`25px "${keyword}"`); 47 ctx.font = `25px "${keyword}"`; 48 let quoted_width = ctx.measureText(measured_text).width; 49 assert_equals(quoted_width, ahem_expected_width, `quoted ${keyword} matches @font-face rule`); 50 }, `@font-face matching for quoted and unquoted ${keyword} (drawing text in a canvas)`); 51 }); 52 done(); 53 } 54 </script> 55 </body>