accessible/tests/mochitest/treeupdate/test_visibility.html

Sat, 03 Jan 2015 20:18:00 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Sat, 03 Jan 2015 20:18:00 +0100
branch
TOR_BUG_3246
changeset 7
129ffea94266
permissions
-rw-r--r--

Conditionally enable double key logic according to:
private browsing mode or privacy.thirdparty.isolate preference and
implement in GetCookieStringCommon and FindCookie where it counts...
With some reservations of how to convince FindCookie users to test
condition and pass a nullptr when disabling double key logic.

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

mercurial