Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
<!DOCTYPE html>
<html>
<head>
<title>Whitespace text accessible creation/destruction</title>
<link rel="stylesheet" type="text/css"
<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">
async function doTest() {
const tree3 = { SECTION: [ { role: ROLE_TEXT_LEAF, name: "x" } ] };
testAccessibleTree("container3", tree3);
getNode("c3_inner").style.textAlign = "center";
document.body.offsetTop; // Flush layout.
window.windowUtils.advanceTimeAndRefresh(100);
testAccessibleTree("container3", tree3);
window.windowUtils.restoreNormalRefresh();
/**
* Middle image accessible removal results in text accessible removal.
*
* Before:
* DOM: whitespace img1 whitespace img2 whitespace img3 whitespace,
* a11y: img1 whitespace img2 whitespace img3
* After:
* DOM: whitespace img1 whitespace whitespace img3 whitespace,
* a11y: img1 whitespace img3
*/
const containerNode1 = getNode("container1");
const imgNode = getNode("img1");
const img = getAccessible(imgNode);
const text = img.nextSibling;
let tree =
{ SECTION: [
{ GRAPHIC: [] },
{ TEXT_LEAF: [] },
{ GRAPHIC: [] },
{ TEXT_LEAF: [] },
{ GRAPHIC: [] },
] };
testAccessibleTree(containerNode1, tree);
let p = waitForEvents([[EVENT_HIDE, img],
[EVENT_HIDE, text],
[EVENT_REORDER, containerNode1]]);
containerNode1.removeChild(imgNode);
await p;
tree =
{ SECTION: [
{ GRAPHIC: [] },
{ TEXT_LEAF: [] },
{ GRAPHIC: [] },
] };
testAccessibleTree(containerNode1, tree);
/**
* Append image making the whitespace visible and thus accessible.
* Note: images and whitespaces are on different leves of accessible
* trees, so that image container accessible update doesn't update the
* tree of whitespace container.
*
* Before:
* DOM: whitespace emptylink whitespace linkwithimg whitespace
* a11y: emptylink linkwithimg
* After:
* DOM: whitespace linkwithimg whitespace linkwithimg whitespace
* a11y: linkwithimg whitespace linkwithimg
*/
const containerNode2 = getNode("container2");
const topNode = containerNode2.parentNode;
const textNode = containerNode2.nextSibling;
const newImgNode = document.createElement("img");
newImgNode.setAttribute("src", "../moz.png");
tree =
{ SECTION: [
{ LINK: [] },
{ LINK: [
{ GRAPHIC: [] },
] },
] };
testAccessibleTree(topNode, tree);
p = waitForEvents([[EVENT_SHOW, textNode], [EVENT_SHOW, newImgNode],
[EVENT_REORDER, topNode]]);
containerNode2.appendChild(newImgNode);
await p;
tree =
{ SECTION: [
{ LINK: [
{ GRAPHIC: [] },
] },
{ TEXT_LEAF: [] },
{ LINK: [
{ GRAPHIC: [] },
] },
] };
testAccessibleTree(topNode, tree);
SimpleTest.finish();
}
SimpleTest.waitForExplicitFinish();
addA11yLoadEvent(doTest);
</script>
</head>
<body>
<a target="_blank"
title="Make sure accessible tree is correct when rendered text is changed"
</a>
<p id="display"></p>
<div id="content" style="display: none"></div>
<pre id="test">
</pre>
<!-- Whitespace between the div and img tags will be inconsistent depending
on the image cache state and what optimizations layout was able to
apply. -->
<div id="container1"><img src="../moz.png"> <img id="img1" src="../moz.png"> <img src="../moz.png"></div>
<div><a id="container2" href=""></a> <a href=""><img src="../moz.png"></a></div>
<div id="container3">
<div id="c3_inner" role="presentation">
x<map> </map>
</div>
</div>
<div id="eventdump"></div>
</body>
</html>