test_HTMLSpec.html (59125B)
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 async function doTest() { 27 // //////////////////////////////////////////////////////////////////////// 28 // HTML:a@href 29 30 var obj = { 31 role: ROLE_LINK, 32 states: STATE_LINKED, 33 actions: "jump", 34 interfaces: [ nsIAccessibleText, nsIAccessibleHyperText, nsIAccessibleHyperLink ], 35 children: [ // all kids inherits linked state and action 36 { 37 role: ROLE_TEXT_LEAF, 38 states: STATE_LINKED, 39 actions: "clickAncestor", 40 }, 41 ], 42 }; 43 testElm("a_href", obj); 44 45 // //////////////////////////////////////////////////////////////////////// 46 // HTML:a no @href 47 48 obj = { 49 todo_role: ROLE_TEXT_CONTAINER, 50 absentStates: STATE_LINKED, 51 actions: null, 52 children: [ 53 { 54 role: ROLE_TEXT_LEAF, 55 absentStates: STATE_LINKED, 56 actions: null, 57 }, 58 ], 59 }; 60 testElm("a_nohref", obj); 61 62 // //////////////////////////////////////////////////////////////////////// 63 // HTML:abbr contained by HTML:td 64 65 obj = { 66 role: ROLE_CELL, 67 attributes: { abbr: "WWW" }, 68 interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], 69 children: [ 70 { 71 role: ROLE_TEXT, 72 children: [ { role: ROLE_TEXT_LEAF } ], 73 }, 74 ], 75 }; 76 testElm("td_abbr", obj); 77 78 // //////////////////////////////////////////////////////////////////////// 79 // HTML:address 80 81 obj = { 82 role: ROLE_GROUPING, 83 interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], 84 }; 85 testElm("address", obj); 86 87 // //////////////////////////////////////////////////////////////////////// 88 // HTML:area@href 89 90 obj = { 91 role: ROLE_LINK, 92 states: STATE_LINKED, 93 actions: "jump", 94 interfaces: [ nsIAccessibleHyperLink ], 95 children: [], 96 }; 97 testElm(getAccessible("imgmap").firstChild, obj); 98 99 // //////////////////////////////////////////////////////////////////////// 100 // HTML:area no @href 101 102 obj = { 103 todo_role: "ROLE_SHAPE", 104 absentStates: STATE_LINKED, 105 children: [], 106 }; 107 testElm(getAccessible("imgmap").lastChild, obj); 108 109 // //////////////////////////////////////////////////////////////////////// 110 // HTML:article 111 obj = { 112 role: ROLE_ARTICLE, 113 states: STATE_READONLY, 114 interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], 115 }; 116 testElm("article", obj); 117 118 // //////////////////////////////////////////////////////////////////////// 119 // HTML:aside 120 obj = { 121 role: ROLE_LANDMARK, 122 attributes: { "xml-roles": "complementary" }, 123 interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], 124 }; 125 testElm("aside", obj); 126 127 // //////////////////////////////////////////////////////////////////////// 128 obj = { // HTML:audio 129 role: ROLE_GROUPING, 130 }; 131 testElm("audio", obj); 132 133 // //////////////////////////////////////////////////////////////////////// 134 obj = { // HTML:b contained by paragraph 135 role: ROLE_PARAGRAPH, 136 textAttrs: { 137 0: { }, 138 6: { "font-weight": kBoldFontWeight }, 139 }, 140 children: [ 141 { role: ROLE_TEXT_LEAF }, // plain text 142 { role: ROLE_TEXT_LEAF }, // HTML:b text 143 ], 144 }; 145 testElm("b_container", obj); 146 147 // //////////////////////////////////////////////////////////////////////// 148 obj = { // HTML:bdi contained by paragraph 149 role: ROLE_PARAGRAPH, 150 todo_textAttrs: { 151 0: { }, 152 5: { "writing-mode": "rl" }, 153 8: { }, 154 }, 155 children: [ 156 { role: ROLE_TEXT_LEAF }, // plain text 157 { role: ROLE_TEXT_LEAF }, // HTML:bdi text 158 { role: ROLE_TEXT_LEAF }, // plain text 159 ], 160 }; 161 testElm("bdi_container", obj); 162 163 // //////////////////////////////////////////////////////////////////////// 164 // HTML:bdo contained by paragraph 165 166 obj = { 167 role: ROLE_PARAGRAPH, 168 todo_textAttrs: { 169 0: { }, 170 6: { "writing-mode": "rl" }, 171 }, 172 children: [ 173 { role: ROLE_TEXT_LEAF }, // plain text 174 ], 175 }; 176 testElm("bdo_container", obj); 177 178 // //////////////////////////////////////////////////////////////////////// 179 // HTML:blockquote 180 181 obj = { 182 role: ROLE_BLOCKQUOTE, 183 interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], 184 children: [ { role: ROLE_PARAGRAPH } ], 185 }; 186 testElm("blockquote", obj); 187 188 // //////////////////////////////////////////////////////////////////////// 189 // HTML:br contained by paragraph 190 191 obj = { 192 role: ROLE_PARAGRAPH, 193 children: [ 194 { role: ROLE_WHITESPACE }, 195 { role: ROLE_WHITESPACE } 196 ] 197 }; 198 testElm("br_container", obj); 199 200 // //////////////////////////////////////////////////////////////////////// 201 obj = { // HTML:button 202 role: ROLE_PUSHBUTTON, 203 absentStates: STATE_DEFAULT, 204 actions: "press", 205 interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], 206 }; 207 testElm("button", obj); 208 209 // //////////////////////////////////////////////////////////////////////// 210 // HTML:button@type="submit" (default button) 211 212 obj = { 213 role: ROLE_PUSHBUTTON, 214 states: STATE_DEFAULT, 215 actions: "press", 216 }; 217 testElm("button_default", obj); 218 219 // //////////////////////////////////////////////////////////////////////// 220 // HTML:canvas 221 222 obj = { 223 role: ROLE_CANVAS, 224 }; 225 testElm("canvas", obj); 226 227 // //////////////////////////////////////////////////////////////////////// 228 // HTML:caption under table 229 230 obj = { 231 role: ROLE_TABLE, 232 relations: { 233 RELATION_LABELLED_BY: "caption", 234 }, 235 interfaces: [ nsIAccessibleText, nsIAccessibleHyperText, nsIAccessibleTable ], 236 children: [ 237 { 238 role: ROLE_CAPTION, 239 relations: { 240 RELATION_LABEL_FOR: "table", 241 }, 242 interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], 243 }, 244 { // td inside thead 245 role: ROLE_ROW, 246 interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], 247 children: [ 248 { 249 role: ROLE_COLUMNHEADER, 250 interfaces: [ nsIAccessibleTableCell, nsIAccessibleText, nsIAccessibleHyperText ], 251 }, 252 { role: ROLE_COLUMNHEADER }, 253 ], 254 }, 255 { // td inside tbody 256 role: ROLE_ROW, 257 children: [ 258 { 259 role: ROLE_ROWHEADER, 260 interfaces: [ nsIAccessibleTableCell, nsIAccessibleText, nsIAccessibleHyperText ], 261 }, 262 { 263 role: ROLE_CELL, 264 interfaces: [ nsIAccessibleTableCell, nsIAccessibleText, nsIAccessibleHyperText ], 265 }, 266 ], 267 }, 268 { // td inside tfoot 269 role: ROLE_ROW, 270 }, 271 ], 272 }; 273 testElm("table", obj); 274 275 // //////////////////////////////////////////////////////////////////////// 276 // HTML:cite contained by paragraph 277 278 obj = { 279 role: ROLE_PARAGRAPH, 280 textAttrs: { 281 0: { }, 282 6: { "font-style": "italic" }, 283 }, 284 children: [ 285 { role: ROLE_TEXT_LEAF }, // plain text 286 { role: ROLE_TEXT_LEAF }, // HTML:cite text 287 ], 288 }; 289 testElm("cite_container", obj); 290 291 // //////////////////////////////////////////////////////////////////////// 292 // HTML:code contained by paragraph 293 294 obj = { 295 role: ROLE_PARAGRAPH, 296 textAttrs: { 297 0: { }, 298 6: { "font-family": kMonospaceFontFamily }, 299 }, 300 children: [ 301 { role: ROLE_TEXT_LEAF }, // plain text 302 { role: ROLE_CODE }, 303 ], 304 }; 305 testElm("code_container", obj); 306 307 // //////////////////////////////////////////////////////////////////////// 308 // HTML:col and HTML:colgroup under table 309 310 obj = 311 { TABLE: [ 312 { ROW: [ 313 { role: ROLE_CELL }, 314 { role: ROLE_CELL }, 315 { role: ROLE_CELL }, 316 ] }, 317 ] }; 318 testElm("colNcolgroup_table", obj); 319 320 // //////////////////////////////////////////////////////////////////////// 321 // HTML:data contained by paragraph 322 323 obj = 324 { PARAGRAPH: [ 325 { TEXT_LEAF: [] }, // HTML:data text 326 ] }; 327 testElm("data_container", obj); 328 329 // //////////////////////////////////////////////////////////////////////// 330 // HTML:datalist associated with input 331 332 todo(false, "datalist and summary tree hierarchy test missed"); 333 334 // //////////////////////////////////////////////////////////////////////// 335 // HTML:dd, HTML:dl, HTML:dd 336 337 obj = { 338 role: ROLE_DEFINITION_LIST, 339 states: STATE_READONLY, 340 children: [ // dl 341 { 342 role: ROLE_TERM, 343 states: STATE_READONLY, 344 interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], 345 children: [ // dt 346 { role: ROLE_TEXT_LEAF }, 347 ], 348 }, 349 { 350 role: ROLE_DEFINITION, 351 interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], 352 children: [ // dd 353 { role: ROLE_TEXT_LEAF }, 354 ], 355 }, 356 ], 357 }; 358 testElm("dl", obj); 359 360 // //////////////////////////////////////////////////////////////////////// 361 // HTML:del contained by paragraph 362 363 obj = { 364 role: ROLE_PARAGRAPH, 365 children: [ 366 { role: ROLE_TEXT_LEAF }, // plain text 367 { role: ROLE_CONTENT_DELETION }, 368 ], 369 }; 370 testElm("del_container", obj); 371 372 // //////////////////////////////////////////////////////////////////////// 373 // HTML:details with open state 374 375 obj = { 376 role: ROLE_DETAILS, 377 children: [ 378 { 379 role: ROLE_SUMMARY, 380 states: STATE_EXPANDED, 381 actions: "collapse", 382 }, 383 { role: ROLE_TEXT_CONTAINER, 384 children: [ 385 { 386 role: ROLE_PARAGRAPH, 387 }, 388 ], 389 }, 390 ], 391 }; 392 testElm("details", obj); 393 394 // //////////////////////////////////////////////////////////////////////// 395 // HTML:details with closed (default) state 396 397 obj = { 398 role: ROLE_DETAILS, 399 children: [ 400 { 401 role: ROLE_SUMMARY, 402 states: STATE_COLLAPSED, 403 actions: "expand", 404 }, 405 { 406 role: ROLE_TEXT_CONTAINER, 407 children: [], 408 }, 409 ], 410 }; 411 testElm("details_closed", obj); 412 413 // //////////////////////////////////////////////////////////////////////// 414 // HTML:dfn contained by paragraph 415 416 obj = { 417 role: ROLE_PARAGRAPH, 418 textAttrs: { 419 0: { }, 420 1: { }, 421 }, 422 children: [ 423 { 424 role: ROLE_TERM, // HTML:dfn 425 textAttrs: { 0: { }, }, 426 children: [ 427 { role: ROLE_TEXT_LEAF }, 428 ], 429 }, 430 { role: ROLE_TEXT_LEAF }, // plain text 431 ], 432 }; 433 testElm("dfn_container", obj); 434 435 // //////////////////////////////////////////////////////////////////////// 436 // HTML:dialog 437 438 obj = { 439 role: ROLE_DIALOG, 440 children: [ 441 { role: ROLE_TEXT_LEAF }, 442 ], 443 }; 444 testElm("dialog", obj); 445 446 // //////////////////////////////////////////////////////////////////////// 447 // HTML:div 448 449 obj = { 450 role: ROLE_SECTION, 451 interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], 452 children: [ 453 { role: ROLE_TEXT_LEAF }, // plain text 454 ], 455 }; 456 testElm("div", obj); 457 458 // //////////////////////////////////////////////////////////////////////// 459 // HTML:em in a paragraph 460 461 obj = { 462 role: ROLE_PARAGRAPH, 463 textAttrs: { 464 0: { }, 465 6: { }, 466 }, 467 children: [ 468 { role: ROLE_TEXT_LEAF }, // plain text 469 { role: ROLE_EMPHASIS, // HTML:em text 470 children: [ 471 { role: ROLE_TEXT_LEAF, }, 472 ], 473 textAttrs: { 474 0: { }, 475 }, 476 }, 477 ], 478 }; 479 testElm("em_container", obj); 480 481 // //////////////////////////////////////////////////////////////////////// 482 // HTML:embed 483 484 obj = { 485 INTERNAL_FRAME: [ { 486 DOCUMENT: [ { 487 role: ROLE_GRAPHIC, 488 interfaces: [ nsIAccessibleImage ], 489 } ], 490 } ], 491 }; 492 testElm("embed_png", obj); 493 494 obj = { 495 INTERNAL_FRAME: [ { 496 DOCUMENT: [ { 497 role: ROLE_PARAGRAPH, 498 } ], 499 } ], 500 }; 501 testElm("embed_html", obj); 502 503 obj = { 504 INTERNAL_FRAME: [ { 505 DOCUMENT: [ { 506 } ], 507 } ], 508 }; 509 testElm("embed_pdf", obj); 510 511 // //////////////////////////////////////////////////////////////////////// 512 // HTML:fieldset and HTML:legend 513 514 obj = { 515 role: ROLE_GROUPING, 516 name: "legend", 517 relations: { 518 RELATION_LABELLED_BY: "legend", 519 }, 520 children: [ 521 { 522 role: ROLE_LABEL, 523 name: "legend", 524 relations: { 525 RELATION_LABEL_FOR: "fieldset", 526 }, 527 interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], 528 }, 529 { 530 role: ROLE_ENTRY, 531 }, 532 ], 533 }; 534 testElm("fieldset", obj); 535 536 // //////////////////////////////////////////////////////////////////////// 537 // HTML:figure and HTML:figcaption 538 539 obj = { 540 role: ROLE_FIGURE, 541 attributes: { "xml-roles": "figure" }, 542 relations: { 543 RELATION_LABELLED_BY: "figcaption", 544 }, 545 children: [ 546 { role: ROLE_GRAPHIC }, 547 { 548 role: ROLE_CAPTION, 549 relations: { 550 RELATION_LABEL_FOR: "figure", 551 }, 552 interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], 553 }, 554 ], 555 }; 556 testElm("figure", obj); 557 558 // //////////////////////////////////////////////////////////////////////// 559 // HTML:footer 560 561 obj = { 562 role: ROLE_LANDMARK, 563 attributes: { "xml-roles": "contentinfo" }, 564 interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], 565 }; 566 testElm("footer", obj); 567 568 obj = { 569 role: ROLE_SECTION, 570 absentAttributes: { "xml-roles": "contentinfo" }, 571 interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], 572 }; 573 testElm("footer_in_article", obj); 574 testElm("footer_in_aside", obj); 575 testElm("footer_in_main", obj); 576 testElm("footer_in_nav", obj); 577 testElm("footer_in_section", obj); 578 testElm("footer_in_blockquote", obj); 579 testElm("footer_in_details", obj); 580 testElm("footer_in_dialog", obj); 581 testElm("footer_in_fieldset", obj); 582 testElm("footer_in_figure", obj); 583 testElm("footer_in_td", obj); 584 585 // //////////////////////////////////////////////////////////////////////// 586 // HTML:form 587 588 obj = { 589 role: ROLE_FORM, 590 absentAttributes: { "xml-roles": "form" }, 591 }; 592 testElm("form", obj); 593 594 // HTML:form with an accessible name 595 596 obj = { 597 role: ROLE_FORM_LANDMARK, 598 attributes: { "xml-roles": "form" }, 599 }; 600 testElm("named_form", obj); 601 602 // //////////////////////////////////////////////////////////////////////// 603 // // HTML:frameset, HTML:frame and HTML:iframe 604 605 obj = { 606 INTERNAL_FRAME: [ { // HTML:iframe 607 DOCUMENT: [ { 608 INTERNAL_FRAME: [ { // HTML:frame 609 DOCUMENT: [ { role: ROLE_TEXT_LEAF} ], 610 } ], 611 } ], 612 } ], 613 }; 614 testElm("frameset_container", obj); 615 616 // //////////////////////////////////////////////////////////////////////// 617 // HTML:h1, HTML:h2, HTML:h3, HTML:h4, HTML:h5, HTML:h6 618 619 function headingWithLevel(i) { 620 return { 621 role: ROLE_HEADING, 622 attributes: { "level": i.toString() }, 623 interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], 624 }; 625 } 626 627 for (let level = 1; level <= 6; ++level) { 628 testElm("h" + level, headingWithLevel(level)); 629 for (const ancestor of ["section", "article", "aside", "nav"]) { 630 testElm("h" + level + "_in_" + ancestor, headingWithLevel(level)); 631 testElm("h" + level + "_in_" + ancestor + "_in_hgroup", headingWithLevel(level)); 632 } 633 } 634 635 // //////////////////////////////////////////////////////////////////////// 636 // HTML:header 637 638 obj = { 639 role: ROLE_LANDMARK, 640 attributes: { "xml-roles": "banner" }, 641 interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], 642 }; 643 testElm("header", obj); 644 645 obj = { 646 role: ROLE_SECTION, 647 absentAttributes: { "xml-roles": "banner" }, 648 interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], 649 }; 650 testElm("header_in_article", obj); 651 testElm("header_in_aside", obj); 652 testElm("header_in_main", obj); 653 testElm("header_in_nav", obj); 654 testElm("header_in_section", obj); 655 testElm("header_in_blockquote", obj); 656 testElm("header_in_details", obj); 657 testElm("header_in_dialog", obj); 658 testElm("header_in_fieldset", obj); 659 testElm("header_in_figure", obj); 660 testElm("header_in_td", obj); 661 662 // //////////////////////////////////////////////////////////////////////// 663 // HTML:hr 664 665 obj = { 666 role: ROLE_SEPARATOR, 667 }; 668 testElm("hr", obj); 669 670 // //////////////////////////////////////////////////////////////////////// 671 obj = { // HTML:i contained by paragraph 672 role: ROLE_PARAGRAPH, 673 textAttrs: { 674 0: { }, 675 6: { "font-style": "italic" }, 676 }, 677 children: [ 678 { role: ROLE_TEXT_LEAF }, // plain text 679 { role: ROLE_TEXT_LEAF }, // HTML:i text 680 ], 681 }; 682 testElm("i_container", obj); 683 684 // //////////////////////////////////////////////////////////////////////// 685 // HTML:img 686 687 obj = { 688 role: ROLE_GRAPHIC, 689 interfaces: [ nsIAccessibleImage ], 690 }; 691 testElm("img", obj); 692 693 // //////////////////////////////////////////////////////////////////////// 694 // HTML:input@type="button" 695 696 obj = { 697 role: ROLE_PUSHBUTTON, 698 absentStates: STATE_DEFAULT, 699 }; 700 testElm("input_button", obj); 701 702 // //////////////////////////////////////////////////////////////////////// 703 // HTML:input@type="checkbox" 704 705 obj = { 706 role: ROLE_CHECKBUTTON, 707 states: STATE_CHECKABLE, 708 absentStates: STATE_CHECKED, 709 actions: "check", 710 }; 711 testElm("input_checkbox", obj); 712 713 obj = { 714 role: ROLE_CHECKBUTTON, 715 states: STATE_CHECKABLE | STATE_CHECKED, 716 actions: "uncheck", 717 }; 718 testElm("input_checkbox_true", obj); 719 720 // //////////////////////////////////////////////////////////////////////// 721 // HTML:input@type="file" 722 723 obj = { 724 role: ROLE_PUSHBUTTON, 725 actions: "press", 726 }; 727 testElm("input_file", obj); 728 729 // //////////////////////////////////////////////////////////////////////// 730 // HTML:input@type="image" 731 732 obj = { 733 role: ROLE_PUSHBUTTON, 734 absentStates: STATE_DEFAULT, 735 actions: "press", 736 }; 737 testElm("input_image", obj); 738 testElm("input_image_display", obj); 739 testElm("input_submit", obj); 740 741 obj = { 742 role: ROLE_PUSHBUTTON, 743 actions: "press", 744 states: STATE_DEFAULT, 745 }; 746 testElm("input_image_default", obj); 747 testElm("input_submit_default", obj); 748 749 // //////////////////////////////////////////////////////////////////////// 750 // HTML:input@type="number" and etc 751 752 obj = { 753 role: ROLE_SPINBUTTON, 754 interfaces: [ nsIAccessibleValue, nsIAccessibleText, nsIAccessibleEditableText ], 755 children: [ 756 { role: ROLE_TEXT_LEAF }, 757 ], 758 }; 759 testElm("input_number", obj); 760 761 // //////////////////////////////////////////////////////////////////////// 762 // HTML:input@type="text" and etc 763 764 obj = { 765 role: ROLE_ENTRY, 766 extraStates: EXT_STATE_EDITABLE | EXT_STATE_SINGLE_LINE, 767 actions: "activate", 768 interfaces: [ nsIAccessibleText, nsIAccessibleEditableText ], 769 children: [ 770 { role: ROLE_TEXT_LEAF }, 771 ], 772 }; 773 testElm("input_email", obj); 774 testElm("input_tel", obj); 775 testElm("input_text", obj); 776 testElm("input_url", obj); 777 778 // //////////////////////////////////////////////////////////////////////// 779 // HTML:input@type="search" 780 781 obj = { 782 role: ROLE_SEARCHBOX, 783 extraStates: EXT_STATE_EDITABLE | EXT_STATE_SINGLE_LINE, 784 actions: "activate", 785 interfaces: [ nsIAccessibleText, nsIAccessibleEditableText ], 786 children: [ 787 { role: ROLE_TEXT_LEAF }, 788 ], 789 }; 790 testElm("input_search", obj); 791 792 // //////////////////////////////////////////////////////////////////////// 793 // input @type="text" with placeholder attribute 794 795 // First: Label and placeholder, text is the same, no attribute. 796 obj = { 797 role: ROLE_ENTRY, 798 name: "Your name", 799 extraStates: EXT_STATE_EDITABLE | EXT_STATE_SINGLE_LINE, 800 actions: "activate", 801 absentAttributes: { placeholder: "Your name" }, 802 interfaces: [ nsIAccessibleText, nsIAccessibleEditableText ], 803 children: [], 804 }; 805 testElm("input_placeholder_same", obj); 806 807 // Second: Label and placeholder, text is different, attribute. 808 obj = { 809 role: ROLE_ENTRY, 810 name: "First name:", 811 extraStates: EXT_STATE_EDITABLE | EXT_STATE_SINGLE_LINE, 812 actions: "activate", 813 attributes: { placeholder: "Enter your first name" }, 814 interfaces: [ nsIAccessibleText, nsIAccessibleEditableText ], 815 children: [], 816 }; 817 testElm("input_placeholder_different", obj); 818 819 // Third: placeholder only, text is name, no attribute. 820 obj = { 821 role: ROLE_ENTRY, 822 name: "Date of birth", 823 extraStates: EXT_STATE_EDITABLE | EXT_STATE_SINGLE_LINE, 824 actions: "activate", 825 absentAttributes: { placeholder: "Date of birth" }, 826 interfaces: [ nsIAccessibleText, nsIAccessibleEditableText ], 827 children: [], 828 }; 829 testElm("input_placeholder_only", obj); 830 831 // //////////////////////////////////////////////////////////////////////// 832 // HTML:input@type="password" 833 834 obj = { 835 role: ROLE_PASSWORD_TEXT, 836 states: STATE_PROTECTED, 837 extraStates: EXT_STATE_EDITABLE, 838 actions: "activate", 839 children: [ 840 { 841 role: ROLE_TEXT_LEAF, 842 }, 843 ], 844 }; 845 testElm("input_password", obj); 846 ok(getAccessible("input_password").firstChild.name != "44", 847 "text leaf for password shouldn't have its real value as its name!"); 848 849 obj = { 850 role: ROLE_PASSWORD_TEXT, 851 states: STATE_PROTECTED | STATE_READONLY, 852 actions: "activate", 853 children: [ 854 { 855 role: ROLE_TEXT_LEAF, 856 }, 857 ], 858 }; 859 testElm("input_password_readonly", obj); 860 ok(getAccessible("input_password_readonly").firstChild.name != "44", 861 "text leaf for password shouldn't have its real value as its name!"); 862 863 // //////////////////////////////////////////////////////////////////////// 864 // HTML:input@type="radio" 865 866 obj = { 867 role: ROLE_RADIOBUTTON, 868 states: STATE_CHECKABLE, 869 absentStates: STATE_CHECKED, 870 actions: "select", 871 }; 872 testElm("input_radio", obj); 873 874 obj = { 875 role: ROLE_RADIOBUTTON, 876 states: STATE_CHECKABLE | STATE_CHECKED, 877 actions: "select", 878 }; 879 testElm("input_radio_true", obj); 880 881 // //////////////////////////////////////////////////////////////////////// 882 // HTML:input@type="range" 883 884 obj = { 885 role: ROLE_SLIDER, 886 }; 887 testElm("input_range", obj); 888 889 // //////////////////////////////////////////////////////////////////////// 890 // HTML:input@type="reset" 891 892 obj = { 893 role: ROLE_PUSHBUTTON, 894 actions: "press", 895 absentStates: STATE_DEFAULT, 896 }; 897 testElm("input_reset", obj); 898 899 // //////////////////////////////////////////////////////////////////////// 900 // HTML:input@type="time" 901 902 obj = { 903 role: ROLE_TIME_EDITOR, 904 name: "time label", 905 attributes: { "text-input-type": "time" }, 906 children: [ 907 { role: ROLE_SPINBUTTON }, 908 { role: ROLE_TEXT_LEAF }, 909 { role: ROLE_SPINBUTTON }, 910 { role: ROLE_TEXT_LEAF }, 911 { role: ROLE_ENTRY }, 912 ], 913 }; 914 testElm("input_time", obj); 915 916 // //////////////////////////////////////////////////////////////////////// 917 // HTML:input@type="date" 918 919 obj = { 920 role: ROLE_DATE_EDITOR, 921 name: "date label", 922 attributes: { "text-input-type": "date" }, 923 children: [ 924 { role: ROLE_SPINBUTTON }, 925 { role: ROLE_TEXT_LEAF }, 926 { role: ROLE_SPINBUTTON }, 927 { role: ROLE_TEXT_LEAF }, 928 { role: ROLE_SPINBUTTON }, 929 { role: ROLE_PUSHBUTTON }, 930 ], 931 }; 932 testElm("input_date", obj); 933 934 // //////////////////////////////////////////////////////////////////////// 935 // HTML:input@type="datetime-local" 936 937 obj = { 938 role: ROLE_DATE_EDITOR, 939 name: "datetime-local label", 940 attributes: { "text-input-type": "datetime-local" }, 941 children: [ 942 { role: ROLE_SPINBUTTON }, // Month 943 { role: ROLE_TEXT_LEAF }, // "/"" 944 { role: ROLE_SPINBUTTON }, // Day 945 { role: ROLE_TEXT_LEAF }, // "/" 946 { role: ROLE_SPINBUTTON }, // Year 947 { role: ROLE_TEXT_LEAF }, // " " 948 { role: ROLE_SPINBUTTON }, // Hours 949 { role: ROLE_TEXT_LEAF }, // ":" 950 { role: ROLE_SPINBUTTON }, // Minutes 951 { role: ROLE_TEXT_LEAF }, // " " 952 { role: ROLE_ENTRY }, // "AM" or "PM" 953 { role: ROLE_PUSHBUTTON }, // Calendar 954 ], 955 }; 956 testElm("input_datetime_local", obj); 957 958 // //////////////////////////////////////////////////////////////////////// 959 // HTML:ins contained by paragraph 960 961 obj = { 962 role: ROLE_PARAGRAPH, 963 children: [ 964 { role: ROLE_TEXT_LEAF }, // plain text 965 { role: ROLE_CONTENT_INSERTION }, 966 ], 967 }; 968 testElm("ins_container", obj); 969 970 // //////////////////////////////////////////////////////////////////////// 971 // HTML:kbd contained by paragraph 972 973 obj = { 974 role: ROLE_PARAGRAPH, 975 textAttrs: { 976 0: { }, 977 6: { "font-family": kMonospaceFontFamily }, 978 }, 979 children: [ 980 { role: ROLE_TEXT_LEAF }, // plain text 981 { role: ROLE_TEXT_LEAF }, // HTML:kbd text 982 ], 983 }; 984 testElm("kbd_container", obj); 985 986 // //////////////////////////////////////////////////////////////////////// 987 // HTML:label 988 989 obj = { 990 role: ROLE_LABEL, 991 todo_relations: { 992 RELATION_LABEL_FOR: "label_input", 993 }, 994 children: [ 995 { role: ROLE_TEXT_LEAF }, // plain text 996 { 997 role: ROLE_ENTRY, 998 relations: { 999 RELATION_LABELLED_BY: "label", 1000 }, 1001 }, 1002 ], 1003 }; 1004 testElm("label", obj); 1005 1006 obj = { 1007 role: ROLE_LABEL, 1008 relations: { 1009 RELATION_LABEL_FOR: "label_for_input", 1010 }, 1011 }; 1012 testElm("label_for", obj); 1013 1014 obj = { 1015 role: ROLE_ENTRY, 1016 relations: { 1017 RELATION_LABELLED_BY: "label_for", 1018 }, 1019 }; 1020 testElm("label_for_input", obj); 1021 1022 // //////////////////////////////////////////////////////////////////////// 1023 // HTML:ul, HTML:ol, HTML:li 1024 1025 obj = { // ul or ol 1026 role: ROLE_LIST, 1027 states: STATE_READONLY, 1028 children: [ 1029 { // li 1030 role: ROLE_LISTITEM, 1031 states: STATE_READONLY, 1032 interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], 1033 }, 1034 ], 1035 }; 1036 testElm("ul", obj); 1037 testElm("ol", obj); 1038 1039 // //////////////////////////////////////////////////////////////////////// 1040 // HTML:link 1041 1042 ok(!isAccessible("link"), "link element is not accessible"); 1043 1044 // //////////////////////////////////////////////////////////////////////// 1045 // HTML:main 1046 1047 obj = { 1048 role: ROLE_LANDMARK, 1049 attributes: { "xml-roles": "main" }, 1050 interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], 1051 }; 1052 testElm("main", obj); 1053 1054 // //////////////////////////////////////////////////////////////////////// 1055 // HTML:map 1056 1057 ok(!isAccessible("map_imagemap"), 1058 "map element is not accessible if used as an image map"); 1059 1060 obj = { 1061 role: ROLE_TEXT_CONTAINER, 1062 }; 1063 testElm("map", obj); 1064 1065 // //////////////////////////////////////////////////////////////////////// 1066 // HTML:mark contained by paragraph 1067 1068 obj = { 1069 role: ROLE_PARAGRAPH, 1070 children: [ 1071 { role: ROLE_TEXT_LEAF }, // plain text 1072 { role: ROLE_MARK, // HTML:mark text 1073 attributes: { "xml-roles": "mark" }, 1074 interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], 1075 textAttrs: { 1076 0: { }, 1077 } 1078 } 1079 ], 1080 }; 1081 testElm("mark_container", obj); 1082 1083 // //////////////////////////////////////////////////////////////////////// 1084 // HTML:math 1085 1086 obj = { 1087 role: ROLE_MATHML_MATH, 1088 }; 1089 testElm("math", obj); 1090 1091 // //////////////////////////////////////////////////////////////////////// 1092 // HTML:menu 1093 1094 obj = { 1095 role: ROLE_LIST, // menu 1096 children: [ 1097 { role: ROLE_LISTITEM, 1098 children: [ // home 1099 { role: ROLE_LISTITEM_MARKER }, 1100 { role: ROLE_TEXT_LEAF } 1101 ] 1102 }, 1103 { 1104 role: ROLE_LISTITEM, 1105 children: [ 1106 { role: ROLE_LISTITEM_MARKER }, 1107 { role: ROLE_TEXT_LEAF }, // about 1108 { 1109 role: ROLE_LIST, // menu 1110 children: [ 1111 { role: ROLE_LISTITEM, 1112 children: [ 1113 { role: ROLE_LISTITEM_MARKER }, 1114 { role: ROLE_TEXT_LEAF } // our story 1115 ] 1116 }, 1117 ] 1118 }, 1119 ] 1120 }, 1121 ] 1122 }; 1123 1124 testElm("menu", obj); 1125 obj = { 1126 role: ROLE_LIST, 1127 children: [ 1128 { 1129 role: ROLE_LISTITEM, 1130 children: [ 1131 { role: ROLE_LISTITEM_MARKER }, 1132 { 1133 role: ROLE_PUSHBUTTON, 1134 children: [ 1135 { role: ROLE_TEXT_LEAF } 1136 ] 1137 }, 1138 { 1139 role: ROLE_LIST, 1140 children: [ 1141 { 1142 role: ROLE_LISTITEM, 1143 children: [ 1144 { role: ROLE_LISTITEM_MARKER }, 1145 { 1146 role: ROLE_PUSHBUTTON, 1147 children: [ 1148 { role: ROLE_TEXT_LEAF } 1149 ] 1150 } 1151 ] 1152 }, 1153 ] 1154 } 1155 ] 1156 } 1157 ] 1158 }; 1159 testElm("menu1", obj); 1160 1161 // //////////////////////////////////////////////////////////////////////// 1162 // HTML:meter 1163 obj = { 1164 role: ROLE_METER 1165 }; 1166 testElm("meter", obj); 1167 1168 // //////////////////////////////////////////////////////////////////////// 1169 // HTML:nav 1170 1171 obj = { 1172 role: ROLE_LANDMARK, 1173 attributes: { "xml-roles": "navigation" }, 1174 interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], 1175 }; 1176 testElm("nav", obj); 1177 1178 // //////////////////////////////////////////////////////////////////////// 1179 // HTML:object and HTML:param 1180 1181 obj = { 1182 INTERNAL_FRAME: [ { 1183 DOCUMENT: [ { 1184 role: ROLE_GRAPHIC, 1185 interfaces: [ nsIAccessibleImage ], 1186 } ], 1187 } ], 1188 }; 1189 testElm("object_png", obj); 1190 1191 obj = { 1192 INTERNAL_FRAME: [ { 1193 DOCUMENT: [ { 1194 role: ROLE_PARAGRAPH, 1195 } ], 1196 } ], 1197 }; 1198 testElm("object_html", obj); 1199 1200 obj = { 1201 INTERNAL_FRAME: [ { 1202 DOCUMENT: [ { 1203 } ], 1204 } ], 1205 }; 1206 testElm("object_pdf", obj); 1207 1208 // //////////////////////////////////////////////////////////////////////// 1209 // HTML:select, HTML:optgroup and HTML:option 1210 1211 obj = { // HMTL:select@size > 1 1212 role: ROLE_LISTBOX, 1213 states: STATE_FOCUSABLE, 1214 absentStates: STATE_MULTISELECTABLE, 1215 interfaces: [ nsIAccessibleSelectable ], 1216 children: [ 1217 { GROUPING: [ // HTML:optgroup 1218 { role: ROLE_STATICTEXT }, 1219 { role: ROLE_STATICTEXT }, 1220 { role: ROLE_OPTION }, // HTML:option 1221 { role: ROLE_OPTION }, 1222 ] }, 1223 { 1224 role: ROLE_OPTION, 1225 states: STATE_FOCUSABLE, 1226 actions: "select", 1227 interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], 1228 }, 1229 ], 1230 }; 1231 testElm("select_listbox", obj); 1232 1233 obj = { // HTML:select@multiple 1234 role: ROLE_LISTBOX, 1235 states: STATE_FOCUSABLE | STATE_MULTISELECTABLE, 1236 children: [ 1237 { role: ROLE_OPTION }, 1238 { role: ROLE_OPTION }, 1239 { role: ROLE_OPTION }, 1240 ], 1241 }; 1242 testElm("select_listbox_multiselectable", obj); 1243 1244 obj = { // HTML:select 1245 role: ROLE_COMBOBOX, 1246 states: STATE_FOCUSABLE, 1247 children: [ 1248 { 1249 role: ROLE_COMBOBOX_LIST, 1250 children: [ 1251 { role: ROLE_COMBOBOX_OPTION }, 1252 { role: ROLE_COMBOBOX_OPTION }, 1253 { role: ROLE_COMBOBOX_OPTION }, 1254 ], 1255 }, 1256 ], 1257 }; 1258 testElm("select_combobox", obj); 1259 1260 // //////////////////////////////////////////////////////////////////////// 1261 // HTML:output 1262 1263 obj = { 1264 role: ROLE_STATUSBAR, 1265 attributes: { "live": "polite" }, 1266 todo_relations: { 1267 RELATION_CONTROLLED_BY: "output_input", 1268 }, 1269 interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], 1270 }; 1271 testElm("output", obj); 1272 1273 obj = { 1274 role: ROLE_ENTRY, 1275 relations: { 1276 RELATION_CONTROLLER_FOR: "output", 1277 }, 1278 }; 1279 testElm("output_input", obj); 1280 1281 // //////////////////////////////////////////////////////////////////////// 1282 // HTML:pre 1283 1284 obj = { 1285 role: ROLE_TEXT_CONTAINER, 1286 interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], 1287 }; 1288 testElm("pre", obj); 1289 1290 // ///////////////////////////////////////////////////////////////////////// 1291 // HTML:progress 1292 1293 obj = { 1294 role: ROLE_PROGRESSBAR, 1295 absentStates: STATE_MIXED, 1296 interfaces: [ nsIAccessibleValue ], 1297 }; 1298 testElm("progress", obj); 1299 1300 obj = { 1301 role: ROLE_PROGRESSBAR, 1302 states: STATE_MIXED, 1303 }; 1304 testElm("progress_indeterminate", obj); 1305 1306 // //////////////////////////////////////////////////////////////////////// 1307 // HTML:q 1308 1309 obj = { 1310 role: ROLE_TEXT, 1311 interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], 1312 children: [ 1313 { role: ROLE_STATICTEXT }, // left quote 1314 { role: ROLE_TEXT_LEAF }, // quoted text 1315 { role: ROLE_STATICTEXT }, // right quote 1316 ], 1317 }; 1318 testElm("q", obj); 1319 1320 // //////////////////////////////////////////////////////////////////////// 1321 // HTML:ruby 1322 1323 todo(isAccessible("ruby"), "ruby element is not accessible"); 1324 1325 // //////////////////////////////////////////////////////////////////////// 1326 // HTML:s contained by paragraph 1327 1328 obj = { 1329 role: ROLE_PARAGRAPH, 1330 children: [ 1331 { role: ROLE_TEXT_LEAF }, // plain text 1332 { role: ROLE_CONTENT_DELETION }, 1333 ], 1334 }; 1335 testElm("s_container", obj); 1336 1337 // //////////////////////////////////////////////////////////////////////// 1338 // HTML:samp contained by paragraph 1339 1340 obj = { 1341 role: ROLE_PARAGRAPH, 1342 children: [ 1343 { role: ROLE_TEXT_LEAF }, // plain text 1344 { role: ROLE_TEXT_LEAF }, // HTML:samp text 1345 ], 1346 }; 1347 testElm("samp_container", obj); 1348 1349 // //////////////////////////////////////////////////////////////////////// 1350 // HTML:search 1351 1352 obj = { 1353 role: ROLE_LANDMARK, 1354 attributes: { "xml-roles": "search" }, 1355 interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], 1356 }; 1357 testElm("search", obj); 1358 1359 // //////////////////////////////////////////////////////////////////////// 1360 // HTML:section without an accessible name 1361 1362 obj = { 1363 role: ROLE_SECTION, 1364 absentAttributes: { "xml-roles": "region" }, 1365 interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], 1366 }; 1367 testElm("section", obj); 1368 1369 // HTML:section with an accessible name 1370 1371 obj = { 1372 role: ROLE_REGION, 1373 attributes: { "xml-roles": "region" }, 1374 interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], 1375 }; 1376 testElm("named_section", obj); 1377 1378 // //////////////////////////////////////////////////////////////////////// 1379 // HTML:small contained by paragraph 1380 1381 obj = { 1382 role: ROLE_PARAGRAPH, 1383 textAttrs: { 1384 0: { }, 1385 6: { "font-size": "10pt" }, 1386 }, 1387 children: [ 1388 { role: ROLE_TEXT_LEAF }, // plain text 1389 { role: ROLE_TEXT_LEAF }, // HTML:small text 1390 ], 1391 }; 1392 testElm("small_container", obj); 1393 1394 // //////////////////////////////////////////////////////////////////////// 1395 // HTML:source 1396 1397 ok(!isAccessible("source"), "source element is not accessible"); 1398 1399 // //////////////////////////////////////////////////////////////////////// 1400 // HTML:span 1401 1402 ok(!isAccessible("span"), "span element is not accessible"); 1403 1404 // //////////////////////////////////////////////////////////////////////// 1405 // html:span with a title attribute, which should make it accessible. 1406 obj = { 1407 role: ROLE_TEXT, 1408 }; 1409 testElm("span_explicit", obj); 1410 1411 // //////////////////////////////////////////////////////////////////////// 1412 // HTML:strong contained by paragraph 1413 1414 obj = { 1415 role: ROLE_PARAGRAPH, 1416 children: [ 1417 { role: ROLE_TEXT_LEAF }, // plain text 1418 { 1419 role: ROLE_STRONG, // HTML:strong text 1420 children: [ 1421 { role: ROLE_TEXT_LEAF, }, 1422 ], 1423 }, 1424 ], 1425 }; 1426 testElm("strong_container", obj); 1427 1428 // //////////////////////////////////////////////////////////////////////// 1429 // HTML:sub 1430 obj = { 1431 role: ROLE_SUBSCRIPT 1432 }; 1433 testElm("sub", obj); 1434 1435 // //////////////////////////////////////////////////////////////////////// 1436 // HTML:sup 1437 obj = { 1438 role: ROLE_SUPERSCRIPT 1439 }; 1440 testElm("sup", obj); 1441 1442 // //////////////////////////////////////////////////////////////////////// 1443 // HTML:sub contained by paragraph 1444 1445 obj = { 1446 role: ROLE_PARAGRAPH, 1447 children: [ 1448 { role: ROLE_TEXT_LEAF }, // plain text 1449 { 1450 role: ROLE_SUBSCRIPT, // HTML:sub 1451 children: [ 1452 { role: ROLE_TEXT_LEAF } // HTML:sub text 1453 ] 1454 } 1455 ], 1456 }; 1457 testElm("sub_container", obj); 1458 1459 // //////////////////////////////////////////////////////////////////////// 1460 // HTML:sup contained by paragraph 1461 1462 obj = { 1463 role: ROLE_PARAGRAPH, 1464 children: [ 1465 { role: ROLE_TEXT_LEAF }, // plain text 1466 { 1467 role: ROLE_SUPERSCRIPT, // HTML:sup 1468 children: [ 1469 { role: ROLE_TEXT_LEAF } // HTML:sup text 1470 ] 1471 } 1472 ], 1473 }; 1474 testElm("sup_container", obj); 1475 1476 // //////////////////////////////////////////////////////////////////////// 1477 // HTML:svg 1478 1479 obj = { 1480 todo_role: ROLE_GRAPHIC, 1481 }; 1482 testElm("svg", obj); 1483 1484 // //////////////////////////////////////////////////////////////////////// 1485 // HTML:textarea 1486 1487 obj = { 1488 role: ROLE_ENTRY, 1489 extraStates: EXT_STATE_MULTI_LINE | EXT_STATE_EDITABLE, 1490 actions: "activate", 1491 interfaces: [ nsIAccessibleText, nsIAccessibleEditableText ], 1492 }; 1493 testElm("textarea", obj); 1494 1495 // //////////////////////////////////////////////////////////////////////// 1496 // HTML:time 1497 1498 obj = { 1499 role: ROLE_TIME, 1500 attributes: { "xml-roles": "time", "datetime": "2001-05-15 19:00" }, 1501 interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], 1502 }; 1503 testElm("time", obj); 1504 1505 // //////////////////////////////////////////////////////////////////////// 1506 // HTML:u contained by paragraph 1507 1508 obj = { 1509 role: ROLE_PARAGRAPH, 1510 textAttrs: { 1511 0: { }, 1512 6: { "text-underline-style": "solid" }, 1513 }, 1514 children: [ 1515 { role: ROLE_TEXT_LEAF }, // plain text 1516 { role: ROLE_TEXT_LEAF }, // HTML:u text 1517 ], 1518 }; 1519 testElm("u_container", obj); 1520 1521 // //////////////////////////////////////////////////////////////////////// 1522 // HTML:var contained by paragraph 1523 1524 obj = { 1525 role: ROLE_PARAGRAPH, 1526 children: [ 1527 { role: ROLE_TEXT_LEAF }, // plain text 1528 { role: ROLE_TEXT_LEAF }, // HTML:var text 1529 { role: ROLE_TEXT_LEAF }, // plain text 1530 { role: ROLE_TEXT_LEAF }, // HTML:var text 1531 ], 1532 }; 1533 testElm("var_container", obj); 1534 1535 // //////////////////////////////////////////////////////////////////////// 1536 obj = { // HTML:video 1537 role: ROLE_GROUPING, 1538 }; 1539 testElm("video", obj); 1540 1541 SimpleTest.finish(); 1542 } 1543 1544 SimpleTest.waitForExplicitFinish(); 1545 addA11yLoadEvent(doTest); 1546 1547 </script> 1548 </head> 1549 <body> 1550 1551 <a target="_blank" 1552 title="Implement figure and figcaption accessibility" 1553 href="https://bugzilla.mozilla.org/show_bug.cgi?id=658272"> 1554 Mozilla Bug 658272 1555 </a><br/> 1556 <p id="display"></p> 1557 <div id="content" style="display: none"></div> 1558 <pre id="test"> 1559 </pre> 1560 1561 <a id="a_href" href="www.mozilla.com">mozilla site</a> 1562 <a id="a_nohref">anchor</a> 1563 <table> 1564 <tr> 1565 <td id="td_abbr"><abbr title="World Wide Web">WWW</abbr></td> 1566 </tr> 1567 </table> 1568 <address id="address"> 1569 Mozilla Foundation<br> 1570 1981 Landings Drive<br> 1571 Building K<br> 1572 Mountain View, CA 94043-0801<br> 1573 USA 1574 </address> 1575 1576 <map name="atoz_map"> 1577 <area id="area_href" 1578 href="http://www.bbc.co.uk/radio4/atoz/index.shtml#b" 1579 coords="17,0,30,14" alt="b" shape="rect"> 1580 <area id="area_nohref" 1581 coords="0,0,13,14" alt="a" shape="rect"> 1582 </map> 1583 <img id="imgmap" width="447" height="15" 1584 usemap="#atoz_map" 1585 src="../letters.gif"> 1586 1587 <article id="article">A document</article> 1588 <audio id="audio" controls="true"> 1589 <source id="source" src="../bug461281.ogg" type="video/ogg"> 1590 </audio> 1591 1592 <aside id="aside"> 1593 <p>Some content related to an <article></p> 1594 </aside> 1595 1596 <p id="b_container">normal<b>bold</b></p> 1597 <p id="bdi_container">User <bdi>إيان</bdi>: 90 points</p> 1598 <p id="bdo_container"><bdo dir="rtl">This text will go right to left.</bdo></p> 1599 1600 <blockquote id="blockquote" cite="http://developer.mozilla.org"> 1601 <p>This is a quotation taken from the Mozilla Developer Center.</p> 1602 </blockquote> 1603 1604 <!-- two BRs, both will be present --> 1605 <p id="br_container"><br><br></p> 1606 1607 <button id="button">button</button> 1608 <form> 1609 <button id="button_default" type="submit">button</button> 1610 </form> 1611 1612 <canvas id="canvas"></canvas> 1613 1614 <table id="table"> 1615 <caption id="caption">caption</caption> 1616 <thead> 1617 <tr> 1618 <th>col1</th><th>col2</th> 1619 </tr> 1620 </thead> 1621 <tbody> 1622 <tr> 1623 <th>col1</th><td>cell2</td> 1624 </tr> 1625 </tbody> 1626 <tfoot> 1627 <tr> 1628 <td>cell5</td><td>cell6</td> 1629 </tr> 1630 </tfoot> 1631 </table> 1632 1633 <p id="cite_container">normal<cite>cite</cite></p> 1634 <p id="code_container">normal<code>code</code></p> 1635 1636 <table id="colNcolgroup_table"> 1637 <colgroup> 1638 <col> 1639 <col span="2"> 1640 </colgroup> 1641 <tr> 1642 <td>Lime</td> 1643 <td>Lemon</td> 1644 <td>Orange</td> 1645 </tr> 1646 </table> 1647 1648 <p id="data_container"><data value="8">Eight</data></p> 1649 1650 <datalist id="datalist"> 1651 <summary id="summary">details</summary> 1652 <option>Paris</option> 1653 <option>San Francisco</option> 1654 </datalist> 1655 <input id="autocomplete_datalist" list="datalist"> 1656 1657 <dl id="dl"> 1658 <dt>item1</dt><dd>description</dd> 1659 </dl> 1660 1661 <p id="del_container">normal<del>Removed</del></p> 1662 1663 <details id="details" open="open"> 1664 <summary>Information</summary> 1665 <p>If your browser supports this element, it should allow you to expand and collapse these details.</p> 1666 </details> 1667 1668 <details id="details_closed"> 1669 <summary>Information</summary> 1670 <p>If your browser supports this element, it should allow you to expand and collapse these details.</p> 1671 </details> 1672 1673 <p id="dfn_container"><dfn id="def-internet">The Internet</dfn> is a global 1674 system of interconnected networks that use the Internet Protocol Suite (TCP/IP) 1675 to serve billions of users worldwide.</p> 1676 1677 <dialog id="dialog" open="true">This is a dialog</dialog> 1678 1679 <div id="div">div</div> 1680 1681 <p id="em_container">normal<em>emphasis</em></p> 1682 1683 <embed id="embed_png" type="image/png" src="../moz.png" 1684 width="300" height="300"> 1685 </embed> 1686 <embed id="embed_html" type="text/html" src="../longdesc_src.html" 1687 width="300" height="300"> 1688 </embed> 1689 <embed id="embed_pdf" type="application/pdf" src="../dummy.pdf" 1690 width="300" height="300"> 1691 </embed> 1692 1693 <fieldset id="fieldset"> 1694 <legend id="legend">legend</legend> 1695 <input /> 1696 </fieldset> 1697 1698 <!-- Depending on whether or not the image is cached, layout may be able to 1699 optimize away spaces between the figure, img and figcaption tags. As 1700 such, we should keep everything on one line to get consistent results. 1701 --> 1702 <figure id="figure"><img src="../moz.png" alt="An awesome picture"><figcaption id="figcaption">Caption for the awesome picture</figcaption></figure> 1703 1704 <footer id="footer">Some copyright info</footer> 1705 <article> 1706 <footer id="footer_in_article">Some copyright info</footer> 1707 </article> 1708 <aside> 1709 <footer id="footer_in_aside">Some copyright info</footer> 1710 </aside> 1711 <main> 1712 <footer id="footer_in_main">Some copyright info</footer> 1713 </main> 1714 <nav> 1715 <footer id="footer_in_nav">Some copyright info</footer> 1716 </nav> 1717 <section> 1718 <footer id="footer_in_section">Some copyright info</footer> 1719 </section> 1720 <blockquote> 1721 <footer id="footer_in_blockquote">Some copyright info</footer> 1722 </blockquote> 1723 <details open="true"> 1724 <footer id="footer_in_details">Some copyright info</footer> 1725 </details> 1726 <dialog open="true"> 1727 <footer id="footer_in_dialog">Some copyright info</footer> 1728 </dialog> 1729 <fieldset> 1730 <footer id="footer_in_fieldset">Some copyright info</footer> 1731 </fieldset> 1732 <figure> 1733 <footer id="footer_in_figure">Some copyright info</footer> 1734 </figure> 1735 <table><tr><td> 1736 <footer id="footer_in_td">Some copyright info</footer> 1737 </td></tr></table> 1738 1739 <form id="form"></form> 1740 <form id="named_form" aria-label="New form"></form> 1741 1742 <iframe id="frameset_container" 1743 src="data:text/html,<html><frameset><frame src='data:text/html,hi'></frame></frameset></html>"> 1744 </iframe> 1745 1746 <h1 id="h1">heading1</h1> 1747 <h2 id="h2">heading2</h2> 1748 <h3 id="h3">heading3</h3> 1749 <h4 id="h4">heading4</h4> 1750 <h5 id="h5">heading5</h5> 1751 <h6 id="h6">heading6</h6> 1752 1753 <header id="header">A logo</header> 1754 <article> 1755 <header id="header_in_article">Not logo</header> 1756 <h1 id="h1_in_article">heading1</h1> 1757 <h2 id="h2_in_article">heading2</h2> 1758 <h3 id="h3_in_article">heading3</h3> 1759 <h4 id="h4_in_article">heading4</h4> 1760 <h5 id="h5_in_article">heading5</h5> 1761 <h6 id="h6_in_article">heading6</h6> 1762 <hgroup> 1763 <h1 id="h1_in_article_in_hgroup">heading1</h1> 1764 <h2 id="h2_in_article_in_hgroup">heading2</h2> 1765 <h3 id="h3_in_article_in_hgroup">heading3</h3> 1766 <h4 id="h4_in_article_in_hgroup">heading4</h4> 1767 <h5 id="h5_in_article_in_hgroup">heading5</h5> 1768 <h6 id="h6_in_article_in_hgroup">heading6</h6> 1769 </hgroup> 1770 </article> 1771 <aside> 1772 <header id="header_in_aside">Not logo</header> 1773 <h1 id="h1_in_aside">heading1</h1> 1774 <h2 id="h2_in_aside">heading2</h2> 1775 <h3 id="h3_in_aside">heading3</h3> 1776 <h4 id="h4_in_aside">heading4</h4> 1777 <h5 id="h5_in_aside">heading5</h5> 1778 <h6 id="h6_in_aside">heading6</h6> 1779 <hgroup> 1780 <h1 id="h1_in_aside_in_hgroup">heading1</h1> 1781 <h2 id="h2_in_aside_in_hgroup">heading2</h2> 1782 <h3 id="h3_in_aside_in_hgroup">heading3</h3> 1783 <h4 id="h4_in_aside_in_hgroup">heading4</h4> 1784 <h5 id="h5_in_aside_in_hgroup">heading5</h5> 1785 <h6 id="h6_in_aside_in_hgroup">heading6</h6> 1786 </hgroup> 1787 </aside> 1788 <main> 1789 <header id="header_in_main">Not logo</header> 1790 </main> 1791 <nav> 1792 <header id="header_in_nav">Not logo</header> 1793 <h1 id="h1_in_nav">heading1</h1> 1794 <h2 id="h2_in_nav">heading2</h2> 1795 <h3 id="h3_in_nav">heading3</h3> 1796 <h4 id="h4_in_nav">heading4</h4> 1797 <h5 id="h5_in_nav">heading5</h5> 1798 <h6 id="h6_in_nav">heading6</h6> 1799 <hgroup> 1800 <h1 id="h1_in_nav_in_hgroup">heading1</h1> 1801 <h2 id="h2_in_nav_in_hgroup">heading2</h2> 1802 <h3 id="h3_in_nav_in_hgroup">heading3</h3> 1803 <h4 id="h4_in_nav_in_hgroup">heading4</h4> 1804 <h5 id="h5_in_nav_in_hgroup">heading5</h5> 1805 <h6 id="h6_in_nav_in_hgroup">heading6</h6> 1806 </hgroup> 1807 </nav> 1808 <section> 1809 <header id="header_in_section">Not logo</header> 1810 <h1 id="h1_in_section">heading1</h1> 1811 <h2 id="h2_in_section">heading2</h2> 1812 <h3 id="h3_in_section">heading3</h3> 1813 <h4 id="h4_in_section">heading4</h4> 1814 <h5 id="h5_in_section">heading5</h5> 1815 <h6 id="h6_in_section">heading6</h6> 1816 <hgroup> 1817 <h1 id="h1_in_section_in_hgroup">heading1</h1> 1818 <h2 id="h2_in_section_in_hgroup">heading2</h2> 1819 <h3 id="h3_in_section_in_hgroup">heading3</h3> 1820 <h4 id="h4_in_section_in_hgroup">heading4</h4> 1821 <h5 id="h5_in_section_in_hgroup">heading5</h5> 1822 <h6 id="h6_in_section_in_hgroup">heading6</h6> 1823 </hgroup> 1824 </section> 1825 <blockquote> 1826 <header id="header_in_blockquote">Not logo</header> 1827 </blockquote> 1828 <details open="true"> 1829 <header id="header_in_details">Not logo</header> 1830 </details> 1831 <dialog open="true"> 1832 <header id="header_in_dialog">Not logo</header> 1833 </dialog> 1834 <fieldset> 1835 <header id="header_in_fieldset">Not logo</header> 1836 </fieldset> 1837 <figure> 1838 <header id="header_in_figure">Not logo</header> 1839 </figure> 1840 <table><tr><td> 1841 <header id="header_in_td">Not logo</header> 1842 </td></tr></table> 1843 1844 <hr id="hr"> 1845 <p id="i_container">normal<i>italic</i></p> 1846 <img id="img" src="../moz.png"> 1847 1848 <input id="input_button" type="button" value="Button"> 1849 <input id="input_checkbox" type="checkbox"> 1850 <input id="input_checkbox_true" type="checkbox" checked> 1851 <input id="input_file" type="file"> 1852 <input id="input_image" type="image"> 1853 <input id="input_image_display" type="image" style="display: block"> 1854 <form> 1855 <input id="input_image_default" type="image"> 1856 </form> 1857 <input id="input_submit" type="submit"> 1858 <form> 1859 <input id="input_submit_default" type="submit"> 1860 </form> 1861 <input id="input_number" type="number" value="44"> 1862 <input id="input_text" type="text" value="hi"> 1863 <form> 1864 <label for="input_placeholder_same">Your name</label> 1865 <input id="input_placeholder_same" placeholder="Your name"/> 1866 <label for="input_placeholder_different">First name:</label> 1867 <input id="input_placeholder_different" placeholder="Enter your first name"/> 1868 <input id="input_placeholder_only" placeholder="Date of birth"/> 1869 </form> 1870 <input id="input_search" type="search" value="cats"> 1871 <input id="input_email" type="email" value="me@mozilla.com"> 1872 <input id="input_tel" type="tel" value="111.111.1111"> 1873 <input id="input_url" type="url" value="www.mozilla.com"> 1874 <input id="input_password" type="password" value="44"> 1875 <input id="input_password_readonly" type="password" value="44" readonly> 1876 <input id="input_radio" type="radio"> 1877 <input id="input_radio_true" type="radio" checked> 1878 <input id="input_range" type="range"> 1879 <form> 1880 <input id="input_reset" type="reset"> 1881 </form> 1882 <label>time label 1883 <input id="input_time" type="time" value="23:23"> 1884 </label> 1885 <label>date label 1886 <input id="input_date" type="date" value="2017-11-10"> 1887 </label> 1888 <label>datetime-local label 1889 <input id="input_datetime_local" type="datetime-local" value="2017-11-10T23:23"> 1890 </label> 1891 1892 <p id="ins_container">normal<ins>Inserted</ins></p> 1893 <p id="kbd_container">normal<kbd>cmd</kbd></p> 1894 1895 <label id="label">label<input id="label_input"></label> 1896 <label id="label_for" for="label_for_input">label</label> 1897 <input id="label_for_input"> 1898 1899 <ul id="ul"> 1900 <li>item1</li> 1901 </ul> 1902 <ol id="ol"> 1903 <li>item1</li> 1904 </ol> 1905 1906 <main id="main">main</main> 1907 1908 <map id="map_imagemap" name="atoz_map"> 1909 <area href="http://www.bbc.co.uk/radio4/atoz/index.shtml#b" 1910 coords="17,0,30,14" alt="b" shape="rect"> 1911 <area href="http://www.bbc.co.uk/radio4/atoz/index.shtml#a" 1912 coords="0,0,13,14" alt="a" shape="rect"> 1913 </map> 1914 <img id="imgmap" width="447" height="15" 1915 usemap="#atoz_map" 1916 src="../letters.gif"> 1917 1918 <map id="map" title="Navigation Bar" name="mapgroup"> 1919 <p> 1920 [<a href="#how">Bypass navigation bar</a>] 1921 [<a href="home.html">Home</a>] 1922 </p> 1923 </map> 1924 1925 <p id="mark_container">normal<mark>highlighted</mark></p> 1926 1927 <math id="math"> 1928 <mrow> 1929 <mrow> 1930 <msup> 1931 <mi>a</mi> 1932 <mn>2</mn> 1933 </msup> 1934 <mo>+</mo> 1935 <msup> 1936 <mi>b</mi> 1937 <mn>2</mn> 1938 </msup> 1939 </mrow> 1940 <mo>=</mo> 1941 <msup> 1942 <mi>c</mi> 1943 <mn>2</mn> 1944 </msup> 1945 </mrow> 1946 </math> 1947 1948 <menu id="menu"> 1949 <li>Home</li> 1950 <li>About 1951 <menu> 1952 <li>Our Story</li> 1953 </menu> 1954 </li> 1955 </menu> 1956 1957 <menu id="menu1"> 1958 <li> 1959 <button>File</button> 1960 <menu> 1961 <li> 1962 <button type="button" onclick="new()">New...</button> 1963 </li> 1964 </menu> 1965 </li> 1966 </menu> 1967 1968 <meter id="meter" min="0" max="1000" low="300" high="700" value="200">200 Euro</meter> 1969 1970 <nav id="nav"> 1971 <ul> 1972 <li><a href="#">Home</a></li> 1973 <li><a href="#">About</a></li> 1974 <li><a href="#">Contact</a></li> 1975 </ul> 1976 </nav> 1977 1978 <object id="object_png" type="image/png" data="../moz.png" 1979 width="300" height="300"> 1980 </object> 1981 <object id="object_html" type="text/html" data="../longdesc_src.html" 1982 width="300" height="300"> 1983 </object> 1984 <object id="object_pdf" type="application/pdf" data="../dummy.pdf" 1985 width="300" height="300"> 1986 </object> 1987 1988 <select id="select_listbox" size="4"> 1989 <optgroup label="Colors"> 1990 <option>Red</option> 1991 <option>Blue</option> 1992 </optgroup> 1993 <option>Animal</option> 1994 </select> 1995 1996 <select id="select_listbox_multiselectable" multiple> 1997 <option>Red</option> 1998 <option>Blue</option> 1999 <option>Green</option> 2000 </select> 2001 2002 <select id="select_combobox"> 2003 <option>Red</option> 2004 <option>Blue</option> 2005 <option>Green</option> 2006 </select> 2007 2008 <input id="output_input"> 2009 <output id="output" for="output_input"></output> 2010 2011 <pre id="pre">pre</pre> 2012 2013 <progress id="progress" min="0" value="21" max="42"></progress> 2014 <progress id="progress_indeterminate"></progress> 2015 2016 <q id="q" cite="http://en.wikipedia.org/wiki/Kenny_McCormick#Cultural_impact"> 2017 Oh my God, they killed Kenny! 2018 </q> 2019 2020 <ruby id="ruby"> 2021 漢 <rp>(</rp><rt>Kan</rt><rp>)</rp> 2022 字 <rp>(</rp><rt>ji</rt><rp>)</rp> 2023 </ruby> 2024 2025 <p id="s_container">normal<s>Removed</s></p> 2026 <p id="samp_container">normal<samp>sample</samp></p> 2027 <search id="search">search</search> 2028 <section id="section">section</section> 2029 <section id="named_section" aria-label="foo">named section</section> 2030 <p id="small_container">normal<small>small</small></p> 2031 <span id="span"></span> 2032 <span id="span_explicit" title="explicit"></span> 2033 <p id="strong_container">normal<strong>strong</strong></p> 2034 <sub id="sub"></sub> 2035 <sup id="sup"></sup> 2036 <p id="sub_container">normal<sub>sub</sub></p> 2037 <p id="sup_container">normal<sup>sup</sup></p> 2038 2039 <svg id="svg"></svg> 2040 <textarea id="textarea"></textarea> 2041 2042 <p>The concert took place on <time id="time" datetime="2001-05-15 19:00">May 15</time></p> 2043 <p id="u_container">normal<u>underline</u></p> 2044 <p id="var_container">An equation: <var>x</var> = <var>y</var></p> 2045 2046 <video id="video" controls="true"> 2047 <source id="source" src="../bug461281.ogg" type="video/ogg"> 2048 </video> 2049 2050 </video> 2051 </body> 2052 </html>