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