1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/accessible/tests/mochitest/attributes/test_obj_group.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,446 @@
1.4 +<html>
1.5 +
1.6 +<head>
1.7 + <title>Group attributes tests</title>
1.8 + <link rel="stylesheet" type="text/css"
1.9 + href="chrome://mochikit/content/tests/SimpleTest/test.css" />
1.10 +
1.11 + <script type="application/javascript"
1.12 + src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
1.13 +
1.14 + <script type="application/javascript"
1.15 + src="../common.js"></script>
1.16 + <script type="application/javascript"
1.17 + src="../attributes.js"></script>
1.18 + <script type="application/javascript"
1.19 + src="../events.js"></script>
1.20 +
1.21 + <script type="application/javascript">
1.22 + function doTest()
1.23 + {
1.24 + //////////////////////////////////////////////////////////////////////////
1.25 + // HTML select with no size attribute.
1.26 + testGroupAttrs("opt1-nosize", 1, 4);
1.27 + testGroupAttrs("opt2-nosize", 2, 4);
1.28 + testGroupAttrs("opt3-nosize", 3, 4);
1.29 + testGroupAttrs("opt4-nosize", 4, 4);
1.30 +
1.31 + //////////////////////////////////////////////////////////////////////////
1.32 + // HTML select
1.33 + testGroupAttrs("opt1", 1, 2);
1.34 + testGroupAttrs("opt2", 2, 2);
1.35 +
1.36 + //////////////////////////////////////////////////////////////////////////
1.37 + // HTML select with options
1.38 + // XXX bug 469123
1.39 + //testGroupAttrs("select2_optgroup", 1, 3, 1);
1.40 + //testGroupAttrs("select2_opt3", 2, 3, 1);
1.41 + //testGroupAttrs("select2_opt4", 3, 3, 1);
1.42 + //testGroupAttrs("select2_opt1", 1, 2, 2);
1.43 + //testGroupAttrs("select2_opt2", 2, 2, 2);
1.44 +
1.45 + //////////////////////////////////////////////////////////////////////////
1.46 + // HTML input@type="radio" within form
1.47 + testGroupAttrs("radio1", 1, 2);
1.48 + testGroupAttrs("radio2", 2, 2);
1.49 +
1.50 + //////////////////////////////////////////////////////////////////////////
1.51 + // HTML input@type="radio" within document
1.52 + testGroupAttrs("radio3", 1, 2);
1.53 + testGroupAttrs("radio4", 2, 2);
1.54 +
1.55 + //////////////////////////////////////////////////////////////////////////
1.56 + // Hidden HTML input@type="radio"
1.57 + testGroupAttrs("radio5", 1, 1);
1.58 +
1.59 + //////////////////////////////////////////////////////////////////////////
1.60 + // HTML ul/ol
1.61 + testGroupAttrs("li1", 1, 3);
1.62 + testGroupAttrs("li2", 2, 3);
1.63 + testGroupAttrs("li3", 3, 3);
1.64 +
1.65 + //////////////////////////////////////////////////////////////////////////
1.66 + // HTML ul/ol (nested lists)
1.67 +
1.68 + testGroupAttrs("li4", 1, 3, 1);
1.69 + testGroupAttrs("li5", 2, 3, 1);
1.70 + testGroupAttrs("li6", 3, 3, 1);
1.71 +
1.72 + testGroupAttrs("n_li4", 1, 3, 2);
1.73 + testGroupAttrs("n_li5", 2, 3, 2);
1.74 + testGroupAttrs("n_li6", 3, 3, 2);
1.75 +
1.76 + //////////////////////////////////////////////////////////////////////////
1.77 + // ARIA list
1.78 + testGroupAttrs("li7", 1, 3);
1.79 + testGroupAttrs("li8", 2, 3);
1.80 + testGroupAttrs("li9", 3, 3);
1.81 +
1.82 + //////////////////////////////////////////////////////////////////////////
1.83 + // ARIA list (nested lists: list -> listitem -> list -> listitem)
1.84 + testGroupAttrs("li10", 1, 3, 1);
1.85 + testGroupAttrs("li11", 2, 3, 1);
1.86 + testGroupAttrs("li12", 3, 3, 1);
1.87 +
1.88 + testGroupAttrs("n_li10", 1, 3, 2);
1.89 + testGroupAttrs("n_li11", 2, 3, 2);
1.90 + testGroupAttrs("n_li12", 3, 3, 2);
1.91 +
1.92 + //////////////////////////////////////////////////////////////////////////
1.93 + // ARIA list (nested lists: list -> listitem -> group -> listitem)
1.94 + testGroupAttrs("lgt_li1", 1, 2, 1);
1.95 + testGroupAttrs("lgt_li1_nli1", 1, 2, 2);
1.96 + testGroupAttrs("lgt_li1_nli2", 2, 2, 2);
1.97 + testGroupAttrs("lgt_li2", 2, 2, 1);
1.98 + testGroupAttrs("lgt_li2_nli1", 1, 2, 2);
1.99 + testGroupAttrs("lgt_li2_nli2", 2, 2, 2);
1.100 +
1.101 + //////////////////////////////////////////////////////////////////////////
1.102 + // ARIA menu (menuitem, separator, menuitemradio and menuitemcheckbox)
1.103 + testGroupAttrs("menu_item1", 1, 2);
1.104 + testGroupAttrs("menu_item2", 2, 2);
1.105 + testGroupAttrs("menu_item1.1", 1, 2);
1.106 + testGroupAttrs("menu_item1.2", 2, 2);
1.107 + testGroupAttrs("menu_item1.3", 1, 3);
1.108 + testGroupAttrs("menu_item1.4", 2, 3);
1.109 + testGroupAttrs("menu_item1.5", 3, 3);
1.110 +
1.111 + //////////////////////////////////////////////////////////////////////////
1.112 + // ARIA tab
1.113 + testGroupAttrs("tab_1", 1, 3);
1.114 + testGroupAttrs("tab_2", 2, 3);
1.115 + testGroupAttrs("tab_3", 3, 3);
1.116 +
1.117 + //////////////////////////////////////////////////////////////////////////
1.118 + // ARIA radio
1.119 + testGroupAttrs("r1", 1, 3);
1.120 + testGroupAttrs("r2", 2, 3);
1.121 + testGroupAttrs("r3", 3, 3);
1.122 +
1.123 + //////////////////////////////////////////////////////////////////////////
1.124 + // ARIA tree
1.125 + testGroupAttrs("ti1", 1, 3, 1);
1.126 + testGroupAttrs("ti2", 1, 2, 2);
1.127 + testGroupAttrs("ti3", 2, 2, 2);
1.128 + testGroupAttrs("ti4", 2, 3, 1);
1.129 + testGroupAttrs("ti5", 1, 3, 2);
1.130 + testGroupAttrs("ti6", 2, 3, 2);
1.131 + testGroupAttrs("ti7", 3, 3, 2);
1.132 + testGroupAttrs("ti8", 3, 3, 1);
1.133 +
1.134 + //////////////////////////////////////////////////////////////////////////
1.135 + // ARIA tree (tree -> treeitem -> group -> treeitem)
1.136 + testGroupAttrs("tree2_ti1", 1, 2, 1);
1.137 + testGroupAttrs("tree2_ti1a", 1, 2, 2);
1.138 + testGroupAttrs("tree2_ti1b", 2, 2, 2);
1.139 + testGroupAttrs("tree2_ti2", 2, 2, 1);
1.140 + testGroupAttrs("tree2_ti2a", 1, 2, 2);
1.141 + testGroupAttrs("tree2_ti2b", 2, 2, 2);
1.142 +
1.143 + //////////////////////////////////////////////////////////////////////////
1.144 + // ARIA tree (tree -> treeitem, group -> treeitem)
1.145 + testGroupAttrs("tree3_ti1", 1, 2, 1);
1.146 + testGroupAttrs("tree3_ti1a", 1, 2, 2);
1.147 + testGroupAttrs("tree3_ti1b", 2, 2, 2);
1.148 + testGroupAttrs("tree3_ti2", 2, 2, 1);
1.149 + testGroupAttrs("tree3_ti2a", 1, 2, 2);
1.150 + testGroupAttrs("tree3_ti2b", 2, 2, 2);
1.151 +
1.152 + //////////////////////////////////////////////////////////////////////////
1.153 + // ARIA grid
1.154 + testGroupAttrs("grid_row1", 1, 2);
1.155 + testAbsentAttrs("grid_cell1", {"posinset":"", "setsize":""});
1.156 + testAbsentAttrs("grid_cell2", {"posinset":"", "setsize":""});
1.157 +
1.158 + testGroupAttrs("grid_row2", 2, 2);
1.159 + testAbsentAttrs("grid_cell3", {"posinset":"", "setsize":""});
1.160 + testAbsentAttrs("grid_cell4", {"posinset":"", "setsize":""});
1.161 +
1.162 + //////////////////////////////////////////////////////////////////////////
1.163 + // ARIA treegrid
1.164 + testGroupAttrs("treegrid_row1", 1, 2, 1);
1.165 + testAbsentAttrs("treegrid_cell1", {"posinset":"", "setsize":""});
1.166 + testAbsentAttrs("treegrid_cell2", {"posinset":"", "setsize":""});
1.167 +
1.168 + testGroupAttrs("treegrid_row2", 1, 1, 2);
1.169 + testAbsentAttrs("treegrid_cell3", {"posinset":"", "setsize":""});
1.170 + testAbsentAttrs("treegrid_cell4", {"posinset":"", "setsize":""});
1.171 +
1.172 + testGroupAttrs("treegrid_row3", 2, 2, 1);
1.173 + testAbsentAttrs("treegrid_cell5", {"posinset":"", "setsize":""});
1.174 + testAbsentAttrs("treegrid_cell6", {"posinset":"", "setsize":""});
1.175 +
1.176 + //////////////////////////////////////////////////////////////////////////
1.177 + // HTML headings
1.178 + testGroupAttrs("h1", 0, 0, 1);
1.179 + testGroupAttrs("h2", 0, 0, 2);
1.180 + testGroupAttrs("h3", 0, 0, 3);
1.181 + testGroupAttrs("h4", 0, 0, 4);
1.182 + testGroupAttrs("h5", 0, 0, 5);
1.183 + testGroupAttrs("h6", 0, 0, 6);
1.184 +
1.185 + //////////////////////////////////////////////////////////////////////////
1.186 + // ARIA combobox
1.187 + testGroupAttrs("combo1_opt1", 1, 4);
1.188 + testGroupAttrs("combo1_opt2", 2, 4);
1.189 + testGroupAttrs("combo1_opt3", 3, 4);
1.190 + testGroupAttrs("combo1_opt4", 4, 4);
1.191 +
1.192 + // Test that group position information updates after deleting node.
1.193 + testGroupAttrs("tree4_ti1", 1, 2, 1);
1.194 + testGroupAttrs("tree4_ti2", 2, 2, 1);
1.195 + var tree4element = document.getElementById("tree4_ti1");
1.196 + var tree4acc = getAccessible("tree4");
1.197 + tree4element.parentNode.removeChild(tree4element);
1.198 + waitForEvent(EVENT_REORDER, tree4acc, function() {
1.199 + testGroupAttrs("tree4_ti2", 1, 1, 1); });
1.200 +
1.201 + SimpleTest.finish();
1.202 + }
1.203 +
1.204 + SimpleTest.waitForExplicitFinish();
1.205 + addA11yLoadEvent(doTest);
1.206 + </script>
1.207 +</head>
1.208 +<body>
1.209 +
1.210 + <a target="_blank"
1.211 + href="https://bugzilla.mozilla.org/show_bug.cgi?id=468418"
1.212 + title="Expose level for nested lists in HTML">
1.213 + Mozilla Bug 468418
1.214 + </a>
1.215 + <a target="_blank"
1.216 + href="https://bugzilla.mozilla.org/show_bug.cgi?id=844023"
1.217 + title="group info might not be properly updated when flat trees mutate">
1.218 + Bug 844023
1.219 + </a>
1.220 + <a target="_blank"
1.221 + href="https://bugzilla.mozilla.org/show_bug.cgi?id=864224"
1.222 + title="Support nested ARIA listitems structured by role='group'">
1.223 + Bug 864224
1.224 + </a>
1.225 + <a target="_blank"
1.226 + href="https://bugzilla.mozilla.org/show_bug.cgi?id=907682"
1.227 + title=" HTML:option group position is not correct when select is collapsed">
1.228 + Mozilla Bug 907682
1.229 + </a>
1.230 +
1.231 + <p id="display"></p>
1.232 + <div id="content" style="display: none"></div>
1.233 + <pre id="test">
1.234 + </pre>
1.235 +
1.236 + <select>
1.237 + <option id="opt1-nosize">option1</option>
1.238 + <option id="opt2-nosize">option2</option>
1.239 + <option id="opt3-nosize">option3</option>
1.240 + <option id="opt4-nosize">option4</option>
1.241 + </select>
1.242 +
1.243 + <select size="4">
1.244 + <option id="opt1">option1</option>
1.245 + <option id="opt2">option2</option>
1.246 + </select>
1.247 +
1.248 + <select size="4">
1.249 + <optgroup id="select2_optgroup" label="group">
1.250 + <option id="select2_opt1">option1</option>
1.251 + <option id="select2_opt2">option2</option>
1.252 + </optgroup>
1.253 + <option id="select2_opt3">option3</option>
1.254 + <option id="select2_opt4">option4</option>
1.255 + </select>
1.256 +
1.257 + <form>
1.258 + <input type="radio" id="radio1" name="group1"/>
1.259 + <input type="radio" id="radio2" name="group1"/>
1.260 + </form>
1.261 +
1.262 + <input type="radio" id="radio3" name="group2"/>
1.263 + <input type="radio" id="radio4" name="group2"/>
1.264 +
1.265 + <ul>
1.266 + <li id="li1">Oranges</li>
1.267 + <li id="li2">Apples</li>
1.268 + <li id="li3">Bananas</li>
1.269 + </ul>
1.270 +
1.271 + <ol>
1.272 + <li id="li4">Oranges</li>
1.273 + <li id="li5">Apples</li>
1.274 + <li id="li6">Bananas
1.275 + <ul>
1.276 + <li id="n_li4">Oranges</li>
1.277 + <li id="n_li5">Apples</li>
1.278 + <li id="n_li6">Bananas</li>
1.279 + </ul>
1.280 + </li>
1.281 + </ol>
1.282 +
1.283 + <span role="list">
1.284 + <span role="listitem" id="li7">Oranges</span>
1.285 + <span role="listitem" id="li8">Apples</span>
1.286 + <span role="listitem" id="li9">Bananas</span>
1.287 + </span>
1.288 +
1.289 + <span role="list">
1.290 + <span role="listitem" id="li10">Oranges</span>
1.291 + <span role="listitem" id="li11">Apples</span>
1.292 + <span role="listitem" id="li12">Bananas
1.293 + <span role="list">
1.294 + <span role="listitem" id="n_li10">Oranges</span>
1.295 + <span role="listitem" id="n_li11">Apples</span>
1.296 + <span role="listitem" id="n_li12">Bananas</span>
1.297 + </span>
1.298 + </span>
1.299 + </span>
1.300 +
1.301 + <div role="list">
1.302 + <div role="listitem" id="lgt_li1">Item 1
1.303 + <div role="group">
1.304 + <div role="listitem" id="lgt_li1_nli1">Item 1A</div>
1.305 + <div role="listitem" id="lgt_li1_nli2">Item 1B</div>
1.306 + </div>
1.307 + </div>
1.308 + <div role="listitem" id="lgt_li2">Item 2
1.309 + <div role="group">
1.310 + <div role="listitem" id="lgt_li2_nli1">Item 2A</div>
1.311 + <div role="listitem" id="lgt_li2_nli2">Item 2B</div>
1.312 + </div>
1.313 + </div>
1.314 + </div>
1.315 +
1.316 + <ul role="menubar">
1.317 + <li role="menuitem" aria-haspopup="true" id="menu_item1">File
1.318 + <ul role="menu">
1.319 + <li role="menuitem" id="menu_item1.1">New</li>
1.320 + <li role="menuitem" id="menu_item1.2">Open…</li>
1.321 + <li role="separator">-----</li>
1.322 + <li role="menuitem" id="menu_item1.3">Item</li>
1.323 + <li role="menuitemradio" id="menu_item1.4">Radio</li>
1.324 + <li role="menuitemcheckbox" id="menu_item1.5">Checkbox</li>
1.325 + </ul>
1.326 + </li>
1.327 + <li role="menuitem" aria-haspopup="false" id="menu_item2">Help</li>
1.328 + </ul>
1.329 +
1.330 + <ul id="tablist_1" role="tablist">
1.331 + <li id="tab_1" role="tab">Crust</li>
1.332 + <li id="tab_2" role="tab">Veges</li>
1.333 + <li id="tab_3" role="tab">Carnivore</li>
1.334 + </ul>
1.335 +
1.336 + <ul id="rg1" role="radiogroup">
1.337 + <li id="r1" role="radio" aria-checked="false">Thai</li>
1.338 + <li id="r2" role="radio" aria-checked="false">Subway</li>
1.339 + <li id="r3" role="radio" aria-checked="false">Jimmy Johns</li>
1.340 + </ul>
1.341 +
1.342 + <table role="tree">
1.343 + <tr role="presentation">
1.344 + <td role="treeitem" aria-expanded="true" aria-level="1"
1.345 + id="ti1">vegetables</td>
1.346 + </tr>
1.347 + <tr role="presentation">
1.348 + <td role="treeitem" aria-level="2" id="ti2">cucumber</td>
1.349 + </tr>
1.350 + <tr role="presentation">
1.351 + <td role="treeitem" aria-level="2" id="ti3">carrot</td>
1.352 + </tr>
1.353 + <tr role="presentation">
1.354 + <td role="treeitem" aria-expanded="false" aria-level="1"
1.355 + id="ti4">cars</td>
1.356 + </tr>
1.357 + <tr role="presentation">
1.358 + <td role="treeitem" aria-level="2" id="ti5">mercedes</td>
1.359 + </tr>
1.360 + <tr role="presentation">
1.361 + <td role="treeitem" aria-level="2" id="ti6">BMW</td>
1.362 + </tr>
1.363 + <tr role="presentation">
1.364 + <td role="treeitem" aria-level="2" id="ti7">Audi</td>
1.365 + </tr>
1.366 + <tr role="presentation">
1.367 + <td role="treeitem" aria-level="1" id="ti8">people</td>
1.368 + </tr>
1.369 + </table>
1.370 +
1.371 + <ul role="tree">
1.372 + <li role="treeitem" id="tree2_ti1">Item 1
1.373 + <ul role="group">
1.374 + <li role="treeitem" id="tree2_ti1a">Item 1A</li>
1.375 + <li role="treeitem" id="tree2_ti1b">Item 1B</li>
1.376 + </ul>
1.377 + </li>
1.378 + <li role="treeitem" id="tree2_ti2">Item 2
1.379 + <ul role="group">
1.380 + <li role="treeitem" id="tree2_ti2a">Item 2A</li>
1.381 + <li role="treeitem" id="tree2_ti2b">Item 2B</li>
1.382 + </ul>
1.383 + </li>
1.384 + </div>
1.385 +
1.386 + <div role="tree">
1.387 + <div role="treeitem" id="tree3_ti1">Item 1</div>
1.388 + <div role="group">
1.389 + <li role="treeitem" id="tree3_ti1a">Item 1A</li>
1.390 + <li role="treeitem" id="tree3_ti1b">Item 1B</li>
1.391 + </div>
1.392 + <div role="treeitem" id="tree3_ti2">Item 2</div>
1.393 + <div role="group">
1.394 + <div role="treeitem" id="tree3_ti2a">Item 2A</div>
1.395 + <div role="treeitem" id="tree3_ti2b">Item 2B</div>
1.396 + </div>
1.397 + </div>
1.398 +
1.399 + <!-- IMPORTANT: Need to have no whitespace between elements in this tree. -->
1.400 + <div role="tree" id="tree4"><div role="treeitem"
1.401 + id="tree4_ti1">Item 1</div><div role="treeitem"
1.402 + id="tree4_ti2">Item 2</div></div>
1.403 +
1.404 + <table role="grid">
1.405 + <tr role="row" id="grid_row1">
1.406 + <td role="gridcell" id="grid_cell1">cell1</td>
1.407 + <td role="gridcell" id="grid_cell2">cell2</td>
1.408 + </tr>
1.409 + <tr role="row" id="grid_row2">
1.410 + <td role="gridcell" id="grid_cell3">cell3</td>
1.411 + <td role="gridcell" id="grid_cell4">cell4</td>
1.412 + </tr>
1.413 + </table>
1.414 +
1.415 + <div role="treegrid">
1.416 + <div role="row" aria-level="1" id="treegrid_row1">
1.417 + <div role="gridcell" id="treegrid_cell1">cell1</div>
1.418 + <div role="gridcell" id="treegrid_cell2">cell2</div>
1.419 + </div>
1.420 + <div role="row" aria-level="2" id="treegrid_row2">
1.421 + <div role="gridcell" id="treegrid_cell3">cell1</div>
1.422 + <div role="gridcell" id="treegrid_cell4">cell2</div>
1.423 + </div>
1.424 + <div role="row" id="treegrid_row3">
1.425 + <div role="gridcell" id="treegrid_cell5">cell1</div>
1.426 + <div role="gridcell" id="treegrid_cell6">cell2</div>
1.427 + </div>
1.428 + </div>
1.429 +
1.430 + <h1 id="h1">heading1</h1>
1.431 + <h2 id="h2">heading2</h2>
1.432 + <h3 id="h3">heading3</h3>
1.433 + <h4 id="h4">heading4</h4>
1.434 + <h5 id="h5">heading5</h5>
1.435 + <h6 id="h6">heading6</h6>
1.436 +
1.437 + <ul id="combo1" role="combobox">Password
1.438 + <li id="combo1_opt1" role="option">Xyzzy</li>
1.439 + <li id="combo1_opt2" role="option">Plughs</li>
1.440 + <li id="combo1_opt3" role="option">Shazaam</li>
1.441 + <li id="combo1_opt4" role="option">JoeSentMe</li>
1.442 + </ul>
1.443 +
1.444 + <form>
1.445 + <input type="radio" style="display: none;" name="group3">
1.446 + <input type="radio" id="radio5" name="group3">
1.447 + </form>
1.448 +</body>
1.449 +</html>
