зеркало из https://github.com/mozilla/gecko-dev.git
400 строки
12 KiB
HTML
400 строки
12 KiB
HTML
<!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>
|