The Tor Browser / file comparison

comparison: accessible/tests/mochitest/treeupdate/test_visibility.html

accessible/tests/mochitest/treeupdate/test_visibility.html

changeset 0
6474c204b198
equal deleted inserted replaced
-1:000000000000 0:3bcb41e28dd8
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <title>Style visibility tree update test</title>
6
7 <link rel="stylesheet" type="text/css"
8 href="chrome://mochikit/content/tests/SimpleTest/test.css" />
9
10 <script type="application/javascript"
11 src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
12
13 <script type="application/javascript"
14 src="../common.js"></script>
15 <script type="application/javascript"
16 src="../role.js"></script>
17 <script type="application/javascript"
18 src="../events.js"></script>
19
20 <script type="application/javascript">
21
22 ////////////////////////////////////////////////////////////////////////////
23 // Invokers
24
25 /**
26 * Hide parent while child stays visible.
27 */
28 function test1(aContainerID, aParentID, aChildID)
29 {
30 this.eventSeq = [
31 new invokerChecker(EVENT_HIDE, getNode(aParentID)),
32 new invokerChecker(EVENT_SHOW, getNode(aChildID)),
33 new invokerChecker(EVENT_REORDER, getNode(aContainerID))
34 ];
35
36 this.invoke = function invoke()
37 {
38 var tree =
39 { SECTION: [
40 { SECTION: [
41 { SECTION: [
42 { TEXT_LEAF: [] }
43 ] }
44 ] }
45 ] };
46 testAccessibleTree(aContainerID, tree);
47
48 getNode(aParentID).style.visibility = "hidden";
49 }
50
51 this.finalCheck = function finalCheck()
52 {
53 var tree =
54 { SECTION: [
55 { SECTION: [
56 { TEXT_LEAF: [] }
57 ] }
58 ] };
59 testAccessibleTree(aContainerID, tree);
60 }
61
62 this.getID = function getID()
63 {
64 return "hide parent while child stays visible";
65 }
66 }
67
68 /**
69 * Hide grand parent while its children stay visible.
70 */
71 function test2(aContainerID, aGrandParentID, aChildID, aChild2ID)
72 {
73 this.eventSeq = [
74 new invokerChecker(EVENT_HIDE, getNode(aGrandParentID)),
75 new invokerChecker(EVENT_SHOW, getNode(aChildID)),
76 new invokerChecker(EVENT_SHOW, getNode(aChild2ID)),
77 new invokerChecker(EVENT_REORDER, getNode(aContainerID))
78 ];
79
80 this.invoke = function invoke()
81 {
82 var tree =
83 { SECTION: [ // container
84 { SECTION: [ // grand parent
85 { SECTION: [
86 { SECTION: [ // child
87 { TEXT_LEAF: [] }
88 ] },
89 { SECTION: [ // child2
90 { TEXT_LEAF: [] }
91 ] }
92 ] }
93 ] }
94 ] };
95 testAccessibleTree(aContainerID, tree);
96
97 getNode(aGrandParentID).style.visibility = "hidden";
98 }
99
100 this.finalCheck = function finalCheck()
101 {
102 var tree =
103 { SECTION: [ // container
104 { SECTION: [ // child
105 { TEXT_LEAF: [] }
106 ] },
107 { SECTION: [ // child2
108 { TEXT_LEAF: [] }
109 ] }
110 ] };
111 testAccessibleTree(aContainerID, tree);
112 }
113
114 this.getID = function getID()
115 {
116 return "hide grand parent while its children stay visible";
117 }
118 }
119
120 /**
121 * Change container style, hide parents while their children stay visible.
122 */
123 function test3(aContainerID, aParentID, aParent2ID, aChildID, aChild2ID)
124 {
125 this.eventSeq = [
126 new invokerChecker(EVENT_HIDE, getNode(aParentID)),
127 new invokerChecker(EVENT_HIDE, getNode(aParent2ID)),
128 new invokerChecker(EVENT_SHOW, getNode(aChildID)),
129 new invokerChecker(EVENT_SHOW, getNode(aChild2ID)),
130 new invokerChecker(EVENT_REORDER, getNode(aContainerID))
131 ];
132
133 this.invoke = function invoke()
134 {
135 var tree =
136 { SECTION: [ // container
137 { SECTION: [ // parent
138 { SECTION: [ // child
139 { TEXT_LEAF: [] }
140 ] }
141 ] },
142 { SECTION: [ // parent2
143 { SECTION: [ // child2
144 { TEXT_LEAF: [] }
145 ] },
146 ] }
147 ] };
148 testAccessibleTree(aContainerID, tree);
149
150 getNode(aContainerID).style.color = "red";
151 getNode(aParentID).style.visibility = "hidden";
152 getNode(aParent2ID).style.visibility = "hidden";
153 }
154
155 this.finalCheck = function finalCheck()
156 {
157 var tree =
158 { SECTION: [ // container
159 { SECTION: [ // child
160 { TEXT_LEAF: [] }
161 ] },
162 { SECTION: [ // child2
163 { TEXT_LEAF: [] }
164 ] }
165 ] };
166 testAccessibleTree(aContainerID, tree);
167 }
168
169 this.getID = function getID()
170 {
171 return "change container style, hide parents while their children stay visible";
172 }
173 }
174
175 /**
176 * Change container style and make visible child inside the table.
177 */
178 function test4(aContainerID, aChildID)
179 {
180 this.eventSeq = [
181 new invokerChecker(EVENT_SHOW, getNode(aChildID)),
182 new invokerChecker(EVENT_REORDER, getNode(aChildID).parentNode)
183 ];
184
185 this.invoke = function invoke()
186 {
187 var tree =
188 { SECTION: [
189 { TABLE: [
190 { ROW: [
191 { CELL: [ ] }
192 ] }
193 ] }
194 ] };
195 testAccessibleTree(aContainerID, tree);
196
197 getNode(aContainerID).style.color = "red";
198 getNode(aChildID).style.visibility = "visible";
199 }
200
201 this.finalCheck = function finalCheck()
202 {
203 var tree =
204 { SECTION: [
205 { TABLE: [
206 { ROW: [
207 { CELL: [
208 { SECTION: [
209 { TEXT_LEAF: [] }
210 ] }
211 ] }
212 ] }
213 ] }
214 ] };
215 testAccessibleTree(aContainerID, tree);
216 }
217
218 this.getID = function getID()
219 {
220 return "change container style, make visible child insdie the table";
221 }
222 }
223
224 /**
225 * Hide subcontainer while child inside the table stays visible.
226 */
227 function test5(aContainerID, aSubContainerID, aChildID)
228 {
229 this.eventSeq = [
230 new invokerChecker(EVENT_HIDE, getNode(aSubContainerID)),
231 new invokerChecker(EVENT_SHOW, getNode(aChildID)),
232 new invokerChecker(EVENT_REORDER, getNode(aContainerID))
233 ];
234
235 this.invoke = function invoke()
236 {
237 var tree =
238 { SECTION: [ // container
239 { SECTION: [ // subcontainer
240 { TABLE: [
241 { ROW: [
242 { CELL: [
243 { SECTION: [ // child
244 { TEXT_LEAF: [] }
245 ] }
246 ] }
247 ] }
248 ] }
249 ] }
250 ] };
251 testAccessibleTree(aContainerID, tree);
252
253 getNode(aSubContainerID).style.visibility = "hidden";
254 }
255
256 this.finalCheck = function finalCheck()
257 {
258 var tree =
259 { SECTION: [ // container
260 { SECTION: [ // child
261 { TEXT_LEAF: [] }
262 ] }
263 ] };
264 testAccessibleTree(aContainerID, tree);
265 }
266
267 this.getID = function getID()
268 {
269 return "hide subcontainer while child inside the table stays visible";
270 }
271 }
272
273 /**
274 * Hide subcontainer while its child and child inside the nested table stays visible.
275 */
276 function test6(aContainerID, aSubContainerID, aChildID, aChild2ID)
277 {
278 this.eventSeq = [
279 new invokerChecker(EVENT_HIDE, getNode(aSubContainerID)),
280 new invokerChecker(EVENT_SHOW, getNode(aChildID)),
281 new invokerChecker(EVENT_SHOW, getNode(aChild2ID)),
282 new invokerChecker(EVENT_REORDER, getNode(aContainerID))
283 ];
284
285 this.invoke = function invoke()
286 {
287 var tree =
288 { SECTION: [ // container
289 { SECTION: [ // subcontainer
290 { TABLE: [
291 { ROW: [
292 { CELL: [
293 { TABLE: [ // nested table
294 { ROW: [
295 { CELL: [
296 { SECTION: [ // child
297 { TEXT_LEAF: [] } ]} ]} ]} ]} ]} ]} ]},
298 { SECTION: [ // child2
299 { TEXT_LEAF: [] } ]} ]} ]};
300
301 testAccessibleTree(aContainerID, tree);
302
303 // invoke
304 getNode(aSubContainerID).style.visibility = "hidden";
305 }
306
307 this.finalCheck = function finalCheck()
308 {
309 var tree =
310 { SECTION: [ // container
311 { SECTION: [ // child
312 { TEXT_LEAF: [] } ]},
313 { SECTION: [ // child2
314 { TEXT_LEAF: [] } ]} ]};
315
316 testAccessibleTree(aContainerID, tree);
317 }
318
319 this.getID = function getID()
320 {
321 return "hide subcontainer while its child and child inside the nested table stays visible";
322 }
323 }
324
325 ////////////////////////////////////////////////////////////////////////////
326 // Test
327
328 //gA11yEventDumpID = "eventdump"; // debug stuff
329 //gA11yEventDumpToConsole = true;
330
331 var gQueue = null;
332
333 function doTest()
334 {
335 gQueue = new eventQueue();
336
337 gQueue.push(new test1("t1_container", "t1_parent", "t1_child"));
338 gQueue.push(new test2("t2_container", "t2_grandparent", "t2_child", "t2_child2"));
339 gQueue.push(new test3("t3_container", "t3_parent", "t3_parent2", "t3_child", "t3_child2"));
340 gQueue.push(new test4("t4_container", "t4_child"));
341 gQueue.push(new test5("t5_container", "t5_subcontainer", "t5_child"));
342 gQueue.push(new test6("t6_container", "t6_subcontainer", "t6_child", "t6_child2"));
343
344 gQueue.invoke(); // SimpleTest.finish() will be called in the end
345 }
346
347 SimpleTest.waitForExplicitFinish();
348 addA11yLoadEvent(doTest);
349 </script>
350 </head>
351 <body>
352
353 <a target="_blank"
354 title="Develop a way to handle visibility style"
355 href="https://bugzilla.mozilla.org/show_bug.cgi?id=606125">
356 Mozilla Bug 606125
357 </a>
358
359 <p id="display"></p>
360 <div id="content" style="display: none"></div>
361 <pre id="test">
362 </pre>
363
364 <!-- hide parent while child stays visible -->
365 <div id="t1_container">
366 <div id="t1_parent">
367 <div id="t1_child" style="visibility: visible">text</div>
368 </div>
369 </div>
370
371 <!-- hide grandparent while its children stay visible -->
372 <div id="t2_container">
373 <div id="t2_grandparent">
374 <div>
375 <div id="t2_child" style="visibility: visible">text</div>
376 <div id="t2_child2" style="visibility: visible">text</div>
377 </div>
378 </div>
379 </div>
380
381 <!-- change container style, hide parents while their children stay visible -->
382 <div id="t3_container">
383 <div id="t3_parent">
384 <div id="t3_child" style="visibility: visible">text</div>
385 </div>
386 <div id="t3_parent2">
387 <div id="t3_child2" style="visibility: visible">text</div>
388 </div>
389 </div>
390
391 <!-- change container style, show child inside the table -->
392 <div id="t4_container">
393 <table>
394 <tr>
395 <td>
396 <div id="t4_child" style="visibility: hidden;">text</div>
397 </td>
398 </tr>
399 </table>
400 </div>
401
402 <!-- hide subcontainer while child inside the table stays visible -->
403 <div id="t5_container">
404 <div id="t5_subcontainer">
405 <table>
406 <tr>
407 <td>
408 <div id="t5_child" style="visibility: visible;">text</div>
409 </td>
410 </tr>
411 </table>
412 </div>
413 </div>
414
415 <!-- hide subcontainer while its child and child inside the nested table stays visible -->
416 <div id="t6_container">
417 <div id="t6_subcontainer">
418 <table>
419 <tr>
420 <td>
421 <table>
422 <tr>
423 <td>
424 <div id="t6_child" style="visibility: visible;">text</div>
425 </td>
426 </tr>
427 </table>
428 </td>
429 </tr>
430 </table>
431 <div id="t6_child2" style="visibility: visible">text</div>
432 </div>
433 </div>
434
435 <div id="eventdump"></div>
436 </body>
437 </html>

Mercurial Repository: The Tor Browser

Europalab SCM Repository Server

mercurial