diff options
Diffstat (limited to 'testing/web-platform/tests/mathml/relations/text-and-math')
3 files changed, 109 insertions, 0 deletions
diff --git a/testing/web-platform/tests/mathml/relations/text-and-math/basic-mathematical-alphanumeric-symbols-with-default-font.html b/testing/web-platform/tests/mathml/relations/text-and-math/basic-mathematical-alphanumeric-symbols-with-default-font.html new file mode 100644 index 0000000000..c1e8d409b9 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/text-and-math/basic-mathematical-alphanumeric-symbols-with-default-font.html @@ -0,0 +1,39 @@ +<!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> diff --git a/testing/web-platform/tests/mathml/relations/text-and-math/use-typo-metrics-1-ref.html b/testing/web-platform/tests/mathml/relations/text-and-math/use-typo-metrics-1-ref.html new file mode 100644 index 0000000000..3f7f764045 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/text-and-math/use-typo-metrics-1-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"/> +<title>Open Font Format: USE_TYPO_METRICS (reference)</title> +<style> + #green { + position: absolute; + background: green; + left: 10px; + width: 230px; + height: 230px; + } +</style> +<body> + <p>Test passes if there is a green square and no red.</p> + + <div> + <div id="green"></div> + </div> +</body> diff --git a/testing/web-platform/tests/mathml/relations/text-and-math/use-typo-metrics-1.html b/testing/web-platform/tests/mathml/relations/text-and-math/use-typo-metrics-1.html new file mode 100644 index 0000000000..1af8fdfde1 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/text-and-math/use-typo-metrics-1.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<meta charset="utf-8"/> +<title>Open Font Format: USE_TYPO_METRICS</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#text-layout"/> +<link rel="match" href="use-typo-metrics-1-ref.html"/> +<meta name="assert" content="Verify that the USE_TYPO_METRICS flag from the OS/2 table is taken into account to calculate line height."> +<style> + @font-face { + font-family: TestFont; + src: url("/fonts/math/lineheight5000-typolineheight2300.woff"); + } + .green { + position: absolute; + background: green; + width: 115px; + } + .red { + position: absolute; + background: red; + width: 115px; + } + .forceHeight { + height: 230px; + } + .leftSide { + left: 10px; + } + .rightSide { + left: 125px; + } + span { + /* em=1000, lineHeight=5000, typoLineHeight=2300 and font-size=100px + implies typoLineHeightPx = 230px < 500px = lineHeightPx */ + font-family: TestFont; + font-size: 100px; + color: transparent; + } +</style> +<body> + <p>Test passes if there is a green square and no red.</p> + + <div> + <!-- Left side verifies that typoLineHeightPx <= 230px --> + <div class="leftSide red"><span>O</span></div> + <div class="leftSide green forceHeight"></div> + + <!-- Right side verifies that typoLineHeightPx => 230px --> + <div class="rightSide red forceHeight"></div> + <div class="rightSide green"><span>O</span></div> + </div> +</body> |