mo-axis-height-1.html (10943B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>mo axis height</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#operator-fence-separator-or-accent-mo"> 7 <meta name="assert" content="Element mo correctly uses the axis height parameter from the MATH table."> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/mathml/support/fonts.js"></script> 11 <style> 12 math, mspace { 13 font-size: 10px; 14 } 15 @font-face { 16 font-family: axisheight5000-verticalarrow14000; 17 src: url("/fonts/math/axisheight5000-verticalarrow14000.woff"); 18 } 19 </style> 20 <script> 21 var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000 22 var epsilon = 5; 23 24 function getBox(aId) { 25 return document.getElementById(aId).getBoundingClientRect(); 26 } 27 28 setup({ explicit_done: true }); 29 window.addEventListener("load", () => { loadAllFonts().then(runTests); }); 30 31 function runTests() { 32 const AxisHeight = 5000 * emToPx; 33 34 test(function() { 35 var moMiddle = (getBox("mo1").bottom + getBox("mo1").top) / 2; 36 assert_approx_equals(getBox("mo1").height, 37 14000 * emToPx, epsilon, "mo: size"); 38 assert_approx_equals(getBox("baseline1").bottom - moMiddle, 39 AxisHeight, epsilon, "mo: axis height"); 40 }, "symmetric stretching with respect to the math axis (size variant)"); 41 42 test(function() { 43 var moMiddle = (getBox("mo2").bottom + getBox("mo2").top) / 2; 44 assert_approx_equals(getBox("mo2").height, 45 2 * (getBox("target2").height - AxisHeight), 46 epsilon, "mo: size"); 47 assert_approx_equals(getBox("baseline2").bottom - moMiddle, 48 AxisHeight, epsilon, "mo: axis height"); 49 }, "symmetric stretching with respect to the math axis (glyph assembly)"); 50 51 test(function() { 52 const minsize = 14000 * emToPx; 53 const Tascent = minsize / 2 + AxisHeight; 54 const Tdescent = minsize - Tascent; 55 assert_approx_equals(getBox("baseline3").bottom - getBox("mo3").top, Tascent, epsilon, "mo ascent"); 56 assert_approx_equals(getBox("mo3").bottom - getBox("baseline3").bottom, Tdescent, epsilon, "mo descent"); 57 }, "Tascent = Tdescent = 0, minsize = 14em"); 58 59 test(function() { 60 const minsize = 14000 * emToPx; 61 var Tascent = getBox("baseline4").bottom - getBox("target4").top; 62 assert_greater_than(Tascent, AxisHeight); 63 var Tdescent = getBox("target4").bottom - getBox("baseline4").bottom; 64 const T = Tascent + Tdescent; 65 Tascent = Math.max(0, Tascent - AxisHeight) * minsize / T + AxisHeight; 66 Tdescent = minsize - Tascent; 67 assert_approx_equals(getBox("baseline4").bottom - getBox("mo4").top, Tascent, epsilon, "mo ascent"); 68 assert_approx_equals(getBox("mo4").bottom - getBox("baseline4").bottom, Tdescent, epsilon, "mo descent"); 69 }, "Tascent = 6em > AxisHeight, Tdescent = 1em, symmetric = false, minsize = 14em"); 70 71 test(function() { 72 const minsize = 14000 * emToPx; 73 var Tascent = getBox("baseline5").bottom - getBox("target5").top; 74 assert_less_than(Tascent, AxisHeight); 75 var Tdescent = getBox("target5").bottom - getBox("baseline5").bottom; 76 const T = Tascent + Tdescent; 77 Tascent = Math.max(0, Tascent - AxisHeight) * minsize / T + AxisHeight; 78 Tdescent = minsize - Tascent; 79 assert_approx_equals(getBox("baseline5").bottom - getBox("mo5").top, Tascent, epsilon, "mo ascent"); 80 assert_approx_equals(getBox("mo5").bottom - getBox("baseline5").bottom, Tdescent, epsilon, "mo descent"); 81 }, "Tascent = 4em < AxisHeight, Tdescent = 3em, symmetric = false, minsize = 14em"); 82 83 test(function() { 84 const maxsize = 14000 * emToPx; 85 var Tascent = getBox("baseline6").bottom - getBox("target6").top; 86 assert_greater_than(Tascent, AxisHeight); 87 var Tdescent = getBox("target6").bottom - getBox("baseline6").bottom; 88 const T = Tascent + Tdescent; 89 Tascent = Math.max(0, Tascent - AxisHeight) * maxsize / T + AxisHeight; 90 Tdescent = maxsize - Tascent; 91 assert_approx_equals(getBox("baseline6").bottom - getBox("mo6").top, Tascent, epsilon, "mo ascent"); 92 assert_approx_equals(getBox("mo6").bottom - getBox("baseline6").bottom, Tdescent, epsilon, "mo descent"); 93 }, "Tascent = 6em > AxisHeight, Tdescent = 22em, symmetric = false, maxsize = 14em"); 94 95 test(function() { 96 const maxsize = 14000 * emToPx; 97 var Tascent = getBox("baseline7").bottom - getBox("target7").top; 98 assert_less_than(Tascent, AxisHeight); 99 var Tdescent = getBox("target7").bottom - getBox("baseline7").bottom; 100 var T = Tascent + Tdescent; 101 Tascent = Math.max(0, Tascent - AxisHeight) * maxsize / T + AxisHeight; 102 Tdescent = maxsize - Tascent; 103 assert_approx_equals(getBox("baseline7").bottom - getBox("mo7").top, Tascent, epsilon, "mo ascent"); 104 assert_approx_equals(getBox("mo7").bottom - getBox("baseline7").bottom, Tdescent, epsilon, "mo descent"); 105 }, "Tascent = 4em < AxisHeight, Tdescent = 24em, symmetric = false, maxsize = 14em"); 106 107 test(function() { 108 const minsize = 14000 * emToPx; 109 const Uascent = getBox("baseline8").bottom - getBox("target8").top; 110 const Udescent = getBox("target8").bottom - getBox("baseline8").bottom; 111 assert_less_than(2 * Math.max(Uascent - AxisHeight, Udescent + AxisHeight), minsize, "Sascent + Sdescent < minsize"); 112 assert_approx_equals(getBox("mo8").height, minsize, epsilon, "mo size"); 113 const MathAxis = getBox("baseline8").bottom - AxisHeight; 114 assert_approx_equals(MathAxis - getBox("mo8").top, getBox("mo8").bottom - MathAxis, epsilon, "mo is symmetric"); 115 }, "symmetric stretching with respect to the math axis (minsize = 14em)"); 116 117 test(function() { 118 const maxsize = 14000 * emToPx; 119 const Uascent = getBox("baseline9").bottom - getBox("target9").top; 120 const Udescent = getBox("target9").bottom - getBox("baseline9").bottom; 121 assert_greater_than(2 * Math.max(Uascent - AxisHeight, Udescent + AxisHeight), maxsize, "Sascent + Sdescent > maxsize"); 122 assert_approx_equals(getBox("mo9").height, maxsize, epsilon, "mo size"); 123 const MathAxis = getBox("baseline9").bottom - AxisHeight; 124 assert_approx_equals(MathAxis - getBox("mo9").top, getBox("mo9").bottom - MathAxis, epsilon, "mo is symmetric"); 125 }, "symmetric stretching with respect to the math axis (maxsize = 14em)"); 126 127 done(); 128 } 129 </script> 130 </head> 131 <body> 132 <div id="log"></div> 133 <p> 134 <math style="font-family: axisheight5000-verticalarrow14000;"> 135 <mspace id="baseline1" style="background: blue" width="50px" height="1px"/> 136 <mpadded voffset="50px"><mspace style="background: cyan" width="50px" height="1px"/></mpadded> 137 <mrow> 138 <mo id="mo1" symmetric="true" style="color: green">↨</mo> 139 <mpadded style="background: gray" width="10px" height="50px"><mn>1</mn></mpadded> 140 </mrow> 141 </math> 142 <math style="font-family: axisheight5000-verticalarrow14000;"> 143 <mspace id="baseline2" style="background: blue" width="50px" height="1px"/> 144 <mpadded voffset="50px"><mspace style="background: cyan" width="50px" height="1px"/></mpadded> 145 <mrow> 146 <mo id="mo2" symmetric="true" style="color: green">↨</mo> 147 <mpadded id="target2" style="background: gray" width="10px" height="200px"><mn>2</mn></mpadded> 148 </mrow> 149 </math> 150 </p> 151 <p> 152 <math style="font-family: axisheight5000-verticalarrow14000;"> 153 <mspace id="baseline3" style="background: blue" width="50px" height="1px"/> 154 <mpadded voffset="50px"><mspace style="background: cyan" width="50px" height="1px"/></mpadded> 155 <mrow> 156 <mo id="mo3" minsize="14em" style="color: green">↨</mo> 157 <mpadded id="target3" style="background: gray" width="10px" height="0px" depth="0px"><mn>3</mn></mpadded> 158 </mrow> 159 </math> 160 </p> 161 <p> 162 <math style="font-family: axisheight5000-verticalarrow14000;"> 163 <mspace id="baseline4" style="background: blue" width="50px" height="1px"/> 164 <mpadded voffset="50px"><mspace style="background: cyan" width="50px" height="1px"/></mpadded> 165 <mrow> 166 <mo id="mo4" minsize="14em" style="color: green">↨</mo> 167 <mpadded id="target4" style="background: gray" width="10px" height="6em" depth="1em"><mn>4</mn></mpadded> 168 </mrow> 169 </math> 170 <math style="font-family: axisheight5000-verticalarrow14000;"> 171 <mspace id="baseline5" style="background: blue" width="50px" height="1px"/> 172 <mpadded voffset="50px"><mspace style="background: cyan" width="50px" height="1px"/></mpadded> 173 <mrow> 174 <mo id="mo5" minsize="14em" style="color: green">↨</mo> 175 <mpadded id="target5" style="background: gray" width="10px" height="4em" depth="3em"><mn>5</mn></mpadded> 176 </mrow> 177 </math> 178 </p> 179 <p> 180 <math style="font-family: axisheight5000-verticalarrow14000;"> 181 <mspace id="baseline6" style="background: blue" width="50px" height="1px"/> 182 <mpadded voffset="50px"><mspace style="background: cyan" width="50px" height="1px"/></mpadded> 183 <mrow> 184 <mo id="mo6" maxsize="14em" style="color: green">↨</mo> 185 <mpadded id="target6" style="background: gray" width="10px" height="6em" depth="22em"><mn>6</mn></mpadded> 186 </mrow> 187 </math> 188 <math style="font-family: axisheight5000-verticalarrow14000;"> 189 <mspace id="baseline7" style="background: blue" width="50px" height="1px"/> 190 <mpadded voffset="50px"><mspace style="background: cyan" width="50px" height="1px"/></mpadded> 191 <mrow> 192 <mo id="mo7" maxsize="14em" style="color: green">↨</mo> 193 <mpadded id="target7" style="background: gray" width="10px" height="4em" depth="24em"><mn>7</mn></mpadded> 194 </mrow> 195 </math> 196 </p> 197 198 199 <p> 200 <math style="font-family: axisheight5000-verticalarrow14000;"> 201 <mspace id="baseline8" style="background: blue" width="50px" height="1px"/> 202 <mpadded voffset="50px"><mspace style="background: cyan" width="50px" height="1px"/></mpadded> 203 <mrow> 204 <mo id="mo8" symmetric="true" minsize="14em" style="color: green">↨</mo> 205 <mpadded id="target8" style="background: gray" width="10px" height="6em" depth="1em"><mn>8</mn></mpadded> 206 </mrow> 207 </math> 208 <math style="font-family: axisheight5000-verticalarrow14000;"> 209 <mspace id="baseline9" style="background: blue" width="50px" height="1px"/> 210 <mpadded voffset="50px"><mspace style="background: cyan" width="50px" height="1px"/></mpadded> 211 <mrow> 212 <mo id="mo9" symmetric="true" maxsize="14em" style="color: green">↨</mo> 213 <mpadded id="target9" style="background: gray" width="10px" height="6em" depth="24em"><mn>9</mn></mpadded> 214 </mrow> 215 </math> 216 </p> 217 </body> 218 </html>