underover-parameters-4.tentative.html (16113B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Underscripts and Overscripts parameters</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#underscripts-and-overscripts-munder-mover-munderover"> 7 <link rel="help" href="https://www.w3.org/TR/MathML3/chapter3.html#presm.mo.attrs"> 8 <meta name="assert" content="Elements munder, mover, munderover correctly use underbar/overbar and AccentBaseHeight parameters from the MATH table ; interaction with MathML3 mo@accent."> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="/mathml/support/feature-detection.js"></script> 12 <script src="/mathml/support/fonts.js"></script> 13 <style> 14 math, mspace, mo { 15 font-size: 10px; 16 } 17 @font-face { 18 font-family: accentbaseheight4000underbarextradescender5000; 19 src: url("/fonts/math/underover-accentbaseheight4000-underbarextradescender5000.woff"); 20 } 21 @font-face { 22 font-family: accentbaseheight4000underbarverticalgap7000; 23 src: url("/fonts/math/underover-accentbaseheight4000-underbarverticalgap7000.woff"); 24 } 25 @font-face { 26 font-family: accentbaseheight4000overbarextraascender3000; 27 src: url("/fonts/math/underover-accentbaseheight4000-overbarextraascender3000.woff"); 28 } 29 @font-face { 30 font-family: accentbaseheight4000overbarverticalgap11000; 31 src: url("/fonts/math/underover-accentbaseheight4000-overbarverticalgap11000.woff"); 32 } 33 </style> 34 <script> 35 var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000 36 var epsilon = 2; 37 var axisBaseHeight = 4000 * emToPx; 38 var shortBaseHeight = 3000 * emToPx; // shortBaseHeight < axisBaseHeight 39 var tallBaseHeight = 5000 * emToPx; // tallBaseHeight > axisBaseHeight 40 41 function getBox(aId) { 42 return document.getElementById(aId).getBoundingClientRect(); 43 } 44 45 setup({ explicit_done: true }); 46 window.addEventListener("load", () => { loadAllFonts().then(runTests); }); 47 48 function runTests() { 49 test(function() { 50 assert_true(MathMLFeatureDetection.has_mspace()); 51 52 for (var i = 1; i <= 4; i++) { 53 for (var j = 1; j <= 6; j++) { 54 var baseId = ("base00" + i) + j; 55 assert_approx_equals(getBox("ref00" + i).bottom, 56 getBox(baseId).bottom, 57 epsilon, 58 "alignment of " + baseId); 59 } 60 } 61 }, "Baseline alignment"); 62 63 test(function() { 64 assert_true(MathMLFeatureDetection.has_mspace()); 65 66 for (var i = 1; i <= 4; i++) { 67 for (var j = 1; j <= 6; j++) { 68 var baseId = ("base00" + i) + j; 69 assert_approx_equals(getBox(baseId).height, 70 j == 2 || j == 5 ? 71 tallBaseHeight :shortBaseHeight, 72 epsilon, 73 "height of " + baseId); 74 } 75 } 76 }, "Heights of bases"); 77 78 test(function() { 79 assert_true(MathMLFeatureDetection.has_mspace()); 80 81 var v = 5000 * emToPx; 82 assert_approx_equals(getBox("ref001").bottom - getBox("over0014").bottom, 83 shortBaseHeight, epsilon, 84 "munderover: nonaccent over short base"); 85 assert_approx_equals(getBox("ref001").bottom - getBox("over0015").bottom, 86 tallBaseHeight, epsilon, 87 "munderover: accent over tall base"); 88 assert_approx_equals(getBox("ref001").bottom - getBox("over0016").bottom, 89 axisBaseHeight, epsilon, 90 "munderover: accent over short base"); 91 for (var j = 1; j <= 6; j++) { 92 var elId = "el001" + j; 93 var baseId = "base001" + j; 94 var underId = "under001" + j; 95 assert_approx_equals(getBox(underId).top - getBox(baseId).bottom, 96 0, epsilon, 97 "gap between " + baseId + " and " + underId); 98 assert_approx_equals(getBox(elId).bottom - getBox(underId).bottom, 99 v, epsilon, 100 "extra descender below " + underId); 101 } 102 }, "AccentBaseHeight, UnderbarExtraDescender"); 103 104 test(function() { 105 assert_true(MathMLFeatureDetection.has_mspace()); 106 107 var v = 7000 * emToPx; 108 assert_approx_equals(getBox("ref002").bottom - getBox("over0024").bottom, 109 shortBaseHeight, epsilon, 110 "munderover: nonaccent over short base"); 111 assert_approx_equals(getBox("ref002").bottom - getBox("over0025").bottom, 112 tallBaseHeight, epsilon, 113 "munderover: accent over tall base"); 114 assert_approx_equals(getBox("ref002").bottom - getBox("over0026").bottom, 115 axisBaseHeight, epsilon, 116 "munderover: accent over short base"); 117 for (var j = 1; j <= 6; j++) { 118 var elId = "el002" + j; 119 var baseId = "base002" + j; 120 var underId = "under002" + j; 121 var gap = (j == 2 || j == 3 ? 0 : v); 122 assert_approx_equals(getBox(underId).top - getBox(baseId).bottom, 123 gap, epsilon, 124 "gap between " + baseId + " and " + underId); 125 } 126 }, "AccentBaseHeight, UnderbarVerticalGap"); 127 128 test(function() { 129 assert_true(MathMLFeatureDetection.has_mspace()); 130 131 var v = 3000 * emToPx; 132 assert_approx_equals(getBox("ref003").bottom - getBox("over0031").bottom, 133 shortBaseHeight, epsilon, 134 "mover: nonaccent over short base"); 135 assert_approx_equals(getBox("ref003").bottom - getBox("over0032").bottom, 136 tallBaseHeight, epsilon, 137 "mover: accent over tall base"); 138 assert_approx_equals(getBox("ref003").bottom - getBox("over0033").bottom, 139 axisBaseHeight, epsilon, 140 "mover: accent over short base"); 141 assert_approx_equals(getBox("ref003").bottom - getBox("over0034").bottom, 142 shortBaseHeight, epsilon, 143 "munderover: nonaccent over short base"); 144 assert_approx_equals(getBox("ref003").bottom - getBox("over0035").bottom, 145 tallBaseHeight, epsilon, 146 "munderover: accent over tall base"); 147 assert_approx_equals(getBox("ref003").bottom - getBox("over0036").bottom, 148 axisBaseHeight, epsilon, 149 "munderover: accent over short base"); 150 for (var j = 1; j <= 6; j++) { 151 var elId = "el003" + j; 152 var baseId = "base003" + j; 153 if (j >= 4) { 154 var underId = "under003" + j; 155 assert_approx_equals(getBox(underId).top - getBox(baseId).bottom, 156 0, epsilon, 157 "gap between " + baseId + " and " + underId); 158 } 159 var overId = "over003" + j; 160 assert_approx_equals(getBox(overId).top - getBox(elId).top, 161 v, epsilon, 162 "extra ascender below " + overId); 163 } 164 }, "AccentBaseHeight, OverbarExtraAscender"); 165 166 test(function() { 167 assert_true(MathMLFeatureDetection.has_mspace()); 168 169 v = 11000 * emToPx; 170 assert_approx_equals(getBox("ref004").bottom - getBox("over0041").bottom, 171 shortBaseHeight + v, epsilon, 172 "mover: nonaccent over short base"); 173 assert_approx_equals(getBox("ref004").bottom - getBox("over0042").bottom, 174 tallBaseHeight, epsilon, 175 "mover: accent over tall base"); 176 assert_approx_equals(getBox("ref004").bottom - getBox("over0043").bottom, 177 axisBaseHeight, epsilon, 178 "mover: accent over short base"); 179 assert_approx_equals(getBox("ref004").bottom - getBox("over0044").bottom, 180 shortBaseHeight + v, epsilon, 181 "munderover: nonaccent over short base"); 182 assert_approx_equals(getBox("ref004").bottom - getBox("over0045").bottom, 183 tallBaseHeight, epsilon, 184 "munderover: accent over tall base"); 185 assert_approx_equals(getBox("ref004").bottom - getBox("over0046").bottom, 186 axisBaseHeight, epsilon, 187 "munderover: accent over short base"); 188 for (var j = 4; j <= 6; j++) { 189 var baseId = "base004" + j; 190 var underId = "under004" + j; 191 assert_approx_equals(getBox(underId).top - getBox(baseId).bottom, 192 0, epsilon, 193 "gap between " + baseId + " and " + underId); 194 } 195 }, "AccentBaseHeight, OverbarVerticalGap"); 196 197 done(); 198 } 199 </script> 200 </head> 201 <body> 202 <div id="log"></div> 203 <p> 204 <math style="font-family: accentbaseheight4000underbarextradescender5000;"> 205 <mspace id="ref001" height="1em" width="3em" style="background: green"/> 206 <munder style="background: cyan" id="el0011"> 207 <mspace id="base0011" height="3em" width="1em" style="background: black"/> 208 <mo id="under0011" style="color: blue">°</mo> 209 </munder> 210 <munder style="background: cyan" id="el0012"> 211 <mspace id="base0012" height="5em" width="1em" style="background: black"/> 212 <mo id="under0012" style="color: blue">˘</mo> 213 </munder> 214 <munder style="background: cyan" id="el0013"> 215 <mspace id="base0013" height="3em" width="1em" style="background: black"/> 216 <mo id="under0013" style="color: blue">˘</mo> 217 </munder> 218 <munderover style="background: cyan" id="el0014"> 219 <mspace id="base0014" height="3em" width="1em" style="background: black"/> 220 <mo id="under0014" style="color: blue">°</mo> 221 <mo id="over0014" style="color: red">°</mo> 222 </munderover> 223 <munderover style="background: cyan" id="el0015" accent="true"> 224 <mspace id="base0015" height="5em" width="1em" style="background: black"/> 225 <mo id="under0015" style="color: blue">˘</mo> 226 <mo id="over0015" style="color: red">˘</mo> 227 </munderover> 228 <munderover style="background: cyan" id="el0016" accent="true"> 229 <mspace id="base0016" height="3em" width="1em" style="background: black"/> 230 <mo id="under0016" style="color: blue">˘</mo> 231 <mo id="over0016" style="color: red">˘</mo> 232 </munderover> 233 </math> 234 </p> 235 <hr/> 236 <p> 237 <math style="font-family: accentbaseheight4000underbarverticalgap7000;"> 238 <mspace id="ref002" height="1em" width="3em" style="background: green"/> 239 <munder style="background: cyan" id="el0021" accentunder="false"> 240 <mspace id="base0021" height="3em" width="1em" style="background: black"/> 241 <mo id="under0021" style="color: blue">˘</mo> 242 </munder> 243 <munder style="background: cyan" id="el0022"> 244 <mspace id="base0022" height="5em" width="1em" style="background: black"/> 245 <mo id="under0022" style="color: blue" accent="true">˘</mo> 246 </munder> 247 <munder style="background: cyan" id="el0023"> 248 <mspace id="base0023" height="3em" width="1em" style="background: black"/> 249 <mo id="under0023" style="color: blue" accent="true">°</mo> 250 </munder> 251 <munderover style="background: cyan" id="el0024"> 252 <mspace id="base0024" height="3em" width="1em" style="background: black"/> 253 <mo id="under0024" style="color: blue" accent="false">˘</mo> 254 <mo id="over0024" style="color: red" accent="false">˘</mo> 255 </munderover> 256 <munderover style="background: cyan" id="el0025"> 257 <mspace id="base0025" height="5em" width="1em" style="background: black"/> 258 <mo id="under0025" style="color: blue" accent="false">˘</mo> 259 <mo id="over0025" style="color: red">˘</mo> 260 </munderover> 261 <munderover style="background: cyan" id="el0026"> 262 <mspace id="base0026" height="3em" width="1em" style="background: black"/> 263 <mo id="under0026" style="color: blue" accent="false">˘</mo> 264 <mo id="over0026" style="color: red">˘</mo> 265 </munderover> 266 </math> 267 </p> 268 <hr/> 269 <p> 270 <math style="font-family: accentbaseheight4000overbarextraascender3000;"> 271 <mspace id="ref003" height="1em" width="3em" style="background: green"/> 272 <mover style="background: cyan" id="el0031"> 273 <mspace id="base0031" height="3em" width="1em" style="background: black"/> 274 <mo id="over0031" style="color: red">°</mo> 275 </mover> 276 <mover style="background: cyan" id="el0032" accent="true"> 277 <mspace id="base0032" height="5em" width="1em" style="background: black"/> 278 <mo id="over0032" style="color: red">°</mo> 279 </mover> 280 <mover style="background: cyan" id="el0033"> 281 <mspace id="base0033" height="3em" width="1em" style="background: black"/> 282 <mo id="over0033" style="color: red">˘</mo> 283 </mover> 284 <munderover style="background: cyan" id="el0034"> 285 <mspace id="base0034" height="3em" width="1em" style="background: black"/> 286 <mo id="under0034" style="color: blue">°</mo> 287 <mo id="over0034" style="color: red" accent="false">˘</mo> 288 </munderover> 289 <munderover style="background: cyan" id="el0035" accent="true"> 290 <mspace id="base0035" height="5em" width="1em" style="background: black"/> 291 <mo id="under0035" style="color: blue">˘</mo> 292 <mo id="over0035" style="color: red">˘</mo> 293 </munderover> 294 <munderover style="background: cyan" id="el0036" accent="true"> 295 <mspace id="base0036" height="3em" width="1em" style="background: black"/> 296 <mo id="under0036" style="color: blue">˘</mo> 297 <mo id="over0036" style="color: red">˘</mo> 298 </munderover> 299 </math> 300 </p> 301 <hr/> 302 <p> 303 <math style="font-family: accentbaseheight4000overbarverticalgap11000;"> 304 <mspace id="ref004" height="1em" width="3em" style="background: green"/> 305 <mover style="background: cyan" id="el0041"> 306 <mspace id="base0041" height="3em" width="1em" style="background: black"/> 307 <mo id="over0041" style="color: red">°</mo> 308 </mover> 309 <mover style="background: cyan" id="el0042" accent="true"> 310 <mspace id="base0042" height="5em" width="1em" style="background: black"/> 311 <mo id="over0042" style="color: red">°</mo> 312 </mover> 313 <mover style="background: cyan" id="el0043"> 314 <mspace id="base0043" height="3em" width="1em" style="background: black"/> 315 <mo id="over0043" style="color: red">˘</mo> 316 </mover> 317 <munderover style="background: cyan" id="el0044"> 318 <mspace id="base0044" height="3em" width="1em" style="background: black"/> 319 <mo id="under0044" style="color: blue">°</mo> 320 <mo id="over0044" style="color: red" accent="false">˘</mo> 321 </munderover> 322 <munderover style="background: cyan" id="el0045" accent="true"> 323 <mspace id="base0045" height="5em" width="1em" style="background: black"/> 324 <mo id="under0045" style="color: blue">˘</mo> 325 <mo id="over0045" style="color: red">˘</mo> 326 </munderover> 327 <munderover style="background: cyan" id="el0046" accent="true"> 328 <mspace id="base0046" height="3em" width="1em" style="background: black"/> 329 <mo id="under0046" style="color: blue">˘</mo> 330 <mo id="over0046" style="color: red">˘</mo> 331 </munderover> 332 </math> 333 </p> 334 </body> 335 </html>