1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/accessible/tests/mochitest/treeupdate/test_imagemap.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,442 @@
1.4 +<!DOCTYPE html>
1.5 +<html>
1.6 +<head>
1.7 + <title>HTML img map accessible tree update tests</title>
1.8 + <link rel="stylesheet" type="text/css"
1.9 + href="chrome://mochikit/content/tests/SimpleTest/test.css" />
1.10 +
1.11 + <script type="application/javascript"
1.12 + src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
1.13 + <script type="application/javascript"
1.14 + src="chrome://mochikit/content/tests/SimpleTest/EventUtils.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 + function insertArea(aImageMapID, aMapID)
1.25 + {
1.26 + this.imageMap = getAccessible(aImageMapID);
1.27 + this.mapNode = getNode(aMapID);
1.28 +
1.29 + function getInsertedArea(aThisObj)
1.30 + {
1.31 + return aThisObj.imageMap.firstChild;
1.32 + }
1.33 +
1.34 + this.eventSeq = [
1.35 + new invokerChecker(EVENT_SHOW, getInsertedArea, this),
1.36 + new invokerChecker(EVENT_REORDER, this.imageMap)
1.37 + ];
1.38 +
1.39 + this.invoke = function insertArea_invoke()
1.40 + {
1.41 + var areaElm = document.createElement("area");
1.42 + areaElm.setAttribute("href",
1.43 + "http://www.bbc.co.uk/radio4/atoz/index.shtml#a");
1.44 + areaElm.setAttribute("coords", "0,0,13,14");
1.45 + areaElm.setAttribute("alt", "a");
1.46 + areaElm.setAttribute("shape", "rect");
1.47 +
1.48 + this.mapNode.insertBefore(areaElm, this.mapNode.firstChild);
1.49 + }
1.50 +
1.51 + this.finalCheck = function insertArea_finalCheck()
1.52 + {
1.53 + var accTree =
1.54 + { IMAGE_MAP: [
1.55 + {
1.56 + role: ROLE_LINK,
1.57 + name: "a",
1.58 + children: [ ]
1.59 + },
1.60 + {
1.61 + role: ROLE_LINK,
1.62 + name: "b",
1.63 + children: [ ]
1.64 + },
1.65 + ] };
1.66 + testAccessibleTree(this.imageMap, accTree);
1.67 + }
1.68 +
1.69 + this.getID = function insertArea_getID()
1.70 + {
1.71 + return "insert area element";
1.72 + }
1.73 + }
1.74 +
1.75 + function appendArea(aImageMapID, aMapID)
1.76 + {
1.77 + this.imageMap = getAccessible(aImageMapID);
1.78 + this.mapNode = getNode(aMapID);
1.79 +
1.80 + function getAppendedArea(aThisObj)
1.81 + {
1.82 + return aThisObj.imageMap.lastChild;
1.83 + }
1.84 +
1.85 + this.eventSeq = [
1.86 + new invokerChecker(EVENT_SHOW, getAppendedArea, this),
1.87 + new invokerChecker(EVENT_REORDER, this.imageMap)
1.88 + ];
1.89 +
1.90 + this.invoke = function appendArea_invoke()
1.91 + {
1.92 + var areaElm = document.createElement("area");
1.93 + areaElm.setAttribute("href",
1.94 + "http://www.bbc.co.uk/radio4/atoz/index.shtml#c");
1.95 + areaElm.setAttribute("coords", "34,0,47,14");
1.96 + areaElm.setAttribute("alt", "c");
1.97 + areaElm.setAttribute("shape", "rect");
1.98 +
1.99 + this.mapNode.appendChild(areaElm);
1.100 + }
1.101 +
1.102 + this.finalCheck = function appendArea_finalCheck()
1.103 + {
1.104 + var accTree =
1.105 + { IMAGE_MAP: [
1.106 + {
1.107 + role: ROLE_LINK,
1.108 + name: "a",
1.109 + children: [ ]
1.110 + },
1.111 + {
1.112 + role: ROLE_LINK,
1.113 + name: "b",
1.114 + children: [ ]
1.115 + },
1.116 + {
1.117 + role: ROLE_LINK,
1.118 + name: "c",
1.119 + children: [ ]
1.120 + }
1.121 + ] };
1.122 + testAccessibleTree(this.imageMap, accTree);
1.123 + }
1.124 +
1.125 + this.getID = function appendArea_getID()
1.126 + {
1.127 + return "append area element";
1.128 + }
1.129 + }
1.130 +
1.131 + function removeArea(aImageMapID, aMapID)
1.132 + {
1.133 + this.imageMap = getAccessible(aImageMapID);
1.134 + this.area = null;
1.135 + this.mapNode = getNode(aMapID);
1.136 +
1.137 + function getRemovedArea(aThisObj)
1.138 + {
1.139 + return aThisObj.area;
1.140 + }
1.141 +
1.142 + this.eventSeq = [
1.143 + new invokerChecker(EVENT_HIDE, getRemovedArea, this),
1.144 + new invokerChecker(EVENT_REORDER, this.imageMap)
1.145 + ];
1.146 +
1.147 + this.invoke = function removeArea_invoke()
1.148 + {
1.149 + this.area = this.imageMap.firstChild;
1.150 + this.mapNode.removeChild(this.mapNode.firstElementChild);
1.151 + }
1.152 +
1.153 + this.finalCheck = function removeArea_finalCheck()
1.154 + {
1.155 + var accTree =
1.156 + { IMAGE_MAP: [
1.157 + {
1.158 + role: ROLE_LINK,
1.159 + name: "b",
1.160 + children: [ ]
1.161 + },
1.162 + {
1.163 + role: ROLE_LINK,
1.164 + name: "c",
1.165 + children: [ ]
1.166 + }
1.167 + ] };
1.168 + testAccessibleTree(this.imageMap, accTree);
1.169 + }
1.170 +
1.171 + this.getID = function removeArea_getID()
1.172 + {
1.173 + return "remove area element";
1.174 + }
1.175 + }
1.176 +
1.177 + function removeNameOnMap(aImageMapContainerID, aImageMapID, aMapID)
1.178 + {
1.179 + this.container = getAccessible(aImageMapContainerID);
1.180 + this.containerNode = this.container.DOMNode;
1.181 + this.imageMap = getAccessible(aImageMapID);
1.182 + this.imgNode = this.imageMap.DOMNode;
1.183 + this.mapNode = getNode(aMapID);
1.184 +
1.185 + this.eventSeq = [
1.186 + new invokerChecker(EVENT_HIDE, this.imageMap),
1.187 + new invokerChecker(EVENT_SHOW, this.imgNode),
1.188 + new invokerChecker(EVENT_REORDER, this.container)
1.189 + ];
1.190 +
1.191 + this.invoke = function removeNameOnMap_invoke()
1.192 + {
1.193 + this.mapNode.removeAttribute("name");
1.194 + }
1.195 +
1.196 + this.finalCheck = function removeNameOnMap_finalCheck()
1.197 + {
1.198 + var accTree =
1.199 + { SECTION: [
1.200 + { GRAPHIC: [ ] }
1.201 + ] };
1.202 + testAccessibleTree(this.container, accTree);
1.203 + }
1.204 +
1.205 + this.getID = function removeNameOnMap_getID()
1.206 + {
1.207 + return "remove @name on map element";
1.208 + }
1.209 + }
1.210 +
1.211 + function restoreNameOnMap(aImageMapContainerID, aImageMapID, aMapID)
1.212 + {
1.213 + this.container = getAccessible(aImageMapContainerID);
1.214 + this.containerNode = this.container.DOMNode;
1.215 + this.imageMap = null;
1.216 + this.imgNode = getNode(aImageMapID);
1.217 + this.mapNode = getNode(aMapID);
1.218 +
1.219 + function getImageMap(aThisObj)
1.220 + {
1.221 + return aThisObj.imageMap;
1.222 + }
1.223 +
1.224 + this.eventSeq = [
1.225 + new invokerChecker(EVENT_HIDE, getImageMap, this),
1.226 + new invokerChecker(EVENT_SHOW, this.imgNode),
1.227 + new invokerChecker(EVENT_REORDER, this.container)
1.228 + ];
1.229 +
1.230 + this.invoke = function restoreNameOnMap_invoke()
1.231 + {
1.232 + this.imageMap = getAccessible(aImageMapID);
1.233 + this.mapNode.setAttribute("name", "atoz_map");
1.234 +
1.235 + // XXXhack: force repainting of the image (see bug 745788 for details).
1.236 + waveOverImageMap(aImageMapID);
1.237 + }
1.238 +
1.239 + this.finalCheck = function removeNameOnMap_finalCheck()
1.240 + {
1.241 + var accTree =
1.242 + { SECTION: [
1.243 + { IMAGE_MAP: [
1.244 + { LINK: [ ] },
1.245 + { LINK: [ ] }
1.246 + ] }
1.247 + ] };
1.248 + testAccessibleTree(this.container, accTree);
1.249 + }
1.250 +
1.251 + this.getID = function removeNameOnMap_getID()
1.252 + {
1.253 + return "restore @name on map element";
1.254 + }
1.255 + }
1.256 +
1.257 + function removeMap(aImageMapContainerID, aImageMapID, aMapID)
1.258 + {
1.259 + this.container = getAccessible(aImageMapContainerID);
1.260 + this.containerNode = this.container.DOMNode;
1.261 + this.imageMap = null;
1.262 + this.imgNode = getNode(aImageMapID);
1.263 + this.mapNode = getNode(aMapID);
1.264 +
1.265 + function getImageMap(aThisObj)
1.266 + {
1.267 + return aThisObj.imageMap;
1.268 + }
1.269 +
1.270 + this.eventSeq = [
1.271 + new invokerChecker(EVENT_HIDE, getImageMap, this),
1.272 + new invokerChecker(EVENT_SHOW, this.imgNode),
1.273 + new invokerChecker(EVENT_REORDER, this.container)
1.274 + ];
1.275 +
1.276 + this.invoke = function removeMap_invoke()
1.277 + {
1.278 + this.imageMap = getAccessible(aImageMapID);
1.279 + this.mapNode.parentNode.removeChild(this.mapNode);
1.280 + }
1.281 +
1.282 + this.finalCheck = function removeMap_finalCheck()
1.283 + {
1.284 + var accTree =
1.285 + { SECTION: [
1.286 + { GRAPHIC: [ ] }
1.287 + ] };
1.288 + testAccessibleTree(this.container, accTree);
1.289 + }
1.290 +
1.291 + this.getID = function removeMap_getID()
1.292 + {
1.293 + return "remove map element";
1.294 + }
1.295 + }
1.296 +
1.297 + function insertMap(aImageMapContainerID, aImageID)
1.298 + {
1.299 + this.container = getAccessible(aImageMapContainerID);
1.300 + this.containerNode = this.container.DOMNode;
1.301 + this.image = null;
1.302 + this.imgMapNode = getNode(aImageID);
1.303 +
1.304 + function getImage(aThisObj)
1.305 + {
1.306 + return aThisObj.image;
1.307 + }
1.308 +
1.309 + this.eventSeq = [
1.310 + new invokerChecker(EVENT_HIDE, getImage, this),
1.311 + new invokerChecker(EVENT_SHOW, this.imgMapNode),
1.312 + new invokerChecker(EVENT_REORDER, this.container)
1.313 + ];
1.314 +
1.315 + this.invoke = function insertMap_invoke()
1.316 + {
1.317 + this.image = getAccessible(aImageID);
1.318 +
1.319 + var map = document.createElement("map");
1.320 + map.setAttribute("name", "atoz_map");
1.321 + map.setAttribute("id", "map");
1.322 +
1.323 + var area = document.createElement("area")
1.324 + area.setAttribute("href",
1.325 + "http://www.bbc.co.uk/radio4/atoz/index.shtml#b");
1.326 + area.setAttribute("coords", "17,0,30,14");
1.327 + area.setAttribute("alt", "b");
1.328 + area.setAttribute("shape", "rect");
1.329 +
1.330 + map.appendChild(area);
1.331 +
1.332 + this.containerNode.appendChild(map);
1.333 + }
1.334 +
1.335 + this.finalCheck = function insertMap_finalCheck()
1.336 + {
1.337 + var accTree =
1.338 + { SECTION: [
1.339 + { IMAGE_MAP: [
1.340 + { LINK: [ ] }
1.341 + ] }
1.342 + ] };
1.343 + testAccessibleTree(this.container, accTree);
1.344 + }
1.345 +
1.346 + this.getID = function insertMap_getID()
1.347 + {
1.348 + return "insert map element";
1.349 + }
1.350 + }
1.351 +
1.352 + function hideImageMap(aContainerID, aImageID)
1.353 + {
1.354 + this.container = getAccessible(aContainerID);
1.355 + this.imageMap = null;
1.356 + this.imageMapNode = getNode(aImageID);
1.357 +
1.358 + function getImageMap(aThisObj)
1.359 + {
1.360 + return aThisObj.imageMap;
1.361 + }
1.362 +
1.363 + this.eventSeq = [
1.364 + new invokerChecker(EVENT_HIDE, getImageMap, this),
1.365 + new invokerChecker(EVENT_REORDER, aContainerID)
1.366 + ];
1.367 +
1.368 + this.invoke = function hideImageMap_invoke()
1.369 + {
1.370 + this.imageMap = getAccessible(this.imageMapNode);
1.371 + this.imageMapNode.style.display = "none";
1.372 + }
1.373 +
1.374 + this.finalCheck = function hideImageMap_finalCheck()
1.375 + {
1.376 + var accTree =
1.377 + { SECTION: [ ] };
1.378 + testAccessibleTree(this.container, accTree);
1.379 + }
1.380 +
1.381 + this.getID = function hideImageMap_getID()
1.382 + {
1.383 + return "display:none image";
1.384 + }
1.385 + }
1.386 +
1.387 + //gA11yEventDumpToConsole = true; // debug stuff
1.388 + function doPreTest()
1.389 + {
1.390 + waitForImageMap("imgmap", doTest);
1.391 + }
1.392 +
1.393 + var gQueue = null;
1.394 + function doTest()
1.395 + {
1.396 + gQueue = new eventQueue();
1.397 +
1.398 + gQueue.push(new insertArea("imgmap", "map"));
1.399 + gQueue.push(new appendArea("imgmap", "map"));
1.400 + gQueue.push(new removeArea("imgmap", "map"));
1.401 + gQueue.push(new removeNameOnMap("container", "imgmap", "map"));
1.402 + gQueue.push(new restoreNameOnMap("container", "imgmap", "map"));
1.403 + gQueue.push(new removeMap("container", "imgmap", "map"));
1.404 + gQueue.push(new insertMap("container", "imgmap"));
1.405 + gQueue.push(new hideImageMap("container", "imgmap"));
1.406 +
1.407 + //enableLogging("tree"); // debug stuff
1.408 + //gQueue.onFinish = function() { disableLogging("tree"); }
1.409 +
1.410 + gQueue.invoke(); // Will call SimpleTest.finish();
1.411 + }
1.412 +
1.413 + SimpleTest.waitForExplicitFinish();
1.414 + addA11yLoadEvent(doPreTest);
1.415 + </script>
1.416 +
1.417 +</head>
1.418 +<body>
1.419 +
1.420 + <a target="_blank"
1.421 + title="Image map accessible tree is not updated when image map is changed"
1.422 + href="https://bugzilla.mozilla.org/show_bug.cgi?id=732389">
1.423 + Mozilla Bug 732389
1.424 + </a>
1.425 + <p id="display"></p>
1.426 + <div id="content" style="display: none"></div>
1.427 + <pre id="test">
1.428 + </pre>
1.429 +
1.430 + <map name="atoz_map" id="map">
1.431 + <area href="http://www.bbc.co.uk/radio4/atoz/index.shtml#b"
1.432 + coords="17,0,30,14" alt="b" shape="rect">
1.433 + </map>
1.434 +
1.435 + <div id="container">
1.436 + <img id="imgmap" width="447" height="15"
1.437 + usemap="#atoz_map"
1.438 + src="../letters.gif"><!--
1.439 + Important: no whitespace between the <img> and the </div>, so we
1.440 + don't end up with textframes there, because those would be reflected
1.441 + in our accessible tree in some cases.
1.442 + --></div>
1.443 +
1.444 +</body>
1.445 +</html>
