blob: 13880efbe7732b4040ba815352d951d421282c04 [file] [log] [blame]
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../resources/js-test-pre.js"></script>
</head>
<body id="body">
<div id="content">
<svg>
<foreignObject id="test1" role="presentation" width="100" height="50" aria-label="word wrap example">
<body xmlns="http://www.w3.org/1999/xhtml">Here is a paragraph that requires word wrap</body>
</foreignObject>
</svg>
<svg>
<g id="test2" role="presentation">
<title>Venn Diagram</title>
<circle cx="50" cy="50" r="20" aria-label="set A"/>
<circle cx="50" cy="75" r="20" aria-label="set B"/>
</g>
</svg>
<svg>
<image id="test3" x="200" y="200" width="100px" height="100px" href="myimage.png" role="presentation">
<title>My image</title>
</image>
</svg>
<svg id="test4" width="4in" height="3in" xmlns="http://www.w3.org/2000/svg" role="presentation">
<desc>This graphic links to an external image</desc>
<image x="200" y="200" width="100px" height="100px" href="myimage.png">
<title>My image</title>
</image>
</svg>
<svg>
<defs>
<rect id="MyRect5" width="60" height="10"/>
</defs>
<use id="test5" role="presentation" x="20" y="10" href="#MyRect5" aria-label="black bar"/>
</svg>
<svg>
<path id="test6" d="M 100 100 L 300 100 L 200 300 z" fill="red" role="presentation" ><desc>abc</desc></path>
</svg>
<svg>
<rect id="test7" aria-label="hello" x="10" y="10" width="50" height="30" role="presentation"/>
</svg>
<svg>
<ellipse id="test8" cx="10" cy="100" rx="25" ry="15" role="presentation">
<title>abc</title>
</ellipse>
</svg>
<svg>
<line id="test9" aria-label="hello" x1="10" y1="10" x2="50" y2="10" role="presentation"/>
</svg>
<svg>
<polyline id="test10" aria-label="hello" fill="presentation" stroke="blue" stroke-width="10" points="50,375 150,375 150,325 250,325 250,375 350,375 350,250 450,250 450,375 550,375 550,175 650,175 650,375 750,375 750,100 850,100 850,375 950,375 950,25 1050,25 1050,375 1150,375" role="presentation"/>
</svg>
<svg>
<polygon id="test11" fill="magenta" points="850,75 958,137.5 958,262.5 850,325 742,262.6 742,137.5" role="presentation">
<desc>built up area</desc>
</polygon>
</svg>
<svg>
<text id="test12" x="250" y="180" font-family="Verdana" font-size="64" fill="blue" role="presentation">Hello, out there!</text>
</svg>
<svg>
<text transform="rotate(45)" role="presentation">
<textPath id="test13" href="#path13">Text on a path</textPath>
</text>
</svg>
<svg>
<text x="100" y="180" fill="blue" role="presentation">But you
<tspan id="test14" dx="2em" dy="-50" font-weight="bold" fill="red"> are a peach </tspan>
</text>
</svg>
<svg>
<foreignObject id="test15" role="none" width="100" height="50" aria-label="word wrap example">
<body xmlns="http://www.w3.org/1999/xhtml">Here is a paragraph that requires word wrap</body>
</foreignObject>
</svg>
<svg>
<g id="test16" role="none">
<title>Venn Diagram</title>
<circle cx="50" cy="50" r="20" aria-label="set A"/>
<circle cx="50" cy="75" r="20" aria-label="set B"/>
</g>
</svg>
<svg>
<image id="test17" x="200" y="200" width="100px" height="100px" href="myimage.png" role="none">
<title>My image</title>
</image>
</svg>
<svg id="test18" width="4in" height="3in" xmlns="http://www.w3.org/2000/svg" role="none">
<desc>This graphic links to an external image</desc>
<image x="200" y="200" width="100px" height="100px" href="myimage.png">
<title>My image</title>
</image>
</svg>
<svg>
<defs>
<rect id="MyRect19" width="60" height="10"/>
</defs>
<use id="test19" role="none" x="20" y="10" href="#MyRect19" aria-label="black bar"/>
</svg>
<svg>
<path id="test20" d="M 100 100 L 300 100 L 200 300 z" fill="red" role="none" ><desc>abc</desc></path>
</svg>
<svg>
<rect id="test21" aria-label="hello" x="10" y="10" width="50" height="30" role="none"/>
</svg>
<svg>
<ellipse id="test22" cx="10" cy="100" rx="25" ry="15" role="none">
<title>abc</title>
</ellipse>
</svg>
<svg>
<line id="test23" aria-label="hello" x1="10" y1="10" x2="50" y2="10" role="none"/>
</svg>
<svg>
<polyline id="test24" aria-label="hello" fill="none" stroke="blue" stroke-width="10" points="50,375 150,375 150,325 250,325 250,375 350,375 350,250 450,250 450,375 550,375 550,175 650,175 650,375 750,375 750,100 850,100 850,375 950,375 950,25 1050,25 1050,375 1150,375" role="none"/>
</svg>
<svg>
<polygon id="test25" fill="magenta" points="850,75 958,137.5 958,262.5 850,325 742,262.6 742,137.5" role="none">
<desc>built up area</desc>
</polygon>
</svg>
<svg>
<text id="test26" x="250" y="180" font-family="Verdana" font-size="64" fill="blue" role="none">Hello, out there!</text>
</svg>
<svg>
<text transform="rotate(45)" role="none">
<textPath id="test27" href="#path27">Text on a path</textPath>
</text>
</svg>
<svg>
<text x="100" y="180" fill="blue" role="none">But you
<tspan id="test28" dx="2em" dy="-50" font-weight="bold" fill="red"> are a peach </tspan>
</text>
</svg>
<svg>
<foreignObject id="test29" role="none" width="100" height="50">
<body xmlns="http://www.w3.org/1999/xhtml">Here is a paragraph that requires word wrap</body>
</foreignObject>
</svg>
<svg>
<g id="test30" role="none">
<circle cx="50" cy="50" r="20" aria-label="set A"/>
<circle cx="50" cy="75" r="20" aria-label="set B"/>
</g>
</svg>
<svg>
<image id="test31" x="200" y="200" width="100px" height="100px" href="myimage.png" role="none"></image>
</svg>
<svg>
<rect id="test32" x="10" y="10" width="50" height="30" role="presentation"/>
</svg>
<svg>
<line id="test33" x1="10" y1="10" x2="50" y2="10" role="presentation"/>
</svg>
<svg>
<polyline id="test34" fill="presentation" stroke="blue" stroke-width="10" points="50,375 150,375 150,325 250,325 250,375 350,375 350,250 450,250 450,375 550,375 550,175 650,175 650,375 750,375 750,100 850,100 850,375 950,375 950,25 1050,25 1050,375 1150,375" role="presentation"/>
</svg>
<svg>
<g id="test35" role="presentation">
<circle cx="50" cy="50" r="20" aria-label="set A"/>
<circle cx="50" cy="75" r="20" aria-label="set B"/>
</g>
</svg>
<svg>
<image id="test36" x="200" y="200" width="100px" height="100px" href="myimage.png" role="presentation"></image>
</svg>
<svg>
<path id="test37" d="M 100 100 L 300 100 L 200 300 z" fill="red" role="presentation"></path>
</svg>
<svg>
<ellipse id="test38" cx="10" cy="100" rx="25" ry="15" role="presentation"></ellipse>
</svg>
<svg>
<polygon id="test39" fill="magenta" points="850,75 958,137.5 958,262.5 850,325 742,262.6 742,137.5" role="presentation">
</polygon>
</svg>
</div>
<p id="description"></p>
<div id="console"></div>
<script>
description("This tests that SVG elements with role presentation are not exposed.");
if (window.accessibilityController) {
for (var i = 1; i <= 39; i++) {
var element = document.getElementById("test" + i);
var axElement = accessibilityController.accessibleElementById("test" + i);
debug("test" + i + ": " + (axElement ? axElement.role : "Element not exposed"));
}
document.getElementById("content").style.visibility = "hidden";
}
</script>
<script src="../resources/js-test-post.js"></script>
</body>
</html>