mo-font-relative-lengths-001.html (4675B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Font-relative lengths on an operator</title> 6 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 7 <link rel="help" href="https://w3c.github.io/mathml-core/#dictionary-based-attributes"> 8 <link rel="help" href="https://w3c.github.io/mathml-core/#embellished-operators"> 9 <link rel="help" href="https://w3c.github.io/mathml-core/#definition-of-space-like-elements"> 10 <link rel="help" href="https://w3c.github.io/mathml-core/#layout-of-mrow"> 11 <meta name="assert" content="Verify font-relative lengths refer to the core operator, not the embellished operator"> 12 <script src="/resources/testharness.js"></script> 13 <script src="/resources/testharnessreport.js"></script> 14 <script src="/mathml/support/fonts.js"></script> 15 <style> 16 math { 17 font: 100px/1 Ahem; 18 } 19 @font-face { 20 font-family: operators; 21 src: url("/fonts/math/operators.woff"); 22 } 23 mo { 24 font-family: operators; 25 } 26 </style> 27 <script> 28 setup({ explicit_done: true }); 29 window.addEventListener("load", () => { loadAllFonts().then(runTests); }); 30 31 function runTests() { 32 var epsilon = 1; 33 var baseSizePx = 100; 34 35 test(function() { 36 var beforeRight = document.getElementById("before1").getBoundingClientRect().right; 37 var afterLeft = document.getElementById("after1").getBoundingClientRect().left; 38 var fontScalePercent = .5; 39 var lspaceEm = 1; 40 var moWidthEm = 1; 41 assert_approx_equals(afterLeft - beforeRight, baseSizePx * fontScalePercent * (lspaceEm + moWidthEm), epsilon, "baseSizePx * fontScalePercent * lspaceEm"); 42 }, `font-relative lspace refers to the core operator`); 43 44 test(function() { 45 var beforeRight = document.getElementById("before2").getBoundingClientRect().right; 46 var afterLeft = document.getElementById("after2").getBoundingClientRect().left; 47 var fontScalePercent = 2; 48 var rspaceEm = 1; 49 var moWidthEm = 1; 50 assert_approx_equals(afterLeft - beforeRight, baseSizePx * fontScalePercent * (rspaceEm + moWidthEm), epsilon, "baseSizePx * fontScalePercent * rspaceEm"); 51 }, `font-relative rspace refers to the core operator`); 52 53 test(function() { 54 var moStretchSize = document.getElementById("operator1").getBoundingClientRect().height; 55 var fontScalePercent = .5; 56 var minsizeEm = 8; 57 var beforeHeight = document.getElementById("before1").getBoundingClientRect().height; 58 59 assert_approx_equals(moStretchSize, baseSizePx * minsizeEm * fontScalePercent, epsilon, "baseSizePx * fontScalePercent * minsizeEm"); 60 61 // This is really testing the same thing but do make sure minsize is 62 // applied i.e. the unconstrained target size is less than the actual 63 // stretch size. 64 assert_approx_equals(beforeHeight, moStretchSize / 2, epsilon); 65 66 }, `font-relative minsize refers to the core operator`); 67 68 test(function() { 69 var moStretchSize = document.getElementById("operator2").getBoundingClientRect().height; 70 var fontScalePercent = 2; 71 var maxsizeEm = 1; 72 var afterHeight = document.getElementById("after2").getBoundingClientRect().height; 73 74 assert_approx_equals(moStretchSize, baseSizePx * maxsizeEm * fontScalePercent, epsilon, "baseSizePx * fontScalePercent * maxsizeEm"); 75 76 // This is really testing the same thing but do make sure maxsize is 77 // applied i.e. the unconstrained target size is more than the actual 78 // stretch size. 79 assert_approx_equals(afterHeight, 2 * moStretchSize, epsilon); 80 81 }, `font-relative maxsize refers to the core operator`); 82 83 done(); 84 } 85 </script> 86 </head> 87 <body> 88 <div id="log"></div> 89 <p> 90 <math> 91 <mrow> 92 <mspace id="before1" width="1em" height="1em" depth="1em" style="background: blue"/> 93 <mrow style="font-size: 50%;"> 94 <mo id="operator1" lspace="1em" rspace="0em" minsize="8em">⥯</mo> 95 <mspace id="after1" width="1em" height=".5em" depth=".5em" style="background: green"/> 96 </mrow> 97 <mn><!-- not space like --></mn> 98 </mrow> 99 </math> 100 </p> 101 <p> 102 <math> 103 <mrow> 104 <mrow style="font-size: 200%"> 105 <mspace id="before2" width="1em" height=".5em" depth=".5em" style="background: green"/> 106 <mo id="operator2" lspace="0em" rspace="1em" maxsize="1em">⥯</mo> 107 </mrow> 108 <mspace id="after2" width="1em" height="2em" depth="2em" style="background: blue"/> 109 <mn><!-- not space like --></mn> 110 </mrow> 111 </math> 112 </p> 113 </body> 114 </html>