basic-mathematical-alphanumeric-symbols-with-default-font.html (2183B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>Basic mathematical alphanumeric symbols with default font</title> 6 <meta name="assert" content="Verify whether the default font contains italic/bold/bold-italic characters from the Mathematical Alphanumeric Symbols block."> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <style> 10 span[data-name] { 11 font-size: 100px; 12 background: lightblue; 13 display: inline-block; 14 } 15 </style> 16 </head> 17 <body> 18 <div id="log"></div> 19 <p><span id="frakturL" data-name="U+1D529 MATHEMATICAL FRAKTUR SMALL L">𝔩</span></p> 20 <p><span id="emSpace" data-name="U+2003 EM SPACE"> </span></p> 21 <p><span data-test="Bold" data-name="U+1D416 MATHEMATICAL BOLD CAPITAL W">𝐖</span></p> 22 <p><span data-test="Italic" data-name="U+1D44A MATHEMATICAL ITALIC CAPITAL W">𝑊</span></p> 23 <p><span data-test="Bold-italic" data-name="U+1D47E MATHEMATICAL BOLD ITALIC CAPITAL">𝑾</span></p> 24 <script> 25 const frakturLWidth = document.getElementById("frakturL").getBoundingClientRect().width; 26 const emSpaceWidth = document.getElementById("emSpace").getBoundingClientRect().width; 27 Array.from(document.querySelectorAll('span[data-test]')).forEach(span => { 28 test(function() { 29 let spanWidth = span.getBoundingClientRect().width; 30 // This test expects the default font to provide a fraktur l than is much thiner than a bold/italic/bold-italic W. 31 // If the font lacks bold/italic/bold-italic W then a fortiori it is likely that its lacks fraktur l, so browsers 32 // will display "Tofu characters" for all of them (e.g. gray boxes or boxes containing the Unicode code points) 33 // with very similar widths, so the test is likely to fail. 34 assert_greater_than(spanWidth, frakturLWidth + emSpaceWidth / 4, `Width of '${span.dataset.name}' is much larger than '${frakturL.dataset.name}'`); 35 }, `${span.dataset.test} mathematical alphanumeric symbol with the default font`); 36 }); 37 </script> 38 </body> 39 </html>