AX: Update handling of SVG elements with presentational role
[WebKit-https.git] / LayoutTests / accessibility / w3c-svg-presentational-role.html
1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
2 <html>
3 <head>
4 <script src="../resources/js-test-pre.js"></script>
5 </head>
6 <body id="body">
7 <div id="content">
8 <svg>
9   <foreignObject id="test1" role="presentation" width="100" height="50" aria-label="word wrap example">
10     <body xmlns="http://www.w3.org/1999/xhtml">Here is a paragraph that requires word wrap</body>
11   </foreignObject>
12 </svg>
13 <svg>
14   <g id="test2" role="presentation">
15     <title>Venn Diagram</title>
16     <circle cx="50" cy="50" r="20" aria-label="set A"/>
17     <circle cx="50" cy="75" r="20" aria-label="set B"/>
18   </g>
19 </svg>
20 <svg>
21   <image id="test3" x="200" y="200" width="100px" height="100px" href="myimage.png" role="presentation">
22     <title>My image</title>
23   </image>
24 </svg>
25 <svg id="test4" width="4in" height="3in" xmlns="http://www.w3.org/2000/svg" role="presentation">
26   <desc>This graphic links to an external image</desc>
27   <image x="200" y="200" width="100px" height="100px" href="myimage.png">
28     <title>My image</title>
29   </image>
30 </svg>
31 <svg>
32   <defs>
33     <rect id="MyRect5" width="60" height="10"/>
34   </defs>
35   <use id="test5" role="presentation" x="20" y="10" href="#MyRect5" aria-label="black bar"/>
36 </svg>
37 <svg>
38   <path id="test6" d="M 100 100 L 300 100 L 200 300 z" fill="red" role="presentation" ><desc>abc</desc></path>
39 </svg>
40 <svg>
41   <rect id="test7" aria-label="hello" x="10" y="10" width="50" height="30" role="presentation"/>
42 </svg>
43 <svg>
44   <ellipse id="test8" cx="10" cy="100" rx="25" ry="15" role="presentation">
45     <title>abc</title>
46   </ellipse>
47 </svg>
48 <svg>
49   <line id="test9" aria-label="hello" x1="10" y1="10" x2="50" y2="10" role="presentation"/>
50 </svg>
51 <svg>
52   <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"/>
53 </svg>
54 <svg>
55   <polygon id="test11" fill="magenta" points="850,75 958,137.5 958,262.5 850,325 742,262.6 742,137.5" role="presentation">
56     <desc>built up area</desc>
57   </polygon>
58 </svg>
59 <svg>
60   <text id="test12" x="250" y="180" font-family="Verdana" font-size="64" fill="blue" role="presentation">Hello, out there!</text>
61 </svg>
62 <svg>
63   <text transform="rotate(45)" role="presentation">
64     <textPath id="test13" href="#path13">Text on a path</textPath>
65   </text>
66 </svg>
67 <svg>
68   <text x="100" y="180" fill="blue" role="presentation">But you
69     <tspan id="test14" dx="2em" dy="-50" font-weight="bold" fill="red"> are a peach </tspan>
70   </text>
71 </svg>
72 <svg>
73   <foreignObject id="test15" role="none" width="100" height="50" aria-label="word wrap example">
74     <body xmlns="http://www.w3.org/1999/xhtml">Here is a paragraph that requires word wrap</body>
75   </foreignObject>
76 </svg>
77 <svg>
78   <g id="test16" role="none">
79     <title>Venn Diagram</title>
80     <circle cx="50" cy="50" r="20" aria-label="set A"/>
81     <circle cx="50" cy="75" r="20" aria-label="set B"/>
82   </g>
83 </svg>
84 <svg>
85   <image id="test17" x="200" y="200" width="100px" height="100px" href="myimage.png" role="none">
86     <title>My image</title>
87   </image>
88 </svg>
89 <svg id="test18" width="4in" height="3in" xmlns="http://www.w3.org/2000/svg" role="none">
90   <desc>This graphic links to an external image</desc>
91   <image x="200" y="200" width="100px" height="100px" href="myimage.png">
92     <title>My image</title>
93   </image>
94 </svg>
95 <svg>
96   <defs>
97     <rect id="MyRect19" width="60" height="10"/>
98   </defs>
99   <use id="test19" role="none" x="20" y="10" href="#MyRect19" aria-label="black bar"/>
100 </svg>
101 <svg>
102   <path id="test20" d="M 100 100 L 300 100 L 200 300 z" fill="red" role="none" ><desc>abc</desc></path>
103 </svg>
104 <svg>
105   <rect id="test21" aria-label="hello" x="10" y="10" width="50" height="30" role="none"/>
106 </svg>
107 <svg>
108   <ellipse id="test22" cx="10" cy="100" rx="25" ry="15" role="none">
109     <title>abc</title>
110   </ellipse>
111 </svg>
112 <svg>
113   <line id="test23" aria-label="hello" x1="10" y1="10" x2="50" y2="10" role="none"/>
114 </svg>
115 <svg>
116   <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"/>
117 </svg>
118 <svg>
119   <polygon id="test25" fill="magenta" points="850,75 958,137.5 958,262.5 850,325 742,262.6 742,137.5" role="none">
120     <desc>built up area</desc>
121   </polygon>
122 </svg>
123 <svg>
124   <text id="test26" x="250" y="180" font-family="Verdana" font-size="64" fill="blue" role="none">Hello, out there!</text>
125 </svg>
126 <svg>
127   <text transform="rotate(45)" role="none">
128     <textPath id="test27" href="#path27">Text on a path</textPath>
129   </text>
130 </svg>
131 <svg>
132   <text x="100" y="180" fill="blue" role="none">But you
133     <tspan id="test28" dx="2em" dy="-50" font-weight="bold" fill="red"> are a peach </tspan>
134   </text>
135 </svg>
136 <svg>
137   <foreignObject id="test29" role="none" width="100" height="50">
138     <body xmlns="http://www.w3.org/1999/xhtml">Here is a paragraph that requires word wrap</body>
139   </foreignObject>
140 </svg>
141 <svg>
142   <g id="test30" role="none">
143     <circle cx="50" cy="50" r="20" aria-label="set A"/>
144     <circle cx="50" cy="75" r="20" aria-label="set B"/>
145   </g>
146 </svg>
147 <svg>
148   <image id="test31" x="200" y="200" width="100px" height="100px" href="myimage.png" role="none"></image>
149 </svg>
150 <svg>
151   <rect id="test32" x="10" y="10" width="50" height="30" role="presentation"/>
152 </svg>
153 <svg>
154   <line id="test33" x1="10" y1="10" x2="50" y2="10" role="presentation"/>
155 </svg>
156 <svg>
157   <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"/>
158 </svg>
159 </div>
160 <p id="description"></p>
161 <div id="console"></div>
162 <script>
163     description("This tests that SVG elements with role presentation are not exposed.");
164     if (window.accessibilityController) {
165         for (var i = 1; i <= 34; i++) {
166             var element = document.getElementById("test" + i);
167             var axElement = accessibilityController.accessibleElementById("test" + i);
168             debug("test" + i + ": " + (axElement ? axElement.role : "Element not exposed"));
169         }
170         document.getElementById("content").style.visibility = "hidden";
171     }
172 </script>
173 <script src="../resources/js-test-post.js"></script>
174 </body>
175 </html>
176