accessible/tests/mochitest/attributes/test_obj_group.html

branch
TOR_BUG_9701
changeset 8
97036ab72558
equal deleted inserted replaced
-1:000000000000 0:75cfdd864cef
1 <html>
2
3 <head>
4 <title>Group attributes tests</title>
5 <link rel="stylesheet" type="text/css"
6 href="chrome://mochikit/content/tests/SimpleTest/test.css" />
7
8 <script type="application/javascript"
9 src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
10
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>
17
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);
27
28 //////////////////////////////////////////////////////////////////////////
29 // HTML select
30 testGroupAttrs("opt1", 1, 2);
31 testGroupAttrs("opt2", 2, 2);
32
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);
41
42 //////////////////////////////////////////////////////////////////////////
43 // HTML input@type="radio" within form
44 testGroupAttrs("radio1", 1, 2);
45 testGroupAttrs("radio2", 2, 2);
46
47 //////////////////////////////////////////////////////////////////////////
48 // HTML input@type="radio" within document
49 testGroupAttrs("radio3", 1, 2);
50 testGroupAttrs("radio4", 2, 2);
51
52 //////////////////////////////////////////////////////////////////////////
53 // Hidden HTML input@type="radio"
54 testGroupAttrs("radio5", 1, 1);
55
56 //////////////////////////////////////////////////////////////////////////
57 // HTML ul/ol
58 testGroupAttrs("li1", 1, 3);
59 testGroupAttrs("li2", 2, 3);
60 testGroupAttrs("li3", 3, 3);
61
62 //////////////////////////////////////////////////////////////////////////
63 // HTML ul/ol (nested lists)
64
65 testGroupAttrs("li4", 1, 3, 1);
66 testGroupAttrs("li5", 2, 3, 1);
67 testGroupAttrs("li6", 3, 3, 1);
68
69 testGroupAttrs("n_li4", 1, 3, 2);
70 testGroupAttrs("n_li5", 2, 3, 2);
71 testGroupAttrs("n_li6", 3, 3, 2);
72
73 //////////////////////////////////////////////////////////////////////////
74 // ARIA list
75 testGroupAttrs("li7", 1, 3);
76 testGroupAttrs("li8", 2, 3);
77 testGroupAttrs("li9", 3, 3);
78
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);
84
85 testGroupAttrs("n_li10", 1, 3, 2);
86 testGroupAttrs("n_li11", 2, 3, 2);
87 testGroupAttrs("n_li12", 3, 3, 2);
88
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);
97
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);
107
108 //////////////////////////////////////////////////////////////////////////
109 // ARIA tab
110 testGroupAttrs("tab_1", 1, 3);
111 testGroupAttrs("tab_2", 2, 3);
112 testGroupAttrs("tab_3", 3, 3);
113
114 //////////////////////////////////////////////////////////////////////////
115 // ARIA radio
116 testGroupAttrs("r1", 1, 3);
117 testGroupAttrs("r2", 2, 3);
118 testGroupAttrs("r3", 3, 3);
119
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);
130
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);
139
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);
148
149 //////////////////////////////////////////////////////////////////////////
150 // ARIA grid
151 testGroupAttrs("grid_row1", 1, 2);
152 testAbsentAttrs("grid_cell1", {"posinset":"", "setsize":""});
153 testAbsentAttrs("grid_cell2", {"posinset":"", "setsize":""});
154
155 testGroupAttrs("grid_row2", 2, 2);
156 testAbsentAttrs("grid_cell3", {"posinset":"", "setsize":""});
157 testAbsentAttrs("grid_cell4", {"posinset":"", "setsize":""});
158
159 //////////////////////////////////////////////////////////////////////////
160 // ARIA treegrid
161 testGroupAttrs("treegrid_row1", 1, 2, 1);
162 testAbsentAttrs("treegrid_cell1", {"posinset":"", "setsize":""});
163 testAbsentAttrs("treegrid_cell2", {"posinset":"", "setsize":""});
164
165 testGroupAttrs("treegrid_row2", 1, 1, 2);
166 testAbsentAttrs("treegrid_cell3", {"posinset":"", "setsize":""});
167 testAbsentAttrs("treegrid_cell4", {"posinset":"", "setsize":""});
168
169 testGroupAttrs("treegrid_row3", 2, 2, 1);
170 testAbsentAttrs("treegrid_cell5", {"posinset":"", "setsize":""});
171 testAbsentAttrs("treegrid_cell6", {"posinset":"", "setsize":""});
172
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);
181
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);
188
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); });
197
198 SimpleTest.finish();
199 }
200
201 SimpleTest.waitForExplicitFinish();
202 addA11yLoadEvent(doTest);
203 </script>
204 </head>
205 <body>
206
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>
227
228 <p id="display"></p>
229 <div id="content" style="display: none"></div>
230 <pre id="test">
231 </pre>
232
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>
239
240 <select size="4">
241 <option id="opt1">option1</option>
242 <option id="opt2">option2</option>
243 </select>
244
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>
253
254 <form>
255 <input type="radio" id="radio1" name="group1"/>
256 <input type="radio" id="radio2" name="group1"/>
257 </form>
258
259 <input type="radio" id="radio3" name="group2"/>
260 <input type="radio" id="radio4" name="group2"/>
261
262 <ul>
263 <li id="li1">Oranges</li>
264 <li id="li2">Apples</li>
265 <li id="li3">Bananas</li>
266 </ul>
267
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>
279
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>
285
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>
297
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>
312
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>
326
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>
332
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>
338
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>
367
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>
382
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>
395
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>
400
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>
411
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>
426
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>
433
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>
440
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>

mercurial