1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/accessible/tests/mochitest/treeupdate/test_visibility.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,437 @@
1.4 +<!DOCTYPE html>
1.5 +<html>
1.6 +
1.7 +<head>
1.8 + <title>Style visibility tree update test</title>
1.9 +
1.10 + <link rel="stylesheet" type="text/css"
1.11 + href="chrome://mochikit/content/tests/SimpleTest/test.css" />
1.12 +
1.13 + <script type="application/javascript"
1.14 + src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
1.15 +
1.16 + <script type="application/javascript"
1.17 + src="../common.js"></script>
1.18 + <script type="application/javascript"
1.19 + src="../role.js"></script>
1.20 + <script type="application/javascript"
1.21 + src="../events.js"></script>
1.22 +
1.23 + <script type="application/javascript">
1.24 +
1.25 + ////////////////////////////////////////////////////////////////////////////
1.26 + // Invokers
1.27 +
1.28 + /**
1.29 + * Hide parent while child stays visible.
1.30 + */
1.31 + function test1(aContainerID, aParentID, aChildID)
1.32 + {
1.33 + this.eventSeq = [
1.34 + new invokerChecker(EVENT_HIDE, getNode(aParentID)),
1.35 + new invokerChecker(EVENT_SHOW, getNode(aChildID)),
1.36 + new invokerChecker(EVENT_REORDER, getNode(aContainerID))
1.37 + ];
1.38 +
1.39 + this.invoke = function invoke()
1.40 + {
1.41 + var tree =
1.42 + { SECTION: [
1.43 + { SECTION: [
1.44 + { SECTION: [
1.45 + { TEXT_LEAF: [] }
1.46 + ] }
1.47 + ] }
1.48 + ] };
1.49 + testAccessibleTree(aContainerID, tree);
1.50 +
1.51 + getNode(aParentID).style.visibility = "hidden";
1.52 + }
1.53 +
1.54 + this.finalCheck = function finalCheck()
1.55 + {
1.56 + var tree =
1.57 + { SECTION: [
1.58 + { SECTION: [
1.59 + { TEXT_LEAF: [] }
1.60 + ] }
1.61 + ] };
1.62 + testAccessibleTree(aContainerID, tree);
1.63 + }
1.64 +
1.65 + this.getID = function getID()
1.66 + {
1.67 + return "hide parent while child stays visible";
1.68 + }
1.69 + }
1.70 +
1.71 + /**
1.72 + * Hide grand parent while its children stay visible.
1.73 + */
1.74 + function test2(aContainerID, aGrandParentID, aChildID, aChild2ID)
1.75 + {
1.76 + this.eventSeq = [
1.77 + new invokerChecker(EVENT_HIDE, getNode(aGrandParentID)),
1.78 + new invokerChecker(EVENT_SHOW, getNode(aChildID)),
1.79 + new invokerChecker(EVENT_SHOW, getNode(aChild2ID)),
1.80 + new invokerChecker(EVENT_REORDER, getNode(aContainerID))
1.81 + ];
1.82 +
1.83 + this.invoke = function invoke()
1.84 + {
1.85 + var tree =
1.86 + { SECTION: [ // container
1.87 + { SECTION: [ // grand parent
1.88 + { SECTION: [
1.89 + { SECTION: [ // child
1.90 + { TEXT_LEAF: [] }
1.91 + ] },
1.92 + { SECTION: [ // child2
1.93 + { TEXT_LEAF: [] }
1.94 + ] }
1.95 + ] }
1.96 + ] }
1.97 + ] };
1.98 + testAccessibleTree(aContainerID, tree);
1.99 +
1.100 + getNode(aGrandParentID).style.visibility = "hidden";
1.101 + }
1.102 +
1.103 + this.finalCheck = function finalCheck()
1.104 + {
1.105 + var tree =
1.106 + { SECTION: [ // container
1.107 + { SECTION: [ // child
1.108 + { TEXT_LEAF: [] }
1.109 + ] },
1.110 + { SECTION: [ // child2
1.111 + { TEXT_LEAF: [] }
1.112 + ] }
1.113 + ] };
1.114 + testAccessibleTree(aContainerID, tree);
1.115 + }
1.116 +
1.117 + this.getID = function getID()
1.118 + {
1.119 + return "hide grand parent while its children stay visible";
1.120 + }
1.121 + }
1.122 +
1.123 + /**
1.124 + * Change container style, hide parents while their children stay visible.
1.125 + */
1.126 + function test3(aContainerID, aParentID, aParent2ID, aChildID, aChild2ID)
1.127 + {
1.128 + this.eventSeq = [
1.129 + new invokerChecker(EVENT_HIDE, getNode(aParentID)),
1.130 + new invokerChecker(EVENT_HIDE, getNode(aParent2ID)),
1.131 + new invokerChecker(EVENT_SHOW, getNode(aChildID)),
1.132 + new invokerChecker(EVENT_SHOW, getNode(aChild2ID)),
1.133 + new invokerChecker(EVENT_REORDER, getNode(aContainerID))
1.134 + ];
1.135 +
1.136 + this.invoke = function invoke()
1.137 + {
1.138 + var tree =
1.139 + { SECTION: [ // container
1.140 + { SECTION: [ // parent
1.141 + { SECTION: [ // child
1.142 + { TEXT_LEAF: [] }
1.143 + ] }
1.144 + ] },
1.145 + { SECTION: [ // parent2
1.146 + { SECTION: [ // child2
1.147 + { TEXT_LEAF: [] }
1.148 + ] },
1.149 + ] }
1.150 + ] };
1.151 + testAccessibleTree(aContainerID, tree);
1.152 +
1.153 + getNode(aContainerID).style.color = "red";
1.154 + getNode(aParentID).style.visibility = "hidden";
1.155 + getNode(aParent2ID).style.visibility = "hidden";
1.156 + }
1.157 +
1.158 + this.finalCheck = function finalCheck()
1.159 + {
1.160 + var tree =
1.161 + { SECTION: [ // container
1.162 + { SECTION: [ // child
1.163 + { TEXT_LEAF: [] }
1.164 + ] },
1.165 + { SECTION: [ // child2
1.166 + { TEXT_LEAF: [] }
1.167 + ] }
1.168 + ] };
1.169 + testAccessibleTree(aContainerID, tree);
1.170 + }
1.171 +
1.172 + this.getID = function getID()
1.173 + {
1.174 + return "change container style, hide parents while their children stay visible";
1.175 + }
1.176 + }
1.177 +
1.178 + /**
1.179 + * Change container style and make visible child inside the table.
1.180 + */
1.181 + function test4(aContainerID, aChildID)
1.182 + {
1.183 + this.eventSeq = [
1.184 + new invokerChecker(EVENT_SHOW, getNode(aChildID)),
1.185 + new invokerChecker(EVENT_REORDER, getNode(aChildID).parentNode)
1.186 + ];
1.187 +
1.188 + this.invoke = function invoke()
1.189 + {
1.190 + var tree =
1.191 + { SECTION: [
1.192 + { TABLE: [
1.193 + { ROW: [
1.194 + { CELL: [ ] }
1.195 + ] }
1.196 + ] }
1.197 + ] };
1.198 + testAccessibleTree(aContainerID, tree);
1.199 +
1.200 + getNode(aContainerID).style.color = "red";
1.201 + getNode(aChildID).style.visibility = "visible";
1.202 + }
1.203 +
1.204 + this.finalCheck = function finalCheck()
1.205 + {
1.206 + var tree =
1.207 + { SECTION: [
1.208 + { TABLE: [
1.209 + { ROW: [
1.210 + { CELL: [
1.211 + { SECTION: [
1.212 + { TEXT_LEAF: [] }
1.213 + ] }
1.214 + ] }
1.215 + ] }
1.216 + ] }
1.217 + ] };
1.218 + testAccessibleTree(aContainerID, tree);
1.219 + }
1.220 +
1.221 + this.getID = function getID()
1.222 + {
1.223 + return "change container style, make visible child insdie the table";
1.224 + }
1.225 + }
1.226 +
1.227 + /**
1.228 + * Hide subcontainer while child inside the table stays visible.
1.229 + */
1.230 + function test5(aContainerID, aSubContainerID, aChildID)
1.231 + {
1.232 + this.eventSeq = [
1.233 + new invokerChecker(EVENT_HIDE, getNode(aSubContainerID)),
1.234 + new invokerChecker(EVENT_SHOW, getNode(aChildID)),
1.235 + new invokerChecker(EVENT_REORDER, getNode(aContainerID))
1.236 + ];
1.237 +
1.238 + this.invoke = function invoke()
1.239 + {
1.240 + var tree =
1.241 + { SECTION: [ // container
1.242 + { SECTION: [ // subcontainer
1.243 + { TABLE: [
1.244 + { ROW: [
1.245 + { CELL: [
1.246 + { SECTION: [ // child
1.247 + { TEXT_LEAF: [] }
1.248 + ] }
1.249 + ] }
1.250 + ] }
1.251 + ] }
1.252 + ] }
1.253 + ] };
1.254 + testAccessibleTree(aContainerID, tree);
1.255 +
1.256 + getNode(aSubContainerID).style.visibility = "hidden";
1.257 + }
1.258 +
1.259 + this.finalCheck = function finalCheck()
1.260 + {
1.261 + var tree =
1.262 + { SECTION: [ // container
1.263 + { SECTION: [ // child
1.264 + { TEXT_LEAF: [] }
1.265 + ] }
1.266 + ] };
1.267 + testAccessibleTree(aContainerID, tree);
1.268 + }
1.269 +
1.270 + this.getID = function getID()
1.271 + {
1.272 + return "hide subcontainer while child inside the table stays visible";
1.273 + }
1.274 + }
1.275 +
1.276 + /**
1.277 + * Hide subcontainer while its child and child inside the nested table stays visible.
1.278 + */
1.279 + function test6(aContainerID, aSubContainerID, aChildID, aChild2ID)
1.280 + {
1.281 + this.eventSeq = [
1.282 + new invokerChecker(EVENT_HIDE, getNode(aSubContainerID)),
1.283 + new invokerChecker(EVENT_SHOW, getNode(aChildID)),
1.284 + new invokerChecker(EVENT_SHOW, getNode(aChild2ID)),
1.285 + new invokerChecker(EVENT_REORDER, getNode(aContainerID))
1.286 + ];
1.287 +
1.288 + this.invoke = function invoke()
1.289 + {
1.290 + var tree =
1.291 + { SECTION: [ // container
1.292 + { SECTION: [ // subcontainer
1.293 + { TABLE: [
1.294 + { ROW: [
1.295 + { CELL: [
1.296 + { TABLE: [ // nested table
1.297 + { ROW: [
1.298 + { CELL: [
1.299 + { SECTION: [ // child
1.300 + { TEXT_LEAF: [] } ]} ]} ]} ]} ]} ]} ]},
1.301 + { SECTION: [ // child2
1.302 + { TEXT_LEAF: [] } ]} ]} ]};
1.303 +
1.304 + testAccessibleTree(aContainerID, tree);
1.305 +
1.306 + // invoke
1.307 + getNode(aSubContainerID).style.visibility = "hidden";
1.308 + }
1.309 +
1.310 + this.finalCheck = function finalCheck()
1.311 + {
1.312 + var tree =
1.313 + { SECTION: [ // container
1.314 + { SECTION: [ // child
1.315 + { TEXT_LEAF: [] } ]},
1.316 + { SECTION: [ // child2
1.317 + { TEXT_LEAF: [] } ]} ]};
1.318 +
1.319 + testAccessibleTree(aContainerID, tree);
1.320 + }
1.321 +
1.322 + this.getID = function getID()
1.323 + {
1.324 + return "hide subcontainer while its child and child inside the nested table stays visible";
1.325 + }
1.326 + }
1.327 +
1.328 + ////////////////////////////////////////////////////////////////////////////
1.329 + // Test
1.330 +
1.331 + //gA11yEventDumpID = "eventdump"; // debug stuff
1.332 + //gA11yEventDumpToConsole = true;
1.333 +
1.334 + var gQueue = null;
1.335 +
1.336 + function doTest()
1.337 + {
1.338 + gQueue = new eventQueue();
1.339 +
1.340 + gQueue.push(new test1("t1_container", "t1_parent", "t1_child"));
1.341 + gQueue.push(new test2("t2_container", "t2_grandparent", "t2_child", "t2_child2"));
1.342 + gQueue.push(new test3("t3_container", "t3_parent", "t3_parent2", "t3_child", "t3_child2"));
1.343 + gQueue.push(new test4("t4_container", "t4_child"));
1.344 + gQueue.push(new test5("t5_container", "t5_subcontainer", "t5_child"));
1.345 + gQueue.push(new test6("t6_container", "t6_subcontainer", "t6_child", "t6_child2"));
1.346 +
1.347 + gQueue.invoke(); // SimpleTest.finish() will be called in the end
1.348 + }
1.349 +
1.350 + SimpleTest.waitForExplicitFinish();
1.351 + addA11yLoadEvent(doTest);
1.352 + </script>
1.353 +</head>
1.354 +<body>
1.355 +
1.356 + <a target="_blank"
1.357 + title="Develop a way to handle visibility style"
1.358 + href="https://bugzilla.mozilla.org/show_bug.cgi?id=606125">
1.359 + Mozilla Bug 606125
1.360 + </a>
1.361 +
1.362 + <p id="display"></p>
1.363 + <div id="content" style="display: none"></div>
1.364 + <pre id="test">
1.365 + </pre>
1.366 +
1.367 + <!-- hide parent while child stays visible -->
1.368 + <div id="t1_container">
1.369 + <div id="t1_parent">
1.370 + <div id="t1_child" style="visibility: visible">text</div>
1.371 + </div>
1.372 + </div>
1.373 +
1.374 + <!-- hide grandparent while its children stay visible -->
1.375 + <div id="t2_container">
1.376 + <div id="t2_grandparent">
1.377 + <div>
1.378 + <div id="t2_child" style="visibility: visible">text</div>
1.379 + <div id="t2_child2" style="visibility: visible">text</div>
1.380 + </div>
1.381 + </div>
1.382 + </div>
1.383 +
1.384 + <!-- change container style, hide parents while their children stay visible -->
1.385 + <div id="t3_container">
1.386 + <div id="t3_parent">
1.387 + <div id="t3_child" style="visibility: visible">text</div>
1.388 + </div>
1.389 + <div id="t3_parent2">
1.390 + <div id="t3_child2" style="visibility: visible">text</div>
1.391 + </div>
1.392 + </div>
1.393 +
1.394 + <!-- change container style, show child inside the table -->
1.395 + <div id="t4_container">
1.396 + <table>
1.397 + <tr>
1.398 + <td>
1.399 + <div id="t4_child" style="visibility: hidden;">text</div>
1.400 + </td>
1.401 + </tr>
1.402 + </table>
1.403 + </div>
1.404 +
1.405 + <!-- hide subcontainer while child inside the table stays visible -->
1.406 + <div id="t5_container">
1.407 + <div id="t5_subcontainer">
1.408 + <table>
1.409 + <tr>
1.410 + <td>
1.411 + <div id="t5_child" style="visibility: visible;">text</div>
1.412 + </td>
1.413 + </tr>
1.414 + </table>
1.415 + </div>
1.416 + </div>
1.417 +
1.418 + <!-- hide subcontainer while its child and child inside the nested table stays visible -->
1.419 + <div id="t6_container">
1.420 + <div id="t6_subcontainer">
1.421 + <table>
1.422 + <tr>
1.423 + <td>
1.424 + <table>
1.425 + <tr>
1.426 + <td>
1.427 + <div id="t6_child" style="visibility: visible;">text</div>
1.428 + </td>
1.429 + </tr>
1.430 + </table>
1.431 + </td>
1.432 + </tr>
1.433 + </table>
1.434 + <div id="t6_child2" style="visibility: visible">text</div>
1.435 + </div>
1.436 + </div>
1.437 +
1.438 + <div id="eventdump"></div>
1.439 +</body>
1.440 +</html>
