test_MathMLSpec.html (15646B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>HTML a11y spec tests</title> 5 <link id="link" rel="stylesheet" type="text/css" 6 href="chrome://mochikit/content/tests/SimpleTest/test.css" /> 7 8 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 9 10 <script type="application/javascript" 11 src="../common.js"></script> 12 <script type="application/javascript" 13 src="../actions.js"></script> 14 <script type="application/javascript" 15 src="../role.js"></script> 16 <script type="application/javascript" 17 src="../states.js"></script> 18 <script type="application/javascript" 19 src="../attributes.js"></script> 20 <script type="application/javascript" 21 src="../relations.js"></script> 22 <script type="application/javascript" 23 src="../name.js"></script> 24 25 <script type="application/javascript"> 26 function doTest() { 27 // //////////////////////////////////////////////////////////////////////// 28 // math 29 30 let obj = { 31 role: ROLE_MATHML_MATH, 32 }; 33 testElm("math", obj); 34 35 // //////////////////////////////////////////////////////////////////////// 36 // mi 37 38 obj = { 39 role: ROLE_MATHML_IDENTIFIER, 40 }; 41 testElm("mi", obj); 42 43 // //////////////////////////////////////////////////////////////////////// 44 // mn 45 46 obj = { 47 role: ROLE_MATHML_NUMBER, 48 }; 49 testElm("mn", obj); 50 51 // //////////////////////////////////////////////////////////////////////// 52 // mo 53 54 obj = { 55 role: ROLE_MATHML_OPERATOR, 56 attributes: { accent: "true", largeop: "true" }, 57 }; 58 testElm("mo", obj); 59 60 obj = { 61 role: ROLE_MATHML_OPERATOR, 62 attributes: { fence: "true" }, 63 }; 64 testElm("mo_fence", obj); 65 66 obj = { 67 role: ROLE_MATHML_OPERATOR, 68 attributes: { separator: "true" }, 69 }; 70 testElm("mo_separator", obj); 71 72 // //////////////////////////////////////////////////////////////////////// 73 // mtext 74 75 obj = { 76 role: ROLE_MATHML_TEXT, 77 }; 78 testElm("mtext", obj); 79 80 // //////////////////////////////////////////////////////////////////////// 81 // ms 82 83 obj = { 84 role: ROLE_MATHML_STRING_LITERAL, 85 }; 86 testElm("ms", obj); 87 88 // //////////////////////////////////////////////////////////////////////// 89 // mglyph 90 91 obj = { 92 role: ROLE_MATHML_GLYPH, 93 }; 94 testElm("mglyph", obj); 95 96 // //////////////////////////////////////////////////////////////////////// 97 // mrow 98 99 obj = { 100 role: ROLE_MATHML_ROW, 101 }; 102 testElm("mrow", obj); 103 104 // //////////////////////////////////////////////////////////////////////// 105 // mfrac 106 107 obj = { 108 role: ROLE_MATHML_FRACTION, 109 attributes: { bevelled: "true", linethickness: "thick" }, 110 }; 111 testElm("mfrac", obj); 112 113 // //////////////////////////////////////////////////////////////////////// 114 // msqrt 115 116 obj = { 117 role: ROLE_MATHML_SQUARE_ROOT, 118 }; 119 testElm("msqrt", obj); 120 121 // //////////////////////////////////////////////////////////////////////// 122 // mroot 123 124 obj = { 125 role: ROLE_MATHML_ROOT, 126 relations: { 127 RELATION_NODE_PARENT_OF: ["mroot_index", "mroot_base"], 128 }, 129 children: [ 130 { 131 role: ROLE_MATHML_IDENTIFIER, 132 relations: { RELATION_NODE_CHILD_OF: "mroot" }, 133 }, 134 { 135 role: ROLE_MATHML_NUMBER, 136 relations: { RELATION_NODE_CHILD_OF: "mroot" }, 137 }, 138 ], 139 }; 140 testElm("mroot", obj); 141 142 // //////////////////////////////////////////////////////////////////////// 143 // Deprecated mfenced element (treated as an mrow). 144 145 obj = { 146 role: ROLE_MATHML_ROW, 147 }; 148 testElm("mfenced", obj); 149 150 // //////////////////////////////////////////////////////////////////////// 151 // menclose 152 153 obj = { 154 role: ROLE_MATHML_ENCLOSED, 155 attributes: { notation: "circle" }, 156 }; 157 testElm("menclose", obj); 158 159 // //////////////////////////////////////////////////////////////////////// 160 // mstyle, mpadded, mphantom 161 162 obj = { 163 role: ROLE_MATHML_STYLE, 164 }; 165 testElm("mstyle", obj); 166 167 ok(!isAccessible("mpadded"), "mpadded should not have accessible"); 168 ok(!isAccessible("mphantom"), "mphantom should not have accessible"); 169 170 // //////////////////////////////////////////////////////////////////////// 171 // msub 172 173 obj = { 174 role: ROLE_MATHML_SUB, 175 }; 176 testElm("msub", obj); 177 178 // //////////////////////////////////////////////////////////////////////// 179 // msup 180 181 obj = { 182 role: ROLE_MATHML_SUP, 183 }; 184 testElm("msup", obj); 185 186 // //////////////////////////////////////////////////////////////////////// 187 // msubsup 188 189 obj = { 190 role: ROLE_MATHML_SUB_SUP, 191 }; 192 testElm("msubsup", obj); 193 194 // //////////////////////////////////////////////////////////////////////// 195 // munder 196 197 obj = { 198 role: ROLE_MATHML_UNDER, 199 attributes: { accentunder: "true", align: "center" }, 200 }; 201 testElm("munder", obj); 202 203 // //////////////////////////////////////////////////////////////////////// 204 // mover 205 206 obj = { 207 role: ROLE_MATHML_OVER, 208 attributes: { accent: "true", align: "center" }, 209 }; 210 testElm("mover", obj); 211 212 // //////////////////////////////////////////////////////////////////////// 213 // munderover 214 215 obj = { 216 role: ROLE_MATHML_UNDER_OVER, 217 attributes: { accent: "true", accentunder: "true", align: "center" }, 218 }; 219 testElm("munderover", obj); 220 221 // //////////////////////////////////////////////////////////////////////// 222 // mmultiscripts 223 224 obj = { 225 role: ROLE_MATHML_MULTISCRIPTS, 226 }; 227 testElm("mmultiscripts", obj); 228 229 // //////////////////////////////////////////////////////////////////////// 230 // mtable 231 232 obj = { 233 role: ROLE_MATHML_TABLE, 234 attributes: { align: "center", columnlines: "solid", rowlines: "solid" }, 235 }; 236 testElm("mtable", obj); 237 238 // //////////////////////////////////////////////////////////////////////// 239 // mlabeledtr 240 241 obj = { 242 role: ROLE_MATHML_LABELED_ROW, 243 }; 244 testElm("mlabeledtr", obj); 245 246 // //////////////////////////////////////////////////////////////////////// 247 // mtr 248 249 obj = { 250 role: ROLE_MATHML_TABLE_ROW, 251 }; 252 testElm("mtr", obj); 253 254 // //////////////////////////////////////////////////////////////////////// 255 // mtd 256 257 obj = { 258 role: ROLE_MATHML_CELL, 259 }; 260 testElm("mtd", obj); 261 262 // //////////////////////////////////////////////////////////////////////// 263 // maction 264 265 obj = { 266 role: ROLE_MATHML_ACTION, 267 attributes: { actiontype: "toggle", selection: "1" }, 268 }; 269 testElm("maction", obj); 270 271 // //////////////////////////////////////////////////////////////////////// 272 // merror 273 274 obj = { 275 role: ROLE_MATHML_ERROR, 276 }; 277 testElm("merror", obj); 278 279 // //////////////////////////////////////////////////////////////////////// 280 // semantics, annotation, annotation-xml 281 ok(!isAccessible("semantics"), "semantics should not have accessible"); 282 ok(!isAccessible("annotation"), "annotation should not have accessible"); 283 ok(!isAccessible("annotation-xml"), "annotation-xml should not have accessible"); 284 285 // //////////////////////////////////////////////////////////////////////// 286 // mstack 287 288 obj = { 289 role: ROLE_MATHML_STACK, 290 attributes: { align: "center" }, 291 }; 292 testElm("mstack", obj); 293 294 // //////////////////////////////////////////////////////////////////////// 295 // mlongdiv 296 297 obj = { 298 role: ROLE_MATHML_LONG_DIVISION, 299 attributes: { longdivstyle: "stackedrightright" }, 300 }; 301 testElm("mlongdiv", obj); 302 303 // //////////////////////////////////////////////////////////////////////// 304 // msgroup 305 306 obj = { 307 role: ROLE_MATHML_STACK_GROUP, 308 attributes: { position: "2", shift: "-1" }, 309 }; 310 testElm("msgroup", obj); 311 312 // //////////////////////////////////////////////////////////////////////// 313 // msrow 314 315 obj = { 316 role: ROLE_MATHML_STACK_ROW, 317 attributes: { position: "1" }, 318 }; 319 testElm("msrow", obj); 320 321 // //////////////////////////////////////////////////////////////////////// 322 // mscarries 323 324 obj = { 325 role: ROLE_MATHML_STACK_CARRIES, 326 attributes: { location: "nw", position: "1" }, 327 }; 328 testElm("mscarries", obj); 329 330 // //////////////////////////////////////////////////////////////////////// 331 // mscarry 332 333 obj = { 334 role: ROLE_MATHML_STACK_CARRY, 335 attributes: { crossout: "updiagonalstrike" }, 336 }; 337 testElm("mscarry", obj); 338 339 // //////////////////////////////////////////////////////////////////////// 340 // msline 341 342 obj = { 343 role: ROLE_MATHML_STACK_LINE, 344 attributes: { position: "1" }, 345 }; 346 testElm("msline", obj); 347 348 SimpleTest.finish(); 349 } 350 351 SimpleTest.waitForExplicitFinish(); 352 addA11yLoadEvent(doTest); 353 354 </script> 355 </head> 356 <body> 357 358 <a target="_blank" 359 title="Implement figure and figcaption accessibility" 360 href="https://bugzilla.mozilla.org/show_bug.cgi?id=658272"> 361 Mozilla Bug 658272 362 </a><br/> 363 <p id="display"></p> 364 <div id="content" style="display: none"></div> 365 <pre id="test"> 366 </pre> 367 368 <math id="math"> 369 <mrow id="mrow"> 370 <mrow> 371 <msup id="msup"> 372 <mi id="mi">a</mi> 373 <mn id="mn">2</mn> 374 </msup> 375 <mo id="mo" accent="true" largeop="true">+</mo> 376 <msqrt id="msqrt"> 377 <mn>2</mn> 378 </msqrt> 379 </mrow> 380 <mo>=</mo> 381 <msub id="msub"> 382 <mi>c</mi> 383 <mn>2</mn> 384 </msub> 385 </mrow> 386 <mspace id="mspace" width="1em"/> 387 <mtext id="mtext">Arbitrary text</mtext> 388 <mspace width="1em"/> 389 <ms id="ms">InterpretedStringLiteral</ms> 390 <mi> 391 <mglyph id="mglyph" src="../letters.gif" alt="letters"/> 392 </mi> 393 <mfrac id="mfrac" bevelled="true" linethickness="thick"> 394 <mi>x</mi> 395 <mn>2</mn> 396 </mfrac> 397 <mroot id="mroot"> 398 <mi id="mroot_base">x</mi> 399 <mn id="mroot_index">5</mn> 400 </mroot> 401 <mspace width="1em"/> 402 <mfenced id="mfenced" close="[" open="]" separators="."> 403 <mrow> 404 <mi>x</mi> 405 <mi>y</mi> 406 </mrow> 407 </mfenced> 408 <mrow> 409 <mo id="mo_fence" fence="true">[</mo> 410 <mrow> 411 X 412 <mo id="mo_separator" separator="true">,</mo> 413 Y 414 </mrow> 415 <mo fence="true"> closing-fence </mo> 416 </mrow> 417 <mspace width="1em"/> 418 <menclose id="menclose" notation="circle"> 419 <mi>a</mi> 420 <mo>+</mo> 421 <mi>b</mi> 422 </menclose> 423 <mstyle id="mstyle" dir="rtl" mathcolor="blue"> 424 <mpadded id="mpadded" height="100px" width="200px"> 425 <mi>x</mi> 426 <mphantom id="mphantom"> 427 <mo>+</mo> 428 <mi>y</mi> 429 </mphantom> 430 </mpadded> 431 </mstyle> 432 433 <msubsup id="msubsup"> 434 <mi>b</mi> 435 <mn>1</mn> 436 <mn>2</mn> 437 </msubsup> 438 <munder id="munder" accentunder="true" align="center"> 439 <mrow> 440 <mi> x </mi> 441 <mo> + </mo> 442 <mi> y </mi> 443 <mo> + </mo> 444 <mi> z </mi> 445 </mrow> 446 <mo> ⏟<!--BOTTOM CURLY BRACKET--> </mo> 447 </munder> 448 <mspace width="1em"/> 449 <mover id="mover" accent="true" align="center"> 450 <mi> x </mi> 451 <mo> ^<!--CIRCUMFLEX ACCENT--> </mo> 452 </mover> 453 <munderover id="munderover" accentunder="true" accent="true" align="center"> 454 <mo> ∫<!--INTEGRAL--> </mo> 455 <mn> 0 </mn> 456 <mi> ∞<!--INFINITY--> </mi> 457 </munderover> 458 <mmultiscripts id="mmultiscripts"> 459 <mi> R </mi> 460 <mi> i </mi> 461 <none/> 462 <none/> 463 <mi> j </mi> 464 <mi> k </mi> 465 <none/> 466 <mi> l </mi> 467 <none/> 468 </mmultiscripts> 469 470 <mtable id="mtable" align="center" columnlines="solid" rowlines="solid"> 471 <mlabeledtr id="mlabeledtr"> 472 <mtd> 473 <mtext> (2.1) </mtext> 474 </mtd> 475 <mtd> 476 <mrow> 477 <mi>E</mi> 478 <mo>=</mo> 479 <mrow> 480 <mi>m</mi> 481 <mo>⁢<!--INVISIBLE TIMES--></mo> 482 <msup> 483 <mi>c</mi> 484 <mn>2</mn> 485 </msup> 486 </mrow> 487 </mrow> 488 </mtd> 489 </mlabeledtr> 490 </mtable> 491 <mrow> 492 <mo> ( </mo> 493 <mtable> 494 <mtr id="mtr"> 495 <mtd id="mtd"> <mn>1</mn> </mtd> 496 <mtd> <mn>0</mn> </mtd> 497 <mtd> <mn>0</mn> </mtd> 498 </mtr> 499 <mtr> 500 <mtd> <mn>0</mn> </mtd> 501 <mtd> <mn>1</mn> </mtd> 502 <mtd> <mn>0</mn> </mtd> 503 </mtr> 504 <mtr> 505 <mtd> <mn>0</mn> </mtd> 506 <mtd> <mn>0</mn> </mtd> 507 <mtd> <mn>1</mn> </mtd> 508 </mtr> 509 </mtable> 510 <mo> ) </mo> 511 </mrow> 512 513 <maction id="maction" actiontype="toggle" selection="1"> 514 <mfrac> 515 <mn>6</mn> 516 <mn>8</mn> 517 </mfrac> 518 <mfrac> 519 <mrow> 520 <mn>3</mn> 521 <mo>⋅</mo> 522 <mn>2</mn> 523 </mrow> 524 <mrow> 525 <mn>4</mn> 526 <mo>⋅</mo> 527 <mn>2</mn> 528 </mrow> 529 </mfrac> 530 <mfrac> 531 <mn>3</mn> 532 <mn>4</mn> 533 </mfrac> 534 </maction> 535 536 <merror id="merror"> 537 <mrow> 538 <mtext>Division by zero: </mtext> 539 <mfrac> 540 <mn>1</mn> 541 <mn>0</mn> 542 </mfrac> 543 </mrow> 544 </merror> 545 546 <semantics id="semantics"> 547 <!-- Presentation MathML --> 548 <mrow> 549 <msup> 550 <mi>x</mi> 551 <mn>2</mn> 552 </msup> 553 <mo>+</mo> 554 <mi>y</mi> 555 </mrow> 556 <!-- Content MathML --> 557 <annotation-xml id="annotation-xml" encoding="MathML-Content"> 558 <apply> 559 <plus/> 560 <apply> 561 <power/> 562 <ci>x</ci> 563 <cn type="integer">2</cn> 564 </apply> 565 <ci>y</ci> 566 </apply> 567 </annotation-xml> 568 <!-- annotate TeX --> 569 <annotation id="annotation" encoding="application/x-tex"> 570 x^{2} + y 571 </annotation> 572 </semantics> 573 574 <mstack id="mstack" align="center"> 575 <mscarries id="mscarries" location="nw" position="1"> 576 <none/> 577 <mscarry id="mscarry" crossout="updiagonalstrike"> 578 <mn>1</mn> 579 </mscarry> 580 <mscarry location="w"> 581 <mn>1</mn> 582 </mscarry> 583 </mscarries> 584 <mn>523</mn> 585 <msrow id="msrow" position="1"> 586 <mo>-</mo> 587 <none/> 588 <mn>15</mn> 589 </msrow> 590 <msline id="msline" position="1"/> 591 <mn>508</mn> 592 </mstack> 593 <mspace width="1em"/> 594 <mlongdiv id="mlongdiv" longdivstyle="stackedrightright"> 595 <mn>5</mn> 596 <mn>1</mn> 597 <mn>5</mn> 598 </mlongdiv> 599 600 <mstack> 601 <msgroup id="msgroup" position="2" shift="-1"> 602 <mn>123</mn> 603 <msrow><mo>×<!--MULTIPLICATION SIGN--></mo><mn>321</mn></msrow> 604 </msgroup> 605 <msline/> 606 <msgroup shift="1"> 607 <mn>123</mn> 608 <mn>246</mn> 609 <mn>369</mn> 610 </msgroup> 611 <msline/> 612 </mstack> 613 </math> 614 615 </body> 616 </html>