1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
|
<!DOCTYPE html>
<html>
<head>
<title>div element creation tests</title>
<link rel="stylesheet" type="text/css"
href="chrome://mochikit/content/tests/SimpleTest/test.css" />
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<script type="application/javascript"
src="../common.js"></script>
<script type="application/javascript"
src="../role.js"></script>
<script type="application/javascript"
src="../attributes.js"></script>
<script type="application/javascript">
function getAccessibleDescendantFor(selector) {
return gAccService.getAccessibleDescendantFor(document.querySelector(selector));
}
function doTest() {
// All below test cases are wrapped in a div which always gets rendered.
// c1 through c10 are the containers, the actual test cases are inside.
// c1: Expose the div with text content
let tree =
{ role: ROLE_SECTION, // outer div with ID
children: [
{ role: ROLE_SECTION, // inner div
children: [
{ TEXT_LEAF: [] },
], // end children inner div
}, // end inner div
], // end children outer div
};
testAccessibleTree("c1", tree);
// c2: Only the outermost and innermost divs are exposed.
// The middle one is skipped. This is identical to the above tree.
testAccessibleTree("c2", tree);
// c3: Make sure the inner div with ID is exposed, but the middle one is
// skipped.
tree =
{ role: ROLE_SECTION, // outer div with ID
children: [
{ role: ROLE_SECTION, // inner div
attributes: { id: "b" },
children: [
{ TEXT_LEAF: [] },
], // end children inner div
}, // end inner div
], // end children outer div
};
testAccessibleTree("c3", tree);
// c4: Expose all three divs including the middle one due to its ID.
tree =
{ role: ROLE_SECTION, // outer div with ID
children: [
{ role: ROLE_SECTION, // middle div
attributes: { id: "a" },
children: [
{ role: ROLE_SECTION, // inner div
attributes: { id: "b" },
children: [
{ TEXT_LEAF: [] },
], // end children inner div
}, // end inner div
], // end children middle div
}, // end middle div
], // end children outer div
};
testAccessibleTree("c4", tree);
// c5: Expose the inner div with class b due to its text contents.
tree =
{ role: ROLE_SECTION, // outer div with ID
children: [
{ role: ROLE_SECTION, // inner div with class and text
attributes: { class: "b" },
children: [
{ TEXT_LEAF: [] },
], // end children inner div
}, // end inner div
], // end children outer div
};
testAccessibleTree("c5", tree);
// c6: Expose the outer div due to its ID, and the two inner divs due to
// their text contents. Skip the middle one.
tree =
{ role: ROLE_SECTION, // outer div with ID
children: [
{ role: ROLE_SECTION, // first inner div
children: [
{ TEXT_LEAF: [] },
], // end children first inner div
}, // end first inner div
{ role: ROLE_SECTION, // second inner div
children: [
{ TEXT_LEAF: [] },
], // end children second inner div
}, // end second inner div
], // end children outer div
};
testAccessibleTree("c6", tree);
// c7: Expose all three divs including the middle one due to it being block
// breaking.
tree =
{ role: ROLE_SECTION, // outer div with ID
children: [
{ role: ROLE_SECTION, // middle div
children: [
{ TEXT_LEAF: [] }, // foo
{ role: ROLE_SECTION, // inner div
children: [
{ TEXT_LEAF: [] }, // bar
], // end children inner div
}, // end inner div
{ TEXT_LEAF: [] }, // baz
], // end children middle div
}, // end middle div
], // end children outer div
};
testAccessibleTree("c7", tree);
// c8: Expose all divs due to them all being text block breakers.
tree =
{ role: ROLE_SECTION, // outer div with ID
children: [
{ role: ROLE_SECTION, // foo div
children: [
{ TEXT_LEAF: [] }, // foo
{ role: ROLE_SECTION, // baz div
children: [
{ role: ROLE_SECTION, // bar div
children: [
{ TEXT_LEAF: [] }, // bar
], // end children bar div
}, // end bar div
{ TEXT_LEAF: [] }, // baz
], // end children baz div
}, // end baz div
], // end children foo div
}, // end foo div
], // end children outer div
};
testAccessibleTree("c8", tree);
// c9: The same, but in a different nesting order.
tree =
{ role: ROLE_SECTION, // outer div with ID
children: [
{ role: ROLE_SECTION, // c div
children: [
{ role: ROLE_SECTION, // b div
children: [
{ role: ROLE_SECTION, // a div
children: [
{ TEXT_LEAF: [] }, // a
], // end children a div
}, // end a div
{ TEXT_LEAF: [] }, // b
], // end children b div
}, // end b div
{ TEXT_LEAF: [] }, // c
], // end children c div
}, // end foo div
], // end children outer div
};
testAccessibleTree("c9", tree);
// c10: Both inner divs must be exposed so there is a break after b.
tree =
{ role: ROLE_SECTION, // outer div with ID
children: [
{ role: ROLE_SECTION, // first inner div
children: [
{ TEXT_LEAF: [] }, // a
{ TEXT_LEAF: [] }, // b
], // end children first inner div
}, // end first inner div
{ role: ROLE_SECTION, // second inner div
children: [
{ TEXT_LEAF: [] }, // c
{ TEXT_LEAF: [] }, // d
], // end children second inner div
}, // end second inner div
], // end children outer div
};
testAccessibleTree("c10", tree);
// c11: A div must be exposed if it contains a br element.
tree =
{ role: ROLE_SECTION, // outer div
children: [
{ role: ROLE_SECTION, // First line
children: [
{ TEXT_LEAF: [] }, // text
], // end children first line
}, // end first line
{ role: ROLE_SECTION, // Second line
children: [
{ WHITESPACE: [] }, // whitespace
], // end children second line
}, // end second line
{ role: ROLE_SECTION, // Third line
children: [
{ TEXT_LEAF: [] }, // text
], // end children third line
}, // end third line
], // end children outer div
};
testAccessibleTree("c11", tree);
// c12: Div shouldn't be rendered if first/last child text node is invisible.
tree =
{ role: ROLE_SECTION, // outer div
children: [
{ role: ROLE_PARAGRAPH,
children: [
{ TEXT_LEAF: [] }, // text
],
},
], // end children outer div
};
testAccessibleTree("c12", tree);
// c13: Div should be rendered if there is an inline frame after/before
// invisible text nodes.
tree =
{ role: ROLE_SECTION, // outer div
children: [
{ TEXT_LEAF: [] }, // l1
{ role: ROLE_SECTION, // l2
children: [
{ TEXT_LEAF: [] }, // l2
], // end children l2
},
], // end children outer div
};
testAccessibleTree("c13", tree);
// c14: Div should be rendered if it contains an inline-block.
tree =
{ role: ROLE_SECTION, // outer div
children: [
{ TEXT_LEAF: [] }, // l1
{ role: ROLE_SECTION, // l2
children: [
{ role: ROLE_PUSHBUTTON,
children: [
{ TEXT_LEAF: [] },
],
},
], // end children l2
},
], // end children outer div
};
testAccessibleTree("c14", tree);
// c15: Div should be rendered if previous sibling is text.
tree =
{ role: ROLE_SECTION, // outer div
children: [
{ TEXT_LEAF: [] }, // l1
{ SECTION: [] }, // Block break
{ TEXT_LEAF: [] }, // l2
], // end children outer div
};
testAccessibleTree("c15", tree);
// Test getting descendants of unrendered nodes.
ok(!getAccessibleDescendantFor("#c16 > span"),
"Span has no accessible children");
ok(!getAccessibleDescendantFor("#c17 > span"),
"Span with relocated child should return null");
is(getAccessibleDescendantFor("#c12 > div").role, ROLE_PARAGRAPH,
"Descendant has correct role")
SimpleTest.finish();
}
SimpleTest.waitForExplicitFinish();
addA11yLoadEvent(doTest);
</script>
</head>
<body>
<p id="display"></p>
<div id="content" style="display: none"></div>
<pre id="test">
</pre>
<!-- Expose the div if it has plain text contents -->
<div id="c1"><div>foo</div></div>
<!-- Expose the outer and inner div, skip the middle one. -->
<div id="c2"><div><div>foo</div></div></div>
<!-- Expose the outer and inner divs due to the ID, but skip the middle one. -->
<div id="c3"><div><div id="b">foo</div></div></div>
<!-- Expose all three divs and their IDs. -->
<div id="c4"><div id="a"><div id="b">foo</div></div></div>
<!-- Expose outer and inner divs, due to text content, not class. -->
<div id="c5"><div class="a"><div class="b">foo</div></div></div>
<!-- Expose the outer and two inner divs, skip the single middle one. -->
<div id="c6"><div><div>foo</div><div>bar</div></div></div>
<!-- Expose all divs due to the middle one being block breaking. -->
<div id="c7"><div>foo<div>bar</div>baz</div></div>
<!-- Expose all divs due to them all being text block breakers. -->
<div id="c8"><div>foo<div><div>bar</div>baz</div></div></div>
<div id="c9"><div><div><div>a</div>b</div>c</div></div>
<!-- Both inner divs need to be rendered so there is a break after b. -->
<div id="c10"><div><b>a</b>b</div><div><b>c</b><b>d</b></div></div>
<!-- Div must be rendered if it contains a br -->
<div id="c11"><div>first line.</div><div><br /></div><div>third line</div></div>
<!-- Inner div shouldn't be rendered because although its first and last
children are text nodes, they are invisible.
-->
<div id="c12"><div> <p>Test</p> </div></div>
<!-- Inner div should be rendered because despite the first/last invisible
text nodes, there is also an inline frame.
-->
<div id="c13">l1<div> <span>l2 </span> </div></div>
<!-- Inner div should be rendered because it contains an inline-block. -->
<div id="c14">l1<div><button>l2</button></div></div>
<!-- Inner div should be rendered because previous sibling is text. -->
<div id="c15">l1<div></div>l2</div>
<div id="c16">hello <span></span> world</div>
<div id="c17"><div aria-owns="c"></div>hello <span><button id="c">b</button></span> world</div>
</body>
</html>
|
