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