cramped-001.html (17110B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Cramped elements</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#subscripts-and-superscripts-msub-msup-msubsup"> 7 <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac"> 8 <link rel="help" href="https://w3c.github.io/mathml-core/#radicals-msqrt-mroot"> 9 <link rel="help" href="https://w3c.github.io/mathml-core/#displaystyle-and-scriptlevel-in-scripts"> 10 <link rel="help" href="https://w3c.github.io/mathml-core/#user-agent-stylesheet"> 11 <meta name="assert" content="Verify default calculation of math-shift on MathML elements"> 12 <script src="/resources/testharness.js"></script> 13 <script src="/resources/testharnessreport.js"></script> 14 <script src="/mathml/support/feature-detection.js"></script> 15 <script src="/mathml/support/fonts.js"></script> 16 <script src="/mathml/support/box-navigation.js"></script> 17 <style> 18 math { 19 font-family: superscriptshiftupcramped5000; 20 } 21 math, math * { 22 font-size: 10px; 23 background: lightyellow; 24 } 25 @font-face { 26 font-family: superscriptshiftupcramped5000; 27 src: url("/fonts/math/scripts-superscriptshiftupcramped5000.woff"); 28 } 29 .testedElement *:first-child { 30 background: lightblue; 31 } 32 .testedElement *:last-child { 33 background: pink; 34 } 35 </style> 36 <script> 37 function assert_cramped(id, expected, name) { 38 const emToPx = 10 / 1000; // font-size: 10px, font.em = 1000 39 const superscriptshiftupcramped = 5000 * emToPx; 40 var container = document.getElementById(id); 41 var msup = container.getElementsByClassName("testedElement")[0]; 42 var base = firstInFlowChild(msup); 43 var script = nextInFlowSibling(base); 44 var shift = base.getBoundingClientRect().bottom - script.getBoundingClientRect().bottom; 45 if (expected) 46 assert_greater_than(shift, superscriptshiftupcramped / 2, `${name || id} should be cramped`); 47 else 48 assert_less_than(shift, superscriptshiftupcramped / 2, `${name || id} should not be cramped`); 49 } 50 51 setup({ explicit_done: true }); 52 window.addEventListener("load", () => { loadAllFonts().then(runTests); }); 53 54 function runTests() { 55 test(function() { 56 assert_true(MathMLFeatureDetection.has_mspace()); 57 assert_cramped("math-001", false); 58 assert_cramped("mrow-001", false, "mrow"); 59 }, "child of non-cramped element"); 60 61 test(function() { 62 assert_true(MathMLFeatureDetection.has_mspace()); 63 assert_cramped("mrow-002", true); 64 }, "child of cramped element"); 65 66 test(function() { 67 assert_true(MathMLFeatureDetection.has_mspace()); 68 assert_cramped("msqrt-001", true); 69 }, "child of msqrt"); 70 71 test(function() { 72 assert_true(MathMLFeatureDetection.has_mspace()); 73 assert_cramped("mroot-001", true); 74 }, "child of mroot"); 75 76 test(function() { 77 assert_true(MathMLFeatureDetection.has_mspace()); 78 assert_cramped("mfrac-001", false, "numerator"); 79 assert_cramped("mfrac-002", true, "denominator"); 80 }, "child of mfrac"); 81 82 test(function() { 83 assert_true(MathMLFeatureDetection.has_mspace()); 84 assert_cramped("msub-001", false, "base"); 85 assert_cramped("msub-002", true, "subscript"); 86 }, "child of msub"); 87 88 test(function() { 89 assert_true(MathMLFeatureDetection.has_mspace()); 90 assert_cramped("msup-001", false, "base"); 91 assert_cramped("msup-002", false, "superscript"); 92 }, "child of msup"); 93 94 test(function() { 95 assert_true(MathMLFeatureDetection.has_mspace()); 96 assert_cramped("msubsup-001", false, "base"); 97 assert_cramped("msubsup-002", true, "subscript"); 98 assert_cramped("msubsup-003", false, "superscript"); 99 }, "child of msubsup"); 100 101 test(function() { 102 assert_true(MathMLFeatureDetection.has_mspace()); 103 assert_cramped("munder-001", false, "base"); 104 assert_cramped("munder-002", false, "underscript"); 105 }, "child of munder"); 106 107 test(function() { 108 assert_true(MathMLFeatureDetection.has_mspace()); 109 assert_cramped("mover-001", false, "base"); 110 assert_cramped("mover-002", false, "overscript"); 111 }, "child of mover (non-accent overscript)"); 112 113 test(function() { 114 assert_true(MathMLFeatureDetection.has_mspace()); 115 assert_cramped("munderover-001", false, "base"); 116 assert_cramped("munderover-002", false, "underscript"); 117 assert_cramped("munderover-003", false, "overscript"); 118 }, "child of munderover (non-accent overscript)"); 119 120 test(function() { 121 assert_true(MathMLFeatureDetection.has_mspace()); 122 assert_cramped("mover-003", true, "base"); 123 assert_cramped("mover-004", false, "overscript"); 124 }, "accent child of mover (accent overscript)"); 125 126 test(function() { 127 assert_true(MathMLFeatureDetection.has_mspace()); 128 assert_cramped("munderover-004", true, "base"); 129 assert_cramped("munderover-005", false, "underscript"); 130 assert_cramped("munderover-006", false, "overscript"); 131 }, "accent child of munderover (accent overscript)"); 132 133 test(function() { 134 assert_true(MathMLFeatureDetection.has_mspace()); 135 assert_cramped("mmultiscripts-001", false, "base"); 136 assert_cramped("mmultiscripts-002", true, "post-subscript"); 137 assert_cramped("mmultiscripts-003", false, "post-superscript"); 138 assert_cramped("mmultiscripts-004", true, "pre-subscript"); 139 assert_cramped("mmultiscripts-005", false, "post-superscript"); 140 }, "mmultiscripts"); 141 142 test(function() { 143 assert_true(MathMLFeatureDetection.has_mspace()); 144 assert_cramped("css-001", false); 145 assert_cramped("css-002", true); 146 assert_cramped("css-003", true); 147 assert_cramped("css-004", false); 148 }, "element with specified CSS math-shift"); 149 150 done(); 151 } 152 </script> 153 </head> 154 <body> 155 <div id="log"></div> 156 <p> 157 <math id="math-001"> 158 <msup class="testedElement"> 159 <mspace height="2em" width="2em"/> 160 <mspace height="1em" width="1em"/> 161 </msup> 162 </math> 163 <math> 164 <mrow id="mrow-001"> 165 <msup class="testedElement"> 166 <mspace height="2em" width="2em"/> 167 <mspace height="1em" width="1em"/> 168 </msup> 169 </mrow> 170 </math> 171 </p> 172 <p> 173 <math> 174 <msqrt> 175 <!-- This is a child of a msqrt so it is cramped. As a consequence, 176 all its descendants are cramped too. --> 177 <munderover> 178 <mover> 179 <munder> 180 <msubsup> 181 <msup> 182 <msub> 183 <mfrac> 184 <mrow id="mrow-002"> 185 <msup class="testedElement"> 186 <mspace height="2em" width="2em"/> 187 <mspace height="1em" width="1em"/> 188 </msup> 189 </mrow> 190 <mspace/> 191 </mfrac> 192 <mspace/> 193 </msub> 194 <mspace/> 195 </msup> 196 <mspace/> 197 <mspace/> 198 </msubsup> 199 <mspace/> 200 </munder> 201 <mspace/> 202 </mover> 203 <mspace/> 204 <mspace/> 205 </munderover> 206 </msqrt> 207 </math> 208 </p> 209 <p> 210 <math> 211 <msqrt id="msqrt-001"> 212 <mn>0</mn> 213 <mn>1</mn> 214 <msup class="testedElement"> 215 <mspace height="2em" width="2em"/> 216 <mspace height="1em" width="1em"/> 217 </msup> 218 <mn>3</mn> 219 <mn>4</mn> 220 </msqrt> 221 </math> 222 </p> 223 <p> 224 <math> 225 <mroot id="mroot-001"> 226 <mn>0</mn> 227 <msup class="testedElement"> 228 <mspace height="2em" width="2em"/> 229 <mspace height="1em" width="1em"/> 230 </msup> 231 </mroot> 232 </math> 233 </p> 234 <p> 235 <math> 236 <mroot id="mroot-002"> 237 <msup class="testedElement"> 238 <mspace height="2em" width="2em"/> 239 <mspace height="1em" width="1em"/> 240 </msup> 241 <mn>1</mn> 242 </mroot> 243 </math> 244 </p> 245 <p> 246 <math> 247 <mfrac id="mfrac-001"> 248 <msup class="testedElement"> 249 <mspace height="2em" width="2em"/> 250 <mspace height="1em" width="1em"/> 251 </msup> 252 <mn>1</mn> 253 </mfrac> 254 </math> 255 </p> 256 <p> 257 <math> 258 <mfrac id="mfrac-002"> 259 <mn>0</mn> 260 <msup class="testedElement"> 261 <mspace height="2em" width="2em"/> 262 <mspace height="1em" width="1em"/> 263 </msup> 264 </mfrac> 265 </math> 266 </p> 267 <p> 268 <math> 269 <msub id="msub-001"> 270 <msup class="testedElement"> 271 <mspace height="2em" width="2em"/> 272 <mspace height="1em" width="1em"/> 273 </msup> 274 <mn>1</mn> 275 </msub> 276 </math> 277 </p> 278 <p> 279 <math> 280 <msub id="msub-002"> 281 <mn>0</mn> 282 <msup class="testedElement"> 283 <mspace height="2em" width="2em"/> 284 <mspace height="1em" width="1em"/> 285 </msup> 286 </msub> 287 </math> 288 </p> 289 <p> 290 <math> 291 <msup id="msup-001"> 292 <msup class="testedElement"> 293 <mspace height="2em" width="2em"/> 294 <mspace height="1em" width="1em"/> 295 </msup> 296 <mn>1</mn> 297 </msup> 298 </math> 299 </p> 300 <p> 301 <math> 302 <msup id="msup-002"> 303 <mn>0</mn> 304 <msup class="testedElement"> 305 <mspace height="2em" width="2em"/> 306 <mspace height="1em" width="1em"/> 307 </msup> 308 </msup> 309 </math> 310 </p> 311 <p> 312 <math> 313 <msubsup id="msubsup-001"> 314 <msup class="testedElement"> 315 <mspace height="2em" width="2em"/> 316 <mspace height="1em" width="1em"/> 317 </msup> 318 <mn>1</mn> 319 <mn>2</mn> 320 </msubsup> 321 </math> 322 </p> 323 <p> 324 <math> 325 <msubsup id="msubsup-002"> 326 <mn>0</mn> 327 <msup class="testedElement"> 328 <mspace height="2em" width="2em"/> 329 <mspace height="1em" width="1em"/> 330 </msup> 331 <mn>2</mn> 332 </msubsup> 333 </math> 334 </p> 335 <p> 336 <math> 337 <msubsup id="msubsup-003"> 338 <mn>0</mn> 339 <mn>1</mn> 340 <msup class="testedElement"> 341 <mspace height="2em" width="2em"/> 342 <mspace height="1em" width="1em"/> 343 </msup> 344 </msubsup> 345 </math> 346 </p> 347 <p> 348 <math> 349 <munder id="munder-001"> 350 <msup class="testedElement"> 351 <mspace height="2em" width="2em"/> 352 <mspace height="1em" width="1em"/> 353 </msup> 354 <mn>1</mn> 355 </munder> 356 </math> 357 </p> 358 <p> 359 <math> 360 <munder id="munder-002"> 361 <mn>0</mn> 362 <msup class="testedElement"> 363 <mspace height="2em" width="2em"/> 364 <mspace height="1em" width="1em"/> 365 </msup> 366 </munder> 367 </math> 368 </p> 369 <p> 370 <math> 371 <mover id="mover-001"> 372 <msup class="testedElement"> 373 <mspace height="2em" width="2em"/> 374 <mspace height="1em" width="1em"/> 375 </msup> 376 <mn>1</mn> 377 </mover> 378 </math> 379 </p> 380 <p> 381 <math> 382 <mover id="mover-002"> 383 <mn>0</mn> 384 <msup class="testedElement"> 385 <mspace height="2em" width="2em"/> 386 <mspace height="1em" width="1em"/> 387 </msup> 388 </mover> 389 </math> 390 </p> 391 <p> 392 <math> 393 <mover accent="true" id="mover-003"> 394 <msup class="testedElement"> 395 <mspace height="2em" width="2em"/> 396 <mspace height="1em" width="1em"/> 397 </msup> 398 <mn>1</mn> 399 </mover> 400 </math> 401 </p> 402 <p> 403 <math> 404 <mover accent="true" id="mover-004"> 405 <mn>0</mn> 406 <msup class="testedElement"> 407 <mspace height="2em" width="2em"/> 408 <mspace height="1em" width="1em"/> 409 </msup> 410 </mover> 411 </math> 412 </p> 413 <p> 414 <math> 415 <munderover id="munderover-001"> 416 <msup class="testedElement"> 417 <mspace height="2em" width="2em"/> 418 <mspace height="1em" width="1em"/> 419 </msup> 420 <mn>1</mn> 421 <mn>2</mn> 422 </munderover> 423 </math> 424 </p> 425 <p> 426 <math> 427 <munderover id="munderover-002"> 428 <mn>0</mn> 429 <msup class="testedElement"> 430 <mspace height="2em" width="2em"/> 431 <mspace height="1em" width="1em"/> 432 </msup> 433 <mn>2</mn> 434 </munderover> 435 </math> 436 </p> 437 <p> 438 <math> 439 <munderover id="munderover-003"> 440 <mn>0</mn> 441 <mn>1</mn> 442 <msup class="testedElement"> 443 <mspace height="2em" width="2em"/> 444 <mspace height="1em" width="1em"/> 445 </msup> 446 </munderover> 447 </math> 448 </p> 449 <p> 450 <math> 451 <munderover accent="true" id="munderover-004"> 452 <msup class="testedElement"> 453 <mspace height="2em" width="2em"/> 454 <mspace height="1em" width="1em"/> 455 </msup> 456 <mn>1</mn> 457 <mn>2</mn> 458 </munderover> 459 </math> 460 </p> 461 <p> 462 <math> 463 <munderover accent="true" id="munderover-005"> 464 <mn>0</mn> 465 <msup class="testedElement"> 466 <mspace height="2em" width="2em"/> 467 <mspace height="1em" width="1em"/> 468 </msup> 469 <mn>2</mn> 470 </munderover> 471 </math> 472 </p> 473 <p> 474 <math> 475 <munderover accent="true" id="munderover-006"> 476 <mn>0</mn> 477 <mn>1</mn> 478 <msup class="testedElement"> 479 <mspace height="2em" width="2em"/> 480 <mspace height="1em" width="1em"/> 481 </msup> 482 </munderover> 483 </math> 484 </p> 485 <p> 486 <math> 487 <mmultiscripts id="mmultiscripts-001"> 488 <msup class="testedElement"> 489 <mspace height="2em" width="2em"/> 490 <mspace height="1em" width="1em"/> 491 </msup> 492 <mn>1</mn> 493 <mn>2</mn> 494 <mn>3</mn> 495 <mn>4</mn> 496 <mn>5</mn> 497 <mn>6</mn> 498 <mprescripts/> 499 <mn>7</mn> 500 <mn>8</mn> 501 <mn>9</mn> 502 <mn>10</mn> 503 <mn>11</mn> 504 <mn>12</mn> 505 </mmultiscripts> 506 </math> 507 </p> 508 <p> 509 <math> 510 <mmultiscripts id="mmultiscripts-002"> 511 <mn>0</mn> 512 <mn>1</mn> 513 <mn>2</mn> 514 <msup class="testedElement"> 515 <mspace height="2em" width="2em"/> 516 <mspace height="1em" width="1em"/> 517 </msup> 518 <mn>4</mn> 519 <mn>5</mn> 520 <mn>6</mn> 521 <mprescripts/> 522 <mn>7</mn> 523 <mn>8</mn> 524 <mn>9</mn> 525 <mn>10</mn> 526 <mn>11</mn> 527 <mn>12</mn> 528 </mmultiscripts> 529 </math> 530 </p> 531 <p> 532 <math> 533 <mmultiscripts id="mmultiscripts-003"> 534 <mn>0</mn> 535 <mn>1</mn> 536 <mn>2</mn> 537 <mn>3</mn> 538 <msup class="testedElement"> 539 <mspace height="2em" width="2em"/> 540 <mspace height="1em" width="1em"/> 541 </msup> 542 <mn>5</mn> 543 <mn>6</mn> 544 <mprescripts/> 545 <mn>7</mn> 546 <mn>8</mn> 547 <mn>9</mn> 548 <mn>10</mn> 549 <mn>11</mn> 550 <mn>12</mn> 551 </mmultiscripts> 552 </math> 553 </p> 554 <p> 555 <math> 556 <mmultiscripts id="mmultiscripts-004"> 557 <mn>0</mn> 558 <mn>1</mn> 559 <mn>2</mn> 560 <mn>3</mn> 561 <mn>4</mn> 562 <mn>5</mn> 563 <mn>6</mn> 564 <mprescripts/> 565 <mn>7</mn> 566 <mn>8</mn> 567 <msup class="testedElement"> 568 <mspace height="2em" width="2em"/> 569 <mspace height="1em" width="1em"/> 570 </msup> 571 <mn>10</mn> 572 <mn>11</mn> 573 <mn>12</mn> 574 </mmultiscripts> 575 </math> 576 </p> 577 <p> 578 <math> 579 <mmultiscripts id="mmultiscripts-005"> 580 <mn>0</mn> 581 <mn>1</mn> 582 <mn>2</mn> 583 <mn>3</mn> 584 <mn>4</mn> 585 <mn>5</mn> 586 <mn>6</mn> 587 <mprescripts/> 588 <mn>7</mn> 589 <mn>8</mn> 590 <mn>9</mn> 591 <msup class="testedElement"> 592 <mspace height="2em" width="2em"/> 593 <mspace height="1em" width="1em"/> 594 </msup> 595 <mn>11</mn> 596 <mn>12</mn> 597 </mmultiscripts> 598 </math> 599 </p> 600 <p> 601 <math id="css-001" style="math-shift: normal"> 602 <msup class="testedElement"> 603 <mspace height="2em" width="2em"/> 604 <mspace height="1em" width="1em"/> 605 </msup> 606 </math> 607 <math id="css-002" style="math-shift: compact"> 608 <msup class="testedElement"> 609 <mspace height="2em" width="2em"/> 610 <mspace height="1em" width="1em"/> 611 </msup> 612 </math> 613 <math id="css-003" style="math-shift: normal"> 614 <msup class="testedElement" style="math-shift: compact"> 615 <mspace height="2em" width="2em"/> 616 <mspace height="1em" width="1em"/> 617 </msup> 618 </math> 619 <math id="css-004" style="math-shift: compact"> 620 <msup class="testedElement" style="math-shift: normal"> 621 <mspace height="2em" width="2em"/> 622 <mspace height="1em" width="1em"/> 623 </msup> 624 </math> 625 </p> 626 </body> 627 </html>