frac-parameters-1.html (16128B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Fraction parameters</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac"> 7 <meta name="assert" content="Element mfrac correctly uses the fraction parameters from the MATH table."> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/mathml/support/feature-detection.js"></script> 11 <script src="/mathml/support/fonts.js"></script> 12 <style> 13 math, mspace { 14 font-size: 10px; 15 } 16 @font-face { 17 font-family: axisheight7000-rulethickness1000; 18 src: url("/fonts/math/fraction-axisheight7000-rulethickness1000.woff"); 19 } 20 @font-face { 21 font-family: denominatordisplaystylegapmin5000-rulethickness1000; 22 src: url("/fonts/math/fraction-denominatordisplaystylegapmin5000-rulethickness1000.woff"); 23 } 24 @font-face { 25 font-family: denominatordisplaystyleshiftdown6000-axisheight1000-rulethickness1000; 26 src: url("/fonts/math/fraction-denominatordisplaystyleshiftdown6000-axisheight1000-rulethickness1000.woff"); 27 } 28 @font-face { 29 font-family: denominatorgapmin4000-rulethickness1000; 30 src: url("/fonts/math/fraction-denominatorgapmin4000-rulethickness1000.woff"); 31 } 32 @font-face { 33 font-family: denominatorshiftdown3000-axisheight1000-rulethickness1000; 34 src: url("/fonts/math/fraction-denominatorshiftdown3000-axisheight1000-rulethickness1000.woff"); 35 } 36 @font-face { 37 font-family: numeratordisplaystylegapmin8000-rulethickness1000; 38 src: url("/fonts/math/fraction-numeratordisplaystylegapmin8000-rulethickness1000.woff"); 39 } 40 @font-face { 41 font-family: numeratordisplaystyleshiftup2000-axisheight1000-rulethickness1000; 42 src: url("/fonts/math/fraction-numeratordisplaystyleshiftup2000-axisheight1000-rulethickness1000.woff"); 43 } 44 @font-face { 45 font-family: numeratorgapmin9000-rulethickness1000; 46 src: url("/fonts/math/fraction-numeratorgapmin9000-rulethickness1000.woff"); 47 } 48 @font-face { 49 font-family: numeratorshiftup11000-axisheight1000-rulethickness1000; 50 src: url("/fonts/math/fraction-numeratorshiftup11000-axisheight1000-rulethickness1000.woff"); 51 } 52 @font-face { 53 font-family: rulethickness10000; 54 src: url("/fonts/math/fraction-rulethickness10000.woff"); 55 } 56 </style> 57 <script> 58 var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000 59 var epsilon = 1; 60 61 function getBox(aId) { 62 return document.getElementById(aId).getBoundingClientRect(); 63 } 64 65 setup({ explicit_done: true }); 66 window.addEventListener("load", () => { loadAllFonts().then(runTests); }); 67 68 function runTests() { 69 test(function() { 70 assert_true(MathMLFeatureDetection.has_mspace()); 71 72 var v1 = 7000 * emToPx; 73 var v2 = 1000 * emToPx; 74 assert_approx_equals(getBox("ref0001").top - getBox("num0001").bottom, 75 v1 + v2 / 2, epsilon, "mfrac: axis height"); 76 }, "AxisHeight"); 77 78 test(function() { 79 assert_true(MathMLFeatureDetection.has_mspace()); 80 81 var v1 = 5000 * emToPx; 82 assert_approx_equals(getBox("den0002").top - getBox("ref0002").bottom, 83 v1, epsilon, "mfrac: denominator gap"); 84 }, "DenominatorDisplayStyleGapMin"); 85 86 test(function() { 87 assert_true(MathMLFeatureDetection.has_mspace()); 88 89 var v1 = 6000 * emToPx; 90 assert_approx_equals(getBox("den0003").top - getBox("ref0003").bottom, 91 v1, epsilon, "mfrac: denominator shift"); 92 }, "DenominatorDisplayStyleShiftDown"); 93 94 test(function() { 95 assert_true(MathMLFeatureDetection.has_mspace()); 96 97 var v1 = 5000 * emToPx; 98 assert_approx_equals(getBox("den0002b").top - getBox("ref0002b").bottom, 99 v1, epsilon, "mfrac: denominator gap"); 100 }, "DenominatorDisplayStyleGapMin Displaystyle"); 101 test(function() { 102 assert_true(MathMLFeatureDetection.has_mspace()); 103 var v1 = 6000 * emToPx; 104 assert_approx_equals(getBox("den0003b").top - getBox("ref0003b").bottom, 105 v1, epsilon, "mfrac: denominator shift"); 106 }, "DenominatorDisplayStyleShiftDown Displaystyle"); 107 test(function() { 108 assert_true(MathMLFeatureDetection.has_mspace()); 109 var v1 = 5000 * emToPx; 110 assert_approx_equals(getBox("den0002c").top - getBox("ref0002c").bottom, 111 v1, epsilon, "mfrac: denominator gap"); 112 }, "DenominatorDisplayStyleGapMin Displaystyle on fraction"); 113 test(function() { 114 assert_true(MathMLFeatureDetection.has_mspace()); 115 var v1 = 6000 * emToPx; 116 assert_approx_equals(getBox("den0003c").top - getBox("ref0003c").bottom, 117 v1, epsilon, "mfrac: denominator shift"); 118 }, "DenominatorDisplayStyleShiftDown Displaystyle on fraction"); 119 120 test(function() { 121 assert_true(MathMLFeatureDetection.has_mspace()); 122 var v1 = 4000 * emToPx; 123 assert_approx_equals(getBox("den0004").top - getBox("ref0004").bottom, 124 v1, epsilon, "mfrac: denominator gap"); 125 }, "DenominatorGapMin"); 126 127 test(function() { 128 assert_true(MathMLFeatureDetection.has_mspace()); 129 130 var v1 = 3000 * emToPx; 131 assert_approx_equals(getBox("den0005").top - getBox("ref0005").bottom, 132 v1, epsilon, "mfrac: denominator shift"); 133 }, "DenominatorShiftDown"); 134 135 test(function() { 136 assert_true(MathMLFeatureDetection.has_mspace()); 137 var v1 = 4000 * emToPx; 138 assert_approx_equals(getBox("den0004b").top - getBox("ref0004b").bottom, 139 v1, epsilon, "mfrac: denominator gap"); 140 }, "DenominatorGapMin Displaystyle on fraction"); 141 142 test(function() { 143 assert_true(MathMLFeatureDetection.has_mspace()); 144 145 var v1 = 3000 * emToPx; 146 assert_approx_equals(getBox("den0005b").top - getBox("ref0005b").bottom, 147 v1, epsilon, "mfrac: denominator shift"); 148 }, "DenominatorShiftDown Displaystyle on fraction"); 149 150 test(function() { 151 assert_true(MathMLFeatureDetection.has_mspace()); 152 153 var v1 = 8000 * emToPx; 154 assert_approx_equals(getBox("ref0006").top - getBox("num0006").bottom, 155 v1, epsilon, "mfrac: numerator gap"); 156 }, "NumeratorDisplayStyleGapMin"); 157 158 test(function() { 159 assert_true(MathMLFeatureDetection.has_mspace()); 160 161 var v1 = 2000 * emToPx; 162 assert_approx_equals(getBox("ref0007").top - getBox("num0007").bottom, 163 v1, epsilon, "mfrac: numerator shift"); 164 }, "NumeratorDisplayStyleShiftDown"); 165 166 test(function() { 167 assert_true(MathMLFeatureDetection.has_mspace()); 168 169 var v1 = 8000 * emToPx; 170 assert_approx_equals(getBox("ref0006b").top - getBox("num0006b").bottom, 171 v1, epsilon, "mfrac: numerator gap"); 172 }, "NumeratorDisplayStyleGapMin Displaystyle"); 173 174 test(function() { 175 assert_true(MathMLFeatureDetection.has_mspace()); 176 177 var v1 = 2000 * emToPx; 178 assert_approx_equals(getBox("ref0007b").top - getBox("num0007b").bottom, 179 v1, epsilon, "mfrac: numerator shift"); 180 }, "NumeratorDisplayStyleShiftDown Displaystyle"); 181 182 test(function() { 183 assert_true(MathMLFeatureDetection.has_mspace()); 184 185 var v1 = 8000 * emToPx; 186 assert_approx_equals(getBox("ref0006c").top - getBox("num0006c").bottom, 187 v1, epsilon, "mfrac: numerator gap"); 188 }, "NumeratorDisplayStyleGapMin Displaystyle on fraction"); 189 190 test(function() { 191 assert_true(MathMLFeatureDetection.has_mspace()); 192 193 var v1 = 2000 * emToPx; 194 assert_approx_equals(getBox("ref0007c").top - getBox("num0007c").bottom, 195 v1, epsilon, "mfrac: numerator shift"); 196 }, "NumeratorDisplayStyleShiftDown Displaystyle on fraction"); 197 198 test(function() { 199 assert_true(MathMLFeatureDetection.has_mspace()); 200 201 var v1 = 9000 * emToPx; 202 assert_approx_equals(getBox("ref0008").top - getBox("num0008").bottom, 203 v1, epsilon, "mfrac: numerator gap"); 204 }, "NumeratorGapMin"); 205 206 test(function() { 207 assert_true(MathMLFeatureDetection.has_mspace()); 208 209 var v1 = 11000 * emToPx; 210 assert_approx_equals(getBox("ref0009").top - getBox("num0009").bottom, 211 v1, epsilon, "mfrac: numerator shift"); 212 }, "NumeratorShiftDown"); 213 214 test(function() { 215 assert_true(MathMLFeatureDetection.has_mspace()); 216 217 var v1 = 10000 * emToPx; 218 assert_approx_equals(getBox("den0010").top - getBox("num0010").bottom, 219 v1, epsilon, "mfrac: rule thickness"); 220 }, "FractionRuleThickness"); 221 222 done(); 223 } 224 </script> 225 </head> 226 <body> 227 <div id="log"></div> 228 <p> 229 <math style="font-family: axisheight7000-rulethickness1000;"> 230 <mspace id="ref0001" depth="1em" width="3em" style="background: green"/> 231 <mfrac> 232 <mspace width="3em" height="1em" id="num0001" style="background: blue"/> 233 <mspace width="3em"/> 234 </mfrac> 235 </math> 236 </p> 237 <hr/> 238 <p> 239 <math display="block" style="font-family: denominatordisplaystylegapmin5000-rulethickness1000;"> 240 <mspace id="ref0002" width="3em" 241 height=".5em" depth=".5em" style="background: green"/> 242 <mfrac> 243 <mspace width="3em"/> 244 <mspace width="3em" height="1em" id="den0002" style="background: blue"/> 245 </mfrac> 246 </math> 247 </p> 248 <hr/> 249 <p> 250 <math display="block" style="font-family: denominatordisplaystyleshiftdown6000-axisheight1000-rulethickness1000;"> 251 <mspace id="ref0003" width="3em" height="1em" style="background: green"/> 252 <mfrac> 253 <mspace width="3em"/> 254 <mspace width="3em" depth="1em" id="den0003" style="background: blue"/> 255 </mfrac> 256 </math> 257 </p> 258 <hr/> 259 <p> 260 <math displaystyle="true" style="font-family: denominatordisplaystylegapmin5000-rulethickness1000;"> 261 <mspace id="ref0002b" width="3em" 262 height=".5em" depth=".5em" style="background: green"/> 263 <mfrac> 264 <mspace width="3em"/> 265 <mspace width="3em" height="1em" id="den0002b" style="background: blue"/> 266 </mfrac> 267 </math> 268 </p> 269 <hr/> 270 <p> 271 <math displaystyle="true" style="font-family: denominatordisplaystyleshiftdown6000-axisheight1000-rulethickness1000;"> 272 <mspace id="ref0003b" width="3em" height="1em" style="background: green"/> 273 <mfrac> 274 <mspace width="3em"/> 275 <mspace width="3em" depth="1em" id="den0003b" style="background: blue"/> 276 </mfrac> 277 </math> 278 </p> 279 <hr/> 280 <p> 281 <math style="font-family: denominatordisplaystylegapmin5000-rulethickness1000;"> 282 <mspace id="ref0002c" width="3em" 283 height=".5em" depth=".5em" style="background: green"/> 284 <mfrac displaystyle="true"> 285 <mspace width="3em"/> 286 <mspace width="3em" height="1em" id="den0002c" style="background: blue"/> 287 </mfrac> 288 </math> 289 </p> 290 <hr/> 291 <p> 292 <math style="font-family: denominatordisplaystyleshiftdown6000-axisheight1000-rulethickness1000;"> 293 <mspace id="ref0003c" width="3em" height="1em" style="background: green"/> 294 <mfrac displaystyle="true"> 295 <mspace width="3em"/> 296 <mspace width="3em" depth="1em" id="den0003c" style="background: blue"/> 297 </mfrac> 298 </math> 299 </p> 300 <hr/> 301 <p> 302 <math style="font-family: denominatorgapmin4000-rulethickness1000;"> 303 <mspace id="ref0004" width="3em" 304 height=".5em" depth=".5em" style="background: green"/> 305 <mfrac> 306 <mspace width="3em"/> 307 <mspace width="3em" height="1em" id="den0004" style="background: blue"/> 308 </mfrac> 309 </math> 310 </p> 311 <hr/> 312 <p> 313 <math style="font-family: denominatorshiftdown3000-axisheight1000-rulethickness1000;"> 314 <mspace id="ref0005" width="3em" height="1em" style="background: green"/> 315 <mfrac> 316 <mspace width="3em"/> 317 <mspace width="3em" depth="1em" id="den0005" style="background: blue"/> 318 </mfrac> 319 </math> 320 </p> 321 <hr/> 322 <p> 323 <math displaystyle="true" style="font-family: denominatorgapmin4000-rulethickness1000;"> 324 <mspace id="ref0004b" width="3em" 325 height=".5em" depth=".5em" style="background: green"/> 326 <mfrac displaystyle="false"> 327 <mspace width="3em"/> 328 <mspace width="3em" height="1em" id="den0004b" style="background: blue"/> 329 </mfrac> 330 </math> 331 </p> 332 <hr/> 333 <p> 334 <math displaystyle="true" style="font-family: denominatorshiftdown3000-axisheight1000-rulethickness1000;"> 335 <mspace id="ref0005b" width="3em" height="1em" style="background: green"/> 336 <mfrac displaystyle="false"> 337 <mspace width="3em"/> 338 <mspace width="3em" depth="1em" id="den0005b" style="background: blue"/> 339 </mfrac> 340 </math> 341 </p> 342 <hr/> 343 <p> 344 <math display="block" style="font-family: numeratordisplaystylegapmin8000-rulethickness1000;"> 345 <mspace id="ref0006" width="3em" 346 height=".5em" depth=".5em" style="background: green"/> 347 <mfrac> 348 <mspace width="3em" depth="1em" id="num0006" style="background: blue"/> 349 <mspace width="3em"/> 350 </mfrac> 351 </math> 352 </p> 353 <hr/> 354 <p> 355 <math display="block" style="font-family: numeratordisplaystyleshiftup2000-axisheight1000-rulethickness1000;"> 356 <mspace id="ref0007" width="3em" 357 depth="1em" style="background: green"/> 358 <mfrac> 359 <mspace width="3em" height="1em" id="num0007" style="background: blue"/> 360 <mspace width="3em"/> 361 </mfrac> 362 </math> 363 </p> 364 <hr/> 365 <p> 366 <math displaystyle="true" style="font-family: numeratordisplaystylegapmin8000-rulethickness1000;"> 367 <mspace id="ref0006b" width="3em" 368 height=".5em" depth=".5em" style="background: green"/> 369 <mfrac> 370 <mspace width="3em" depth="1em" id="num0006b" style="background: blue"/> 371 <mspace width="3em"/> 372 </mfrac> 373 </math> 374 </p> 375 <hr/> 376 <p> 377 <math displaystyle="true" style="font-family: numeratordisplaystyleshiftup2000-axisheight1000-rulethickness1000;"> 378 <mspace id="ref0007b" width="3em" 379 depth="1em" style="background: green"/> 380 <mfrac> 381 <mspace width="3em" height="1em" id="num0007b" style="background: blue"/> 382 <mspace width="3em"/> 383 </mfrac> 384 </math> 385 </p> 386 <hr/> 387 <p> 388 <math style="font-family: numeratordisplaystylegapmin8000-rulethickness1000;"> 389 <mspace id="ref0006c" width="3em" 390 height=".5em" depth=".5em" style="background: green"/> 391 <mfrac displaystyle="true"> 392 <mspace width="3em" depth="1em" id="num0006c" style="background: blue"/> 393 <mspace width="3em"/> 394 </mfrac> 395 </math> 396 </p> 397 <hr/> 398 <p> 399 <math style="font-family: numeratordisplaystyleshiftup2000-axisheight1000-rulethickness1000;"> 400 <mspace id="ref0007c" width="3em" 401 depth="1em" style="background: green"/> 402 <mfrac displaystyle="true"> 403 <mspace width="3em" height="1em" id="num0007c" style="background: blue"/> 404 <mspace width="3em"/> 405 </mfrac> 406 </math> 407 </p> 408 <hr/> 409 <p> 410 <math style="font-family: numeratorgapmin9000-rulethickness1000;"> 411 <mspace id="ref0008" width="3em" 412 height=".5em" depth=".5em" style="background: green"/> 413 <mfrac> 414 <mspace width="3em" depth="1em" id="num0008" style="background: blue"/> 415 <mspace width="3em"/> 416 </mfrac> 417 </math> 418 </p> 419 <hr/> 420 <p> 421 <math style="font-family: numeratorshiftup11000-axisheight1000-rulethickness1000;"> 422 <mspace id="ref0009" width="3em" 423 depth="1em" style="background: green"/> 424 <mfrac> 425 <mspace width="3em" height="1em" id="num0009" style="background: blue"/> 426 <mspace width="3em"/> 427 </mfrac> 428 </math> 429 </p> 430 <hr/> 431 <p> 432 <math style="font-family: rulethickness10000"> 433 <mfrac> 434 <mspace width="3em" height="1em" id="num0010" style="background: blue"/> 435 <mspace width="3em" depth="1em" id="den0010" style="background: green"/> 436 </mfrac> 437 </math> 438 </p> 439 </body> 440 </html>