39 lines
2.1 KiB
HTML
39 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8"/>
|
||
<title>Basic mathematical alphanumeric symbols with default font</title>
|
||
<meta name="assert" content="Verify whether the default font contains italic/bold/bold-italic characters from the Mathematical Alphanumeric Symbols block.">
|
||
<script src="/resources/testharness.js"></script>
|
||
<script src="/resources/testharnessreport.js"></script>
|
||
<style>
|
||
span[data-name] {
|
||
font-size: 100px;
|
||
background: lightblue;
|
||
display: inline-block;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="log"></div>
|
||
<p><span id="frakturL" data-name="U+1D529 MATHEMATICAL FRAKTUR SMALL L">𝔩</span></p>
|
||
<p><span id="emSpace" data-name="U+2003 EM SPACE"> </span></p>
|
||
<p><span data-test="Bold" data-name="U+1D416 MATHEMATICAL BOLD CAPITAL W">𝐖</span></p>
|
||
<p><span data-test="Italic" data-name="U+1D44A MATHEMATICAL ITALIC CAPITAL W">𝑊</span></p>
|
||
<p><span data-test="Bold-italic" data-name="U+1D47E MATHEMATICAL BOLD ITALIC CAPITAL">𝑾</span></p>
|
||
<script>
|
||
const frakturLWidth = document.getElementById("frakturL").getBoundingClientRect().width;
|
||
const emSpaceWidth = document.getElementById("emSpace").getBoundingClientRect().width;
|
||
Array.from(document.querySelectorAll('span[data-test]')).forEach(span => {
|
||
test(function() {
|
||
let spanWidth = span.getBoundingClientRect().width;
|
||
// This test expects the default font to provide a fraktur l than is much thiner than a bold/italic/bold-italic W.
|
||
// If the font lacks bold/italic/bold-italic W then a fortiori it is likely that its lacks fraktur l, so browsers
|
||
// will display "Tofu characters" for all of them (e.g. gray boxes or boxes containing the Unicode code points)
|
||
// with very similar widths, so the test is likely to fail.
|
||
assert_greater_than(spanWidth, frakturLWidth + emSpaceWidth / 4, `Width of '${span.dataset.name}' is much larger than '${frakturL.dataset.name}'`);
|
||
}, `${span.dataset.test} mathematical alphanumeric symbol with the default font`);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|