diff options
Diffstat (limited to 'accessible/tests/mochitest/treeupdate/test_imagemap.html')
| -rw-r--r-- | accessible/tests/mochitest/treeupdate/test_imagemap.html | 399 |
1 files changed, 399 insertions, 0 deletions
diff --git a/accessible/tests/mochitest/treeupdate/test_imagemap.html b/accessible/tests/mochitest/treeupdate/test_imagemap.html new file mode 100644 index 0000000000..b401b54eff --- /dev/null +++ b/accessible/tests/mochitest/treeupdate/test_imagemap.html @@ -0,0 +1,399 @@ +<!DOCTYPE html> +<html> +<head> + <title>HTML img map accessible tree update tests</title> + <link rel="stylesheet" type="text/css" + href="chrome://mochikit/content/tests/SimpleTest/test.css" /> + + <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> + <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script> + + <script type="application/javascript" + src="../common.js"></script> + <script type="application/javascript" + src="../role.js"></script> + <script type="application/javascript" + src="../events.js"></script> + + <script type="application/javascript"> + function insertArea(aImageMapID, aMapID) { + this.imageMap = getAccessible(aImageMapID); + this.mapNode = getNode(aMapID); + + function getInsertedArea(aThisObj) { + return aThisObj.imageMap.firstChild; + } + + this.eventSeq = [ + new invokerChecker(EVENT_SHOW, getInsertedArea, this), + new invokerChecker(EVENT_REORDER, this.imageMap), + ]; + + this.invoke = function insertArea_invoke() { + var areaElm = document.createElement("area"); + areaElm.setAttribute("href", + "http://www.bbc.co.uk/radio4/atoz/index.shtml#a"); + areaElm.setAttribute("coords", "0,0,13,14"); + areaElm.setAttribute("alt", "a"); + areaElm.setAttribute("shape", "rect"); + + this.mapNode.insertBefore(areaElm, this.mapNode.firstChild); + }; + + this.finalCheck = function insertArea_finalCheck() { + var accTree = + { IMAGE_MAP: [ + { + role: ROLE_LINK, + name: "a", + children: [ ], + }, + { + role: ROLE_LINK, + name: "b", + children: [ ], + }, + ] }; + testAccessibleTree(this.imageMap, accTree); + }; + + this.getID = function insertArea_getID() { + return "insert area element"; + }; + } + + function appendArea(aImageMapID, aMapID) { + this.imageMap = getAccessible(aImageMapID); + this.mapNode = getNode(aMapID); + + function getAppendedArea(aThisObj) { + return aThisObj.imageMap.lastChild; + } + + this.eventSeq = [ + new invokerChecker(EVENT_SHOW, getAppendedArea, this), + new invokerChecker(EVENT_REORDER, this.imageMap), + ]; + + this.invoke = function appendArea_invoke() { + var areaElm = document.createElement("area"); + areaElm.setAttribute("href", + "http://www.bbc.co.uk/radio4/atoz/index.shtml#c"); + areaElm.setAttribute("coords", "34,0,47,14"); + areaElm.setAttribute("alt", "c"); + areaElm.setAttribute("shape", "rect"); + + this.mapNode.appendChild(areaElm); + }; + + this.finalCheck = function appendArea_finalCheck() { + var accTree = + { IMAGE_MAP: [ + { + role: ROLE_LINK, + name: "a", + children: [ ], + }, + { + role: ROLE_LINK, + name: "b", + children: [ ], + }, + { + role: ROLE_LINK, + name: "c", + children: [ ], + }, + ] }; + testAccessibleTree(this.imageMap, accTree); + }; + + this.getID = function appendArea_getID() { + return "append area element"; + }; + } + + function removeArea(aImageMapID, aMapID) { + this.imageMap = getAccessible(aImageMapID); + this.area = null; + this.mapNode = getNode(aMapID); + + function getRemovedArea(aThisObj) { + return aThisObj.area; + } + + this.eventSeq = [ + new invokerChecker(EVENT_HIDE, getRemovedArea, this), + new invokerChecker(EVENT_REORDER, this.imageMap), + ]; + + this.invoke = function removeArea_invoke() { + this.area = this.imageMap.firstChild; + this.mapNode.removeChild(this.mapNode.firstElementChild); + }; + + this.finalCheck = function removeArea_finalCheck() { + var accTree = + { IMAGE_MAP: [ + { + role: ROLE_LINK, + name: "b", + children: [ ], + }, + { + role: ROLE_LINK, + name: "c", + children: [ ], + }, + ] }; + testAccessibleTree(this.imageMap, accTree); + }; + + this.getID = function removeArea_getID() { + return "remove area element"; + }; + } + + function removeNameOnMap(aImageMapContainerID, aImageMapID, aMapID) { + this.container = getAccessible(aImageMapContainerID); + this.containerNode = this.container.DOMNode; + this.imageMap = getAccessible(aImageMapID); + this.imgNode = this.imageMap.DOMNode; + this.mapNode = getNode(aMapID); + + this.eventSeq = [ + new invokerChecker(EVENT_HIDE, this.imageMap), + new invokerChecker(EVENT_SHOW, this.imgNode), + new invokerChecker(EVENT_REORDER, this.container), + ]; + + this.invoke = function removeNameOnMap_invoke() { + this.mapNode.removeAttribute("name"); + }; + + this.finalCheck = function removeNameOnMap_finalCheck() { + var accTree = + { SECTION: [ + { GRAPHIC: [ ] }, + ] }; + testAccessibleTree(this.container, accTree); + }; + + this.getID = function removeNameOnMap_getID() { + return "remove @name on map element"; + }; + } + + function restoreNameOnMap(aImageMapContainerID, aImageMapID, aMapID) { + this.container = getAccessible(aImageMapContainerID); + this.containerNode = this.container.DOMNode; + this.imageMap = null; + this.imgNode = getNode(aImageMapID); + this.mapNode = getNode(aMapID); + + function getImageMap(aThisObj) { + return aThisObj.imageMap; + } + + this.eventSeq = [ + new invokerChecker(EVENT_HIDE, getImageMap, this), + new invokerChecker(EVENT_SHOW, this.imgNode), + new invokerChecker(EVENT_REORDER, this.container), + ]; + + this.invoke = function restoreNameOnMap_invoke() { + this.imageMap = getAccessible(aImageMapID); + this.mapNode.setAttribute("name", "atoz_map"); + + // XXXhack: force repainting of the image (see bug 745788 for details). + waveOverImageMap(aImageMapID); + }; + + this.finalCheck = function removeNameOnMap_finalCheck() { + var accTree = + { SECTION: [ + { IMAGE_MAP: [ + { LINK: [ ] }, + { LINK: [ ] }, + ] }, + ] }; + testAccessibleTree(this.container, accTree); + }; + + this.getID = function removeNameOnMap_getID() { + return "restore @name on map element"; + }; + } + + function removeMap(aImageMapContainerID, aImageMapID, aMapID) { + this.container = getAccessible(aImageMapContainerID); + this.containerNode = this.container.DOMNode; + this.imageMap = null; + this.imgNode = getNode(aImageMapID); + this.mapNode = getNode(aMapID); + + function getImageMap(aThisObj) { + return aThisObj.imageMap; + } + + this.eventSeq = [ + new invokerChecker(EVENT_HIDE, getImageMap, this), + new invokerChecker(EVENT_SHOW, this.imgNode), + new invokerChecker(EVENT_REORDER, this.container), + ]; + + this.invoke = function removeMap_invoke() { + this.imageMap = getAccessible(aImageMapID); + this.mapNode.remove(); + }; + + this.finalCheck = function removeMap_finalCheck() { + var accTree = + { SECTION: [ + { GRAPHIC: [ ] }, + ] }; + testAccessibleTree(this.container, accTree); + }; + + this.getID = function removeMap_getID() { + return "remove map element"; + }; + } + + function insertMap(aImageMapContainerID, aImageID) { + this.container = getAccessible(aImageMapContainerID); + this.containerNode = this.container.DOMNode; + this.image = null; + this.imgMapNode = getNode(aImageID); + + function getImage(aThisObj) { + return aThisObj.image; + } + + this.eventSeq = [ + new invokerChecker(EVENT_HIDE, getImage, this), + new invokerChecker(EVENT_SHOW, this.imgMapNode), + new invokerChecker(EVENT_REORDER, this.container), + ]; + + this.invoke = function insertMap_invoke() { + this.image = getAccessible(aImageID); + + var map = document.createElement("map"); + map.setAttribute("name", "atoz_map"); + map.setAttribute("id", "map"); + + var area = document.createElement("area"); + area.setAttribute("href", + "http://www.bbc.co.uk/radio4/atoz/index.shtml#b"); + area.setAttribute("coords", "17,0,30,14"); + area.setAttribute("alt", "b"); + area.setAttribute("shape", "rect"); + + map.appendChild(area); + + this.containerNode.appendChild(map); + }; + + this.finalCheck = function insertMap_finalCheck() { + var accTree = + { SECTION: [ + { IMAGE_MAP: [ + { LINK: [ ] }, + ] }, + ] }; + testAccessibleTree(this.container, accTree); + }; + + this.getID = function insertMap_getID() { + return "insert map element"; + }; + } + + function hideImageMap(aContainerID, aImageID) { + this.container = getAccessible(aContainerID); + this.imageMap = null; + this.imageMapNode = getNode(aImageID); + + function getImageMap(aThisObj) { + return aThisObj.imageMap; + } + + this.eventSeq = [ + new invokerChecker(EVENT_HIDE, getImageMap, this), + new invokerChecker(EVENT_REORDER, aContainerID), + ]; + + this.invoke = function hideImageMap_invoke() { + this.imageMap = getAccessible(this.imageMapNode); + this.imageMapNode.style.display = "none"; + }; + + this.finalCheck = function hideImageMap_finalCheck() { + var accTree = + { SECTION: [ ] }; + testAccessibleTree(this.container, accTree); + }; + + this.getID = function hideImageMap_getID() { + return "display:none image"; + }; + } + + // gA11yEventDumpToConsole = true; // debug stuff + function doPreTest() { + waitForImageMap("imgmap", doTest); + } + + var gQueue = null; + function doTest() { + gQueue = new eventQueue(); + + gQueue.push(new insertArea("imgmap", "map")); + gQueue.push(new appendArea("imgmap", "map")); + gQueue.push(new removeArea("imgmap", "map")); + gQueue.push(new removeNameOnMap("container", "imgmap", "map")); + gQueue.push(new restoreNameOnMap("container", "imgmap", "map")); + gQueue.push(new removeMap("container", "imgmap", "map")); + gQueue.push(new insertMap("container", "imgmap")); + gQueue.push(new hideImageMap("container", "imgmap")); + + // enableLogging("tree"); // debug stuff + // gQueue.onFinish = function() { disableLogging("tree"); } + + gQueue.invoke(); // Will call SimpleTest.finish(); + } + + SimpleTest.waitForExplicitFinish(); + addA11yLoadEvent(doPreTest); + </script> + +</head> +<body> + + <a target="_blank" + title="Image map accessible tree is not updated when image map is changed" + href="https://bugzilla.mozilla.org/show_bug.cgi?id=732389"> + Mozilla Bug 732389 + </a> + <p id="display"></p> + <div id="content" style="display: none"></div> + <pre id="test"> + </pre> + + <map name="atoz_map" id="map"> + <area href="http://www.bbc.co.uk/radio4/atoz/index.shtml#b" + coords="17,0,30,14" alt="b" shape="rect"> + </map> + + <div id="container"> + <img id="imgmap" width="447" height="15" + usemap="#atoz_map" + src="../letters.gif"><!-- + Important: no whitespace between the <img> and the </div>, so we + don't end up with textframes there, because those would be reflected + in our accessible tree in some cases. + --></div> + +</body> +</html> |