The Tor Browser: accessible/tests/mochitest/attributes/test_obj

Incorporate requested changes from Mozilla in review:
https://bugzilla.mozilla.org/show_bug.cgi?id=1123480#c6

     1 <html>

     3 <head>

     4   <title>Group attributes tests</title>

     5   <link rel="stylesheet" type="text/css"

     6         href="chrome://mochikit/content/tests/SimpleTest/test.css" />

     8   <script type="application/javascript"

     9           src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>

    11   <script type="application/javascript"

    12           src="../common.js"></script>

    13   <script type="application/javascript"

    14           src="../attributes.js"></script>

    15   <script type="application/javascript"

    16           src="../events.js"></script>

    18   <script type="application/javascript">

    19     function doTest()

    20     {

    21       //////////////////////////////////////////////////////////////////////////

    22       // HTML select with no size attribute.

    23       testGroupAttrs("opt1-nosize", 1, 4);

    24       testGroupAttrs("opt2-nosize", 2, 4);

    25       testGroupAttrs("opt3-nosize", 3, 4);

    26       testGroupAttrs("opt4-nosize", 4, 4);

    28       //////////////////////////////////////////////////////////////////////////

    29       // HTML select

    30       testGroupAttrs("opt1", 1, 2);

    31       testGroupAttrs("opt2", 2, 2);

    33       //////////////////////////////////////////////////////////////////////////

    34       // HTML select with options

    35       // XXX bug 469123

    36       //testGroupAttrs("select2_optgroup", 1, 3, 1);

    37       //testGroupAttrs("select2_opt3", 2, 3, 1);

    38       //testGroupAttrs("select2_opt4", 3, 3, 1);

    39       //testGroupAttrs("select2_opt1", 1, 2, 2);

    40       //testGroupAttrs("select2_opt2", 2, 2, 2);

    42       //////////////////////////////////////////////////////////////////////////

    43       // HTML input@type="radio" within form

    44       testGroupAttrs("radio1", 1, 2);

    45       testGroupAttrs("radio2", 2, 2);

    47       //////////////////////////////////////////////////////////////////////////

    48       // HTML input@type="radio" within document

    49       testGroupAttrs("radio3", 1, 2);

    50       testGroupAttrs("radio4", 2, 2);

    52       //////////////////////////////////////////////////////////////////////////

    53       // Hidden HTML input@type="radio"

    54       testGroupAttrs("radio5", 1, 1);

    56       //////////////////////////////////////////////////////////////////////////

    57       // HTML ul/ol

    58       testGroupAttrs("li1", 1, 3);

    59       testGroupAttrs("li2", 2, 3);

    60       testGroupAttrs("li3", 3, 3);

    62       //////////////////////////////////////////////////////////////////////////

    63       // HTML ul/ol (nested lists)

    65       testGroupAttrs("li4", 1, 3, 1);

    66       testGroupAttrs("li5", 2, 3, 1);

    67       testGroupAttrs("li6", 3, 3, 1);

    69       testGroupAttrs("n_li4", 1, 3, 2);

    70       testGroupAttrs("n_li5", 2, 3, 2);

    71       testGroupAttrs("n_li6", 3, 3, 2);

    73       //////////////////////////////////////////////////////////////////////////

    74       // ARIA list

    75       testGroupAttrs("li7", 1, 3);

    76       testGroupAttrs("li8", 2, 3);

    77       testGroupAttrs("li9", 3, 3);

    79       //////////////////////////////////////////////////////////////////////////

    80       // ARIA list (nested lists: list -> listitem -> list -> listitem)

    81       testGroupAttrs("li10", 1, 3, 1);

    82       testGroupAttrs("li11", 2, 3, 1);

    83       testGroupAttrs("li12", 3, 3, 1);

    85       testGroupAttrs("n_li10", 1, 3, 2);

    86       testGroupAttrs("n_li11", 2, 3, 2);

    87       testGroupAttrs("n_li12", 3, 3, 2);

    89       //////////////////////////////////////////////////////////////////////////

    90       // ARIA list (nested lists: list -> listitem -> group -> listitem)

    91       testGroupAttrs("lgt_li1", 1, 2, 1);

    92       testGroupAttrs("lgt_li1_nli1", 1, 2, 2);

    93       testGroupAttrs("lgt_li1_nli2", 2, 2, 2);

    94       testGroupAttrs("lgt_li2", 2, 2, 1);

    95       testGroupAttrs("lgt_li2_nli1", 1, 2, 2);

    96       testGroupAttrs("lgt_li2_nli2", 2, 2, 2);

    98       //////////////////////////////////////////////////////////////////////////

    99       // ARIA menu (menuitem, separator, menuitemradio and menuitemcheckbox)

   100       testGroupAttrs("menu_item1", 1, 2);

   101       testGroupAttrs("menu_item2", 2, 2);

   102       testGroupAttrs("menu_item1.1", 1, 2);

   103       testGroupAttrs("menu_item1.2", 2, 2);

   104       testGroupAttrs("menu_item1.3", 1, 3);

   105       testGroupAttrs("menu_item1.4", 2, 3);

   106       testGroupAttrs("menu_item1.5", 3, 3);

   108       //////////////////////////////////////////////////////////////////////////

   109       // ARIA tab

   110       testGroupAttrs("tab_1", 1, 3);

   111       testGroupAttrs("tab_2", 2, 3);

   112       testGroupAttrs("tab_3", 3, 3);

   114       //////////////////////////////////////////////////////////////////////////

   115       // ARIA radio

   116       testGroupAttrs("r1", 1, 3);

   117       testGroupAttrs("r2", 2, 3);

   118       testGroupAttrs("r3", 3, 3);

   120       //////////////////////////////////////////////////////////////////////////

   121       // ARIA tree

   122       testGroupAttrs("ti1", 1, 3, 1);

   123       testGroupAttrs("ti2", 1, 2, 2);

   124       testGroupAttrs("ti3", 2, 2, 2);

   125       testGroupAttrs("ti4", 2, 3, 1);

   126       testGroupAttrs("ti5", 1, 3, 2);

   127       testGroupAttrs("ti6", 2, 3, 2);

   128       testGroupAttrs("ti7", 3, 3, 2);

   129       testGroupAttrs("ti8", 3, 3, 1);

   131       //////////////////////////////////////////////////////////////////////////

   132       // ARIA tree (tree -> treeitem -> group -> treeitem)

   133       testGroupAttrs("tree2_ti1", 1, 2, 1);

   134       testGroupAttrs("tree2_ti1a", 1, 2, 2);

   135       testGroupAttrs("tree2_ti1b", 2, 2, 2);

   136       testGroupAttrs("tree2_ti2", 2, 2, 1);

   137       testGroupAttrs("tree2_ti2a", 1, 2, 2);

   138       testGroupAttrs("tree2_ti2b", 2, 2, 2);

   140       //////////////////////////////////////////////////////////////////////////

   141       // ARIA tree (tree -> treeitem, group -> treeitem)

   142       testGroupAttrs("tree3_ti1", 1, 2, 1);

   143       testGroupAttrs("tree3_ti1a", 1, 2, 2);

   144       testGroupAttrs("tree3_ti1b", 2, 2, 2);

   145       testGroupAttrs("tree3_ti2", 2, 2, 1);

   146       testGroupAttrs("tree3_ti2a", 1, 2, 2);

   147       testGroupAttrs("tree3_ti2b", 2, 2, 2);

   149       //////////////////////////////////////////////////////////////////////////

   150       // ARIA grid

   151       testGroupAttrs("grid_row1", 1, 2);

   152       testAbsentAttrs("grid_cell1", {"posinset":"", "setsize":""});

   153       testAbsentAttrs("grid_cell2", {"posinset":"", "setsize":""});

   155       testGroupAttrs("grid_row2", 2, 2);

   156       testAbsentAttrs("grid_cell3", {"posinset":"", "setsize":""});

   157       testAbsentAttrs("grid_cell4", {"posinset":"", "setsize":""});

   159       //////////////////////////////////////////////////////////////////////////

   160       // ARIA treegrid

   161       testGroupAttrs("treegrid_row1", 1, 2, 1);

   162       testAbsentAttrs("treegrid_cell1", {"posinset":"", "setsize":""});

   163       testAbsentAttrs("treegrid_cell2", {"posinset":"", "setsize":""});

   165       testGroupAttrs("treegrid_row2", 1, 1, 2);

   166       testAbsentAttrs("treegrid_cell3", {"posinset":"", "setsize":""});

   167       testAbsentAttrs("treegrid_cell4", {"posinset":"", "setsize":""});

   169       testGroupAttrs("treegrid_row3", 2, 2, 1);

   170       testAbsentAttrs("treegrid_cell5", {"posinset":"", "setsize":""});

   171       testAbsentAttrs("treegrid_cell6", {"posinset":"", "setsize":""});

   173       //////////////////////////////////////////////////////////////////////////

   174       // HTML headings

   175       testGroupAttrs("h1", 0, 0, 1);

   176       testGroupAttrs("h2", 0, 0, 2);

   177       testGroupAttrs("h3", 0, 0, 3);

   178       testGroupAttrs("h4", 0, 0, 4);

   179       testGroupAttrs("h5", 0, 0, 5);

   180       testGroupAttrs("h6", 0, 0, 6);

   182       //////////////////////////////////////////////////////////////////////////

   183       // ARIA combobox

   184       testGroupAttrs("combo1_opt1", 1, 4);

   185       testGroupAttrs("combo1_opt2", 2, 4);

   186       testGroupAttrs("combo1_opt3", 3, 4);

   187       testGroupAttrs("combo1_opt4", 4, 4);

   189       // Test that group position information updates after deleting node.

   190       testGroupAttrs("tree4_ti1", 1, 2, 1);

   191       testGroupAttrs("tree4_ti2", 2, 2, 1);

   192       var tree4element = document.getElementById("tree4_ti1");

   193       var tree4acc = getAccessible("tree4");

   194       tree4element.parentNode.removeChild(tree4element);

   195       waitForEvent(EVENT_REORDER, tree4acc, function() {

   196         testGroupAttrs("tree4_ti2", 1, 1, 1); });

   198       SimpleTest.finish();

   199     }

   201     SimpleTest.waitForExplicitFinish();

   202     addA11yLoadEvent(doTest);

   203   </script>

   204 </head>

   205 <body>

   207   <a target="_blank"

   208      href="https://bugzilla.mozilla.org/show_bug.cgi?id=468418"

   209      title="Expose level for nested lists in HTML">

   210     Mozilla Bug 468418

   211   </a>

   212   <a target="_blank"

   213      href="https://bugzilla.mozilla.org/show_bug.cgi?id=844023"

   214      title="group info might not be properly updated when flat trees mutate">

   215     Bug 844023

   216   </a>

   217   <a target="_blank"

   218      href="https://bugzilla.mozilla.org/show_bug.cgi?id=864224"

   219      title="Support nested ARIA listitems structured by role='group'">

   220     Bug 864224

   221   </a>

   222   <a target="_blank"

   223      href="https://bugzilla.mozilla.org/show_bug.cgi?id=907682"

   224      title=" HTML:option group position is not correct when select is collapsed">

   225     Mozilla Bug 907682

   226   </a>

   228   <p id="display"></p>

   229   <div id="content" style="display: none"></div>

   230   <pre id="test">

   231   </pre>

   233   <select>

   234     <option id="opt1-nosize">option1</option>

   235     <option id="opt2-nosize">option2</option>

   236     <option id="opt3-nosize">option3</option>

   237     <option id="opt4-nosize">option4</option>

   238   </select>

   240   <select size="4">

   241     <option id="opt1">option1</option>

   242     <option id="opt2">option2</option>

   243   </select>

   245   <select size="4">

   246     <optgroup id="select2_optgroup" label="group">

   247       <option id="select2_opt1">option1</option>

   248       <option id="select2_opt2">option2</option>

   249     </optgroup>

   250     <option id="select2_opt3">option3</option>

   251     <option id="select2_opt4">option4</option>

   252   </select>

   254   <form>

   255     <input type="radio" id="radio1" name="group1"/>

   256     <input type="radio" id="radio2" name="group1"/>

   257   </form>

   259   <input type="radio" id="radio3" name="group2"/>

   260   <input type="radio" id="radio4" name="group2"/>

   262   <ul>

   263     <li id="li1">Oranges</li>

   264     <li id="li2">Apples</li>

   265     <li id="li3">Bananas</li>

   266   </ul>

   268   <ol>

   269     <li id="li4">Oranges</li>

   270     <li id="li5">Apples</li>

   271     <li id="li6">Bananas

   272       <ul>

   273         <li id="n_li4">Oranges</li>

   274         <li id="n_li5">Apples</li>

   275         <li id="n_li6">Bananas</li>

   276       </ul>

   277     </li>

   278   </ol>

   280   <span role="list">

   281     <span role="listitem" id="li7">Oranges</span>

   282     <span role="listitem" id="li8">Apples</span>

   283     <span role="listitem" id="li9">Bananas</span>

   284   </span>

   286   <span role="list">

   287     <span role="listitem" id="li10">Oranges</span>

   288     <span role="listitem" id="li11">Apples</span>

   289     <span role="listitem" id="li12">Bananas

   290       <span role="list">

   291         <span role="listitem" id="n_li10">Oranges</span>

   292         <span role="listitem" id="n_li11">Apples</span>

   293         <span role="listitem" id="n_li12">Bananas</span>

   294       </span>

   295     </span>

   296   </span>

   298   <div role="list">

   299     <div role="listitem" id="lgt_li1">Item 1

   300       <div role="group">

   301         <div role="listitem" id="lgt_li1_nli1">Item 1A</div>

   302         <div role="listitem" id="lgt_li1_nli2">Item 1B</div>

   303       </div>

   304     </div>

   305     <div role="listitem" id="lgt_li2">Item 2

   306       <div role="group">

   307         <div role="listitem" id="lgt_li2_nli1">Item 2A</div>

   308         <div role="listitem" id="lgt_li2_nli2">Item 2B</div>

   309       </div>

   310     </div>

   311   </div>

   313   <ul role="menubar">

   314     <li role="menuitem" aria-haspopup="true" id="menu_item1">File

   315       <ul role="menu">

   316         <li role="menuitem" id="menu_item1.1">New</li>

   317         <li role="menuitem" id="menu_item1.2">Open…</li>

   318         <li role="separator">-----</li>

   319         <li role="menuitem" id="menu_item1.3">Item</li>

   320         <li role="menuitemradio" id="menu_item1.4">Radio</li>

   321         <li role="menuitemcheckbox" id="menu_item1.5">Checkbox</li>

   322       </ul>

   323     </li>

   324     <li role="menuitem" aria-haspopup="false" id="menu_item2">Help</li>

   325   </ul>

   327   <ul id="tablist_1" role="tablist">

   328     <li id="tab_1" role="tab">Crust</li>

   329     <li id="tab_2" role="tab">Veges</li>

   330     <li id="tab_3" role="tab">Carnivore</li>

   331   </ul>

   333   <ul id="rg1" role="radiogroup">

   334     <li id="r1" role="radio" aria-checked="false">Thai</li>

   335     <li id="r2" role="radio" aria-checked="false">Subway</li>

   336     <li id="r3" role="radio" aria-checked="false">Jimmy Johns</li>

   337   </ul>

   339   <table role="tree">

   340     <tr role="presentation">

   341       <td role="treeitem" aria-expanded="true" aria-level="1"

   342           id="ti1">vegetables</td>

   343     </tr>

   344     <tr role="presentation">

   345       <td role="treeitem" aria-level="2" id="ti2">cucumber</td>

   346     </tr>

   347     <tr role="presentation">

   348       <td role="treeitem" aria-level="2" id="ti3">carrot</td>

   349     </tr>

   350     <tr role="presentation">

   351       <td role="treeitem" aria-expanded="false" aria-level="1"

   352           id="ti4">cars</td>

   353     </tr>

   354     <tr role="presentation">

   355       <td role="treeitem" aria-level="2" id="ti5">mercedes</td>

   356     </tr>

   357     <tr role="presentation">

   358       <td role="treeitem" aria-level="2" id="ti6">BMW</td>

   359     </tr>

   360     <tr role="presentation">

   361       <td role="treeitem" aria-level="2" id="ti7">Audi</td>

   362     </tr>

   363     <tr role="presentation">

   364       <td role="treeitem" aria-level="1" id="ti8">people</td>

   365     </tr>

   366   </table>

   368   <ul role="tree">

   369     <li role="treeitem" id="tree2_ti1">Item 1

   370       <ul role="group">

   371         <li role="treeitem" id="tree2_ti1a">Item 1A</li>

   372         <li role="treeitem" id="tree2_ti1b">Item 1B</li>

   373       </ul>

   374     </li>

   375     <li role="treeitem" id="tree2_ti2">Item 2

   376       <ul role="group">

   377         <li role="treeitem" id="tree2_ti2a">Item 2A</li>

   378         <li role="treeitem" id="tree2_ti2b">Item 2B</li>

   379       </ul>

   380     </li>

   381   </div>

   383   <div role="tree">

   384     <div role="treeitem" id="tree3_ti1">Item 1</div>

   385     <div role="group">

   386       <li role="treeitem" id="tree3_ti1a">Item 1A</li>

   387       <li role="treeitem" id="tree3_ti1b">Item 1B</li>

   388     </div>

   389     <div role="treeitem" id="tree3_ti2">Item 2</div>

   390     <div role="group">

   391       <div role="treeitem" id="tree3_ti2a">Item 2A</div>

   392       <div role="treeitem" id="tree3_ti2b">Item 2B</div>

   393     </div>

   394   </div>

   396   <!-- IMPORTANT: Need to have no whitespace between elements in this tree. -->

   397   <div role="tree" id="tree4"><div role="treeitem"

   398     id="tree4_ti1">Item 1</div><div role="treeitem"

   399     id="tree4_ti2">Item 2</div></div>

   401   <table role="grid">

   402     <tr role="row" id="grid_row1">

   403       <td role="gridcell" id="grid_cell1">cell1</td>

   404       <td role="gridcell" id="grid_cell2">cell2</td>

   405     </tr>

   406     <tr role="row" id="grid_row2">

   407       <td role="gridcell" id="grid_cell3">cell3</td>

   408       <td role="gridcell" id="grid_cell4">cell4</td>

   409     </tr>

   410   </table>

   412   <div role="treegrid">

   413     <div role="row" aria-level="1" id="treegrid_row1">

   414       <div role="gridcell" id="treegrid_cell1">cell1</div>

   415       <div role="gridcell" id="treegrid_cell2">cell2</div>

   416     </div>

   417     <div role="row" aria-level="2" id="treegrid_row2">

   418       <div role="gridcell" id="treegrid_cell3">cell1</div>

   419       <div role="gridcell" id="treegrid_cell4">cell2</div>

   420     </div>

   421     <div role="row" id="treegrid_row3">

   422       <div role="gridcell" id="treegrid_cell5">cell1</div>

   423       <div role="gridcell" id="treegrid_cell6">cell2</div>

   424     </div>

   425   </div>

   427   <h1 id="h1">heading1</h1>

   428   <h2 id="h2">heading2</h2>

   429   <h3 id="h3">heading3</h3>

   430   <h4 id="h4">heading4</h4>

   431   <h5 id="h5">heading5</h5>

   432   <h6 id="h6">heading6</h6>

   434   <ul id="combo1" role="combobox">Password

   435     <li id="combo1_opt1" role="option">Xyzzy</li>

   436     <li id="combo1_opt2" role="option">Plughs</li>

   437     <li id="combo1_opt3" role="option">Shazaam</li>

   438     <li id="combo1_opt4" role="option">JoeSentMe</li>

   439   </ul>

   441   <form>

   442     <input type="radio" style="display: none;" name="group3">

   443     <input type="radio" id="radio5" name="group3">

   444   </form>

   445 </body>

   446 </html>

The Tor Browser / file revision

accessible/tests/mochitest/attributes/test_obj_group.html@b8a032363ba2

accessible/tests/mochitest/attributes/test_obj_group.html