|
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> |