Refactoring: Pull all fullscreen code out of Document and into its own helper class
[WebKit-https.git] / LayoutTests / accessibility / aria-roles.html
1 <html>
2 <head>
3 <title>ARIA roles simple tests</title>
4 <style>
5     .newRole {
6         border: 2px solid blue;
7         background-color: lightblue;
8     }
9 </style>
10 </head>
11  
12 <body>
13 <script>
14     if (window.testRunner)
15         testRunner.dumpAsText();
16
17     function validateRole(aria, real, result) {
18         if (!window.accessibilityController)
19             return;
20         
21         aria.focus();
22         var ariaRole = accessibilityController.focusedElement.role;
23         
24         real.focus();
25         var realRole = accessibilityController.focusedElement.role;
26        
27         if (ariaRole == realRole)
28             result.innerText = "This test PASSES in DumpRenderTree. The role is " + ariaRole;
29         else
30             result.innerText = "This test FAILS in DumpRenderTree. The ARIA role is " + ariaRole + ", but the real role is "
31                 + realRole;
32     }
33 </script>
34
35   <!--Checkbox-->
36   <div class="newRole">
37     <p>The following should be a checkbox:</p>
38     <p><span tabindex="0" role="checkbox" id="ariaCheckBox">X</span></p>
39     <p>Actual checkboxes:</p>
40     <form>
41         <input type="checkbox" name="broccoli" id="realCheckBox">Broccoli<br>
42         <input type="checkbox" name="asparagus">Asparagus<br>
43     </form>
44     <span id="resultCheckBox"></span>
45     <script>
46         validateRole(document.getElementById('ariaCheckBox'),
47             document.getElementById('realCheckBox'),
48             document.getElementById('resultCheckBox'));
49     </script>
50   </div>
51   <br/>
52   
53   <!--Button-->
54   <div class="newRole">
55     <p>The following should be a button:</p>
56     <p><span tabindex="0" role="button" id="ariaButton">X</span></p>
57     <p>Actual button:</p>
58     <button id="realButton">Hello</button>
59     <span id="resultButton"></span>
60     <script>
61         validateRole(document.getElementById('ariaButton'),
62             document.getElementById('realButton'),
63             document.getElementById('resultButton'));
64     </script>
65   </div>
66   <br/>
67
68   <!--Heading-->
69   <div class="newRole">
70     <p>The following should be a heading:</p>
71     <p><span tabindex="0" role="heading" id="ariaHeading">X</span></p>
72     <p>Actual heading:</p>
73     <h1 id="realHeading">Hello</h1>
74     <span id="resultHeading"></span>
75     <script>
76         validateRole(document.getElementById('ariaHeading'),
77             document.getElementById('realHeading'),
78             document.getElementById('resultHeading'));
79     </script>
80   </div>
81   <br/>
82     
83   <!--Link-->
84   <div class="newRole">
85     <p>The following should be a link:</p>
86     <p><span tabindex="0" role="link" id="ariaLink">X</span></p>
87     <p>Actual link:</p>
88     <a href="/" id="realLink">Hello</a>
89     <span id="resultLink"></span>
90     <script>
91         validateRole(document.getElementById('ariaLink'),
92             document.getElementById('realLink'),
93             document.getElementById('resultLink'));
94     </script>
95   </div>
96   <br/>
97
98   <!--Radio-->
99   <div class="newRole">
100     <p>The following should be a radio button:</p>
101     <p><span tabindex="0" role="radio" id="ariaRadio">X</span></p>
102     <p>Actual radio buttons:</p>
103     <form>
104         <input type="radio" name="broccoli" id="realRadio">Broccoli<br>
105         <input type="radio" name="asparagus">Asparagus<br>
106     </form>
107     <span id="resultRadio"></span>
108     <script>
109         validateRole(document.getElementById('ariaRadio'),
110             document.getElementById('realRadio'),
111             document.getElementById('resultRadio'));
112     </script>
113   </div>
114   <br/>
115
116   <!--Textbox-->
117   <div class="newRole">
118     <p>The following should be a text box:</p>
119     <p><span tabindex="0" role="textbox" id="ariaTextBox">X</span></p>
120     <p>Actual text box:</p>
121     <input type="text" id="realTextBox"></input>
122     <span id="resultTextBox"></span>
123     <script>
124         validateRole(document.getElementById('ariaTextBox'),
125             document.getElementById('realTextBox'),
126             document.getElementById('resultTextBox'));
127     </script>
128   </div>
129   <br/>
130   
131   <!--Image-->
132   <div class="newRole">
133     <p>The following should be an image:</p>
134     <p><span tabindex="0" role="img" alt="Hello" id="ariaImage">X</span></p>
135     <p>Actual image:</p>
136     <img src="resources/cake.png" alt="Giant cupcake" tabindex="0" id="realImage"></img>
137     <span id="resultImage"></span>
138     <script>
139         validateRole(document.getElementById('ariaImage'),
140             document.getElementById('realImage'),
141             document.getElementById('resultImage'));
142     </script>
143   </div>
144   <br/>
145   
146   <!--List-->
147   <div class="newRole">
148     <p>The following should be a list:</p>
149     <p><span tabindex="0" role="list" id="ariaList"><span role="listitem">X</span></span></p>
150     <p>Actual list:</p>
151     <ul id="realList">
152         <li>Broccoli</li>
153         <li>Beets</li>
154     </ul>
155     <span id="resultList"></span>
156     <script>
157         validateRole(document.getElementById('ariaList'),
158             document.getElementById('realList'),
159             document.getElementById('resultList'));
160     </script>
161   </div>
162   <br/>
163
164  </body>
165 </html>