| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>Font-relative lengths on an operator</title> |
| <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> |
| <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#dictionary-based-attributes"> |
| <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#embellished-operators"> |
| <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#definition-of-space-like-elements"> |
| <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#layout-of-mrow"> |
| <meta name="assert" content="Verify font-relative lengths refer to the core operator, not the embellished operator"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/mathml/support/fonts.js"></script> |
| <style> |
| math { |
| font: 100px/1 Ahem; |
| } |
| @font-face { |
| font-family: operators; |
| src: url("/fonts/math/operators.woff"); |
| } |
| mo { |
| font-family: operators; |
| } |
| </style> |
| <script> |
| setup({ explicit_done: true }); |
| window.addEventListener("load", () => { loadAllFonts().then(runTests); }); |
| |
| function runTests() { |
| var epsilon = 1; |
| var baseSizePx = 100; |
| |
| test(function() { |
| var beforeRight = document.getElementById("before1").getBoundingClientRect().right; |
| var afterLeft = document.getElementById("after1").getBoundingClientRect().left; |
| var fontScalePercent = .5; |
| var lspaceEm = 1; |
| var moWidthEm = 1; |
| assert_approx_equals(afterLeft - beforeRight, baseSizePx * fontScalePercent * (lspaceEm + moWidthEm), epsilon, "baseSizePx * fontScalePercent * lspaceEm"); |
| }, `font-relative lspace refers to the core operator`); |
| |
| test(function() { |
| var beforeRight = document.getElementById("before2").getBoundingClientRect().right; |
| var afterLeft = document.getElementById("after2").getBoundingClientRect().left; |
| var fontScalePercent = 2; |
| var rspaceEm = 1; |
| var moWidthEm = 1; |
| assert_approx_equals(afterLeft - beforeRight, baseSizePx * fontScalePercent * (rspaceEm + moWidthEm), epsilon, "baseSizePx * fontScalePercent * rspaceEm"); |
| }, `font-relative rspace refers to the core operator`); |
| |
| test(function() { |
| var moStretchSize = document.getElementById("operator1").getBoundingClientRect().height; |
| var fontScalePercent = .5; |
| var minsizeEm = 8; |
| var beforeHeight = document.getElementById("before1").getBoundingClientRect().height; |
| |
| assert_approx_equals(moStretchSize, baseSizePx * minsizeEm * fontScalePercent, epsilon, "baseSizePx * fontScalePercent * minsizeEm"); |
| |
| // This is really testing the same thing but do make sure minsize is |
| // applied i.e. the unconstrained target size is less than the actual |
| // stretch size. |
| assert_approx_equals(beforeHeight, moStretchSize / 2, epsilon); |
| |
| }, `font-relative minsize refers to the core operator`); |
| |
| test(function() { |
| var moStretchSize = document.getElementById("operator2").getBoundingClientRect().height; |
| var fontScalePercent = 2; |
| var maxsizeEm = 1; |
| var afterHeight = document.getElementById("after2").getBoundingClientRect().height; |
| |
| assert_approx_equals(moStretchSize, baseSizePx * maxsizeEm * fontScalePercent, epsilon, "baseSizePx * fontScalePercent * maxsizeEm"); |
| |
| // This is really testing the same thing but do make sure maxsize is |
| // applied i.e. the unconstrained target size is more than the actual |
| // stretch size. |
| assert_approx_equals(afterHeight, 2 * moStretchSize, epsilon); |
| |
| }, `font-relative maxsize refers to the core operator`); |
| |
| done(); |
| } |
| </script> |
| </head> |
| <body> |
| <div id="log"></div> |
| <p> |
| <math> |
| <mrow> |
| <mspace id="before1" width="1em" height="1em" depth="1em" style="background: blue"/> |
| <mrow style="font-size: 50%;"> |
| <mo id="operator1" lspace="1em" rspace="0em" minsize="8em">⥯</mo> |
| <mspace id="after1" width="1em" height=".5em" depth=".5em" style="background: green"/> |
| </mrow> |
| <mn><!-- not space like --></mn> |
| </mrow> |
| </math> |
| </p> |
| <p> |
| <math> |
| <mrow> |
| <mrow style="font-size: 200%"> |
| <mspace id="before2" width="1em" height=".5em" depth=".5em" style="background: green"/> |
| <mo id="operator2" lspace="0em" rspace="1em" maxsize="1em">⥯</mo> |
| </mrow> |
| <mspace id="after2" width="1em" height="2em" depth="2em" style="background: blue"/> |
| <mn><!-- not space like --></mn> |
| </mrow> |
| </math> |
| </p> |
| </body> |
| </html> |