187 lines
6.6 KiB
HTML
187 lines
6.6 KiB
HTML
<!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>
|
|
<path id="test1" aria-labelledby="t1" aria-label="down" d="M 100 100 L 300 100 L 200 300 z" fill="red" data-expected="role: img">
|
|
<title>abc</title>
|
|
<desc>down</desc>
|
|
</path>
|
|
<text id="t1" x="40" y="90">end</text>
|
|
</svg>
|
|
<svg>
|
|
<path id="test2" aria-labelledby="t2" aria-label="down" d="M 100 100 L 300 100 L 200 300 z" fill="red" data-expected="role: img">
|
|
<title>abc</title>
|
|
</path>
|
|
<text id="t2" x="40" y="90">end</text>
|
|
</svg>
|
|
<svg>
|
|
<path id="test3" aria-labelledby="t3" aria-label="down" d="M 100 100 L 300 100 L 200 300 z" fill="red" data-expected="role: img">
|
|
<desc>abc</desc>
|
|
</path>
|
|
<text id="t3" x="40" y="90">end</text>
|
|
</svg>
|
|
<svg>
|
|
<path id="test4" aria-labelledby="t4" aria-label="bob" d="M 100 100 L 300 100 L 200 300 z" fill="red" data-expected="role: img"/>
|
|
<text id="t4" x="40" y="90">end</text>
|
|
</svg>
|
|
<svg>
|
|
<path id="test5" aria-labelledby="t5" d="M 100 100 L 300 100 L 200 300 z" fill="red" data-expected="role: img">
|
|
<title>abc</title>
|
|
</path>
|
|
<text id="t5" x="40" y="90">end</text>
|
|
</svg>
|
|
<svg>
|
|
<path id="test6" aria-labelledby="t6" d="M 100 100 L 300 100 L 200 300 z" fill="red" data-expected="role: img">
|
|
<desc>abc</desc>
|
|
</path>
|
|
<text id="t6" x="40" y="90">end</text>
|
|
</svg>
|
|
<svg>
|
|
<path id="test7" aria-labelledby="t1" d="M 100 100 L 300 100 L 200 300 z" fill="red" data-expected="role: img"/>
|
|
<text id="t7" x="40" y="90">end</text>
|
|
</svg>
|
|
<svg>
|
|
<path id="test8" aria-label="hello" d="M 100 100 L 300 100 L 200 300 z" fill="red" data-expected="role: img">
|
|
<title>abc</title>
|
|
</path>
|
|
</svg>
|
|
<svg>
|
|
<path id="test9" aria-label="hello" d="M 100 100 L 300 100 L 200 300 z" fill="red" data-expected="role: img"/>
|
|
</svg>
|
|
<svg>
|
|
<path id="test10" d="M 100 100 L 300 100 L 200 300 z" fill="red" data-expected="role: img">
|
|
<title>abc</title>
|
|
</path>
|
|
</svg>
|
|
<svg>
|
|
<path id="test11" d="M 100 100 L 300 100 L 200 300 z" fill="red" data-expected="role: img">
|
|
<desc>abc</desc>
|
|
</path>
|
|
</svg>
|
|
<svg>
|
|
<circle id="test12" aria-labelledby="t12" aria-label="bob" cx="50" cy="100" r="4" data-expected="role: img">
|
|
<title>abc</title>
|
|
</circle>
|
|
<text id="t12" x="40" y="90">end</text>
|
|
</svg>
|
|
<svg>
|
|
<circle id="test13" aria-labelledby="t13" aria-label="bob" cx="50" cy="100" r="4" data-expected="role: img"/>
|
|
<text id="t13" x="40" y="90">end</text>
|
|
</svg>
|
|
<svg>
|
|
<circle id="test14" aria-labelledby="t14" cx="50" cy="100" r="4" data-expected="role: img">
|
|
<title>abc</title>
|
|
</circle>
|
|
<text id="t14" x="40" y="90">end</text>
|
|
</svg>
|
|
<svg>
|
|
<circle id="test15" aria-labelledby="t15" cx="50" cy="100" r="4" data-expected="role: img"/>
|
|
<text id="t15" x="40" y="90">end</text>
|
|
</svg>
|
|
<svg>
|
|
<circle id="test16" aria-label="hello" cx="10" cy="10" r="5" data-expected="role: img">
|
|
<title>abc</title>
|
|
</circle>
|
|
</svg>
|
|
<svg>
|
|
<circle id="test17" aria-label="hello" cx="10" cy="10" r="5" data-expected="role: img"/>
|
|
</svg>
|
|
<svg>
|
|
<circle id="test18" cx="10" cy="100" r="5" data-expected="role: img">
|
|
<title>abc</title>
|
|
</circle>
|
|
</svg>
|
|
<svg>
|
|
<rect id="test19" aria-label="hello" x="10" y="10" width="50" height="30" data-expected="role: img"/>
|
|
</svg>
|
|
<svg>
|
|
<ellipse id="test20" cx="10" cy="100" rx="25" ry="15" data-expected="role: img">
|
|
<title>abc</title>
|
|
</ellipse>
|
|
</svg>
|
|
<svg>
|
|
<line id="test21" aria-label="hello" x1="10" y1="10" x2="50" y2="10" data-expected="role: img"/>
|
|
</svg>
|
|
<svg>
|
|
<polyline id="test22" 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" data-expected="role: img"/>
|
|
</svg>
|
|
<svg>
|
|
<polygon id="test23" fill="magenta" points="850,75 958,137.5 958,262.5 850,325 742,262.6 742,137.5" data-expected="role: img">
|
|
<desc>built up area</desc>
|
|
</polygon>
|
|
</svg>
|
|
<svg>
|
|
<foreignObject id="test24" width="100" height="50" aria-label="word wrap example" data-expected="role: group">
|
|
<body xmlns="http://www.w3.org/1999/xhtml">Here is a paragraph that requires word wrap</body>
|
|
</foreignObject>
|
|
</svg>
|
|
<svg>
|
|
<g id="test25" data-expected="role: group">
|
|
<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="test26" x="200" y="200" width="100px" height="100px" href="myimage.png" data-expected="role: img">
|
|
<title>My image</title>
|
|
</image>
|
|
</svg>
|
|
<svg id="test27" width="4in" height="3in" xmlns="http://www.w3.org/2000/svg" data-expected="role: group">
|
|
<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="MyRect28" width="60" height="10"/>
|
|
</defs>
|
|
<use id="test28" x="20" y="10" href="#MyRect28" aria-label="black bar" data-expected="role: img"/>
|
|
</svg>
|
|
<svg>
|
|
<text id="test29" x="250" y="180" font-family="Verdana" font-size="64" fill="blue" data-expected="role: group">Hello, out there!</text>
|
|
</svg>
|
|
<svg>
|
|
<text transform="rotate(45)">
|
|
<textPath id="test30" href="#path1" data-expected="role: group">Text on a path1</textPath>
|
|
</text>
|
|
</svg>
|
|
<svg>
|
|
<text x="100" y="180" fill="blue" >But you
|
|
<tspan id="test31" dx="2em" dy="-50" font-weight="bold" fill="red" tabindex="0" data-expected="role: group"> are a peach </tspan>
|
|
</text>
|
|
</svg>
|
|
<svg>
|
|
<text x="100" y="180" fill="blue" >But you
|
|
<tspan id="test32" dx="2em" dy="-50" font-weight="bold" fill="red" data-expected="(not exposed)"> are a peach </tspan>
|
|
</text>
|
|
</svg>
|
|
</div>
|
|
<p id="description"></p>
|
|
<div id="console"></div>
|
|
<script>
|
|
description("This tests the exposure and role mapping of SVG path elements with properties requiring exposure.");
|
|
if (window.accessibilityController) {
|
|
var platform = accessibilityController.platformName;
|
|
for (var i = 1; i <= 32; i++) {
|
|
var element = document.getElementById("test" + i);
|
|
var axElement = accessibilityController.accessibleElementById("test" + i);
|
|
if (axElement)
|
|
result = axElement.role;
|
|
else
|
|
result = "Element not exposed";
|
|
debug("test" + i + ":\n\tExpected " + element.getAttribute("data-expected") + "\n\t" + result);
|
|
}
|
|
document.getElementById("content").style.visibility = "hidden";
|
|
}
|
|
</script>
|
|
<script src="../resources/js-test-post.js"></script>
|
|
</body>
|
|
</html>
|
|
|