accessible/tests/mochitest/states/test_inputs.html

branch
TOR_BUG_9701
changeset 14
925c144e1f1f
equal deleted inserted replaced
-1:000000000000 0:6d245e39ec1b
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>HTML input states</title>
5 <link rel="stylesheet" type="text/css"
6 href="chrome://mochikit/content/tests/SimpleTest/test.css" />
7
8 <script type="application/javascript"
9 src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
10
11 <script type="application/javascript"
12 src="../common.js"></script>
13 <script type="application/javascript"
14 src="../role.js"></script>
15 <script type="application/javascript"
16 src="../states.js"></script>
17
18 <script type="application/javascript">
19 function doTest()
20 {
21 ////////////////////////////////////////////////////////////////////////////
22 // 'editable' and 'multiline' states.
23 testStates("input", 0, EXT_STATE_EDITABLE, 0, EXT_STATE_MULTI_LINE);
24 testStates("textarea", 0, EXT_STATE_EDITABLE | EXT_STATE_MULTI_LINE);
25
26 testStates("input_readonly", 0, EXT_STATE_EDITABLE);
27 testStates("input_disabled", 0, EXT_STATE_EDITABLE);
28 testStates("textarea_readonly", 0, EXT_STATE_EDITABLE);
29 testStates("textarea_disabled", 0, EXT_STATE_EDITABLE);
30
31 ////////////////////////////////////////////////////////////////////////////
32 // 'required', 'readonly' and 'unavailable' states.
33 var maybe_required = ["input","search","radio","checkbox","textarea"];
34 var never_required = ["submit","button","reset","image"];
35
36 var i;
37 for (i in maybe_required) {
38 testStates(maybe_required[i],
39 STATE_FOCUSABLE, 0,
40 STATE_REQUIRED | STATE_READONLY | STATE_UNAVAILABLE);
41
42 testStates(maybe_required[i] + "_required",
43 STATE_FOCUSABLE | STATE_REQUIRED, 0,
44 STATE_UNAVAILABLE | STATE_READONLY);
45
46 var readonlyID = maybe_required[i] + "_readonly";
47 if (document.getElementById(readonlyID)) {
48 testStates(readonlyID,
49 STATE_FOCUSABLE | STATE_READONLY, 0,
50 STATE_UNAVAILABLE | STATE_REQUIRED);
51 }
52
53 testStates(maybe_required[i] + "_disabled",
54 STATE_UNAVAILABLE, 0,
55 STATE_FOCUSABLE | STATE_READONLY | STATE_REQUIRED);
56 }
57
58 for (i in never_required) {
59 testStates(never_required[i], 0, 0, STATE_REQUIRED | EXT_STATE_EDITABLE);
60 }
61
62 ////////////////////////////////////////////////////////////////////////////
63 // inherited 'unavailable' state
64 testStates("f", STATE_UNAVAILABLE);
65 testStates("f_input", STATE_UNAVAILABLE);
66 testStates("f_input_disabled", STATE_UNAVAILABLE);
67
68 ////////////////////////////////////////////////////////////////////////////
69 // inherited from file control
70 var fileBrowseButton = getAccessible("file").firstChild;
71 testStates(fileBrowseButton, STATE_UNAVAILABLE | STATE_REQUIRED);
72 // No states on the label.
73
74 ////////////////////////////////////////////////////////////////////////////
75 // 'invalid' state
76
77 // XXX: maxlength doesn't make the element invalid until bug 613016 and
78 // bug 613019 are fixed. Commenting out related lines and adding a todo to
79 // make sure it will be uncommented as soon as possible.
80 var todoInput = document.createElement("input");
81 todoInput.maxLength = '2';
82 todoInput.value = 'foo';
83 todo(!todoInput.validity.valid,
84 "input should be invalid because of maxlength");
85
86 // invalid/valid state
87 //var invalid = ["maxlength","pattern","email","url"];
88 //document.getElementById("maxlength").value = "i am too long";
89 var invalid = ["pattern","email","url"];
90 for (i in invalid) {
91 testStates(invalid[i], STATE_INVALID);
92 testStates(invalid[i] + "2", 0, 0, STATE_INVALID);
93 }
94
95 // invalid/valid state
96 //var invalid = ["maxlength","pattern","email","url"];
97 //document.getElementById("maxlength").value = "i am too long";
98 var invalid = ["pattern","email","url"];
99 for (i in invalid) {
100 testStates(invalid[i], STATE_INVALID);
101 testStates(invalid[i] + "2", 0, 0, STATE_INVALID);
102 }
103
104 ////////////////////////////////////////////////////////////////////////////
105 // autocomplete states
106 testStates("autocomplete-default", 0, EXT_STATE_SUPPORTS_AUTOCOMPLETION);
107 testStates("autocomplete-off", 0, 0, 0, EXT_STATE_SUPPORTS_AUTOCOMPLETION);
108 testStates("autocomplete-formoff", 0, 0, 0, EXT_STATE_SUPPORTS_AUTOCOMPLETION);
109 testStates("autocomplete-list", 0, EXT_STATE_SUPPORTS_AUTOCOMPLETION);
110 testStates("autocomplete-list2", 0, EXT_STATE_SUPPORTS_AUTOCOMPLETION);
111 testStates("autocomplete-tel", 0, EXT_STATE_SUPPORTS_AUTOCOMPLETION);
112 testStates("autocomplete-email", 0, EXT_STATE_SUPPORTS_AUTOCOMPLETION);
113 testStates("autocomplete-search", 0, EXT_STATE_SUPPORTS_AUTOCOMPLETION);
114
115 ////////////////////////////////////////////////////////////////////////////
116 // haspopup
117 testStates("autocomplete-list", STATE_HASPOPUP);
118
119 SimpleTest.finish();
120 }
121
122 SimpleTest.waitForExplicitFinish();
123 addA11yLoadEvent(doTest);
124 </script>
125 </head>
126
127 <body>
128 <a target="_blank"
129 href="https://bugzilla.mozilla.org/show_bug.cgi?id=559275"
130 title="map attribute required to STATE_REQUIRED">
131 Bug 559275
132 </a>
133 <a target="_blank"
134 href="https://bugzilla.mozilla.org/show_bug.cgi?id=389238"
135 title="Support disabled state on fieldset">
136 Bug 389238
137 </a>
138 <a target="_blank"
139 href="https://bugzilla.mozilla.org/show_bug.cgi?id=599163"
140 title="check disabled state instead of attribute">
141 Bug 599163
142 </a>
143 <a target="_blank"
144 href="https://bugzilla.mozilla.org/show_bug.cgi?id=601205"
145 title="Expose intrinsic invalid state to accessibility API">
146 Bug 601205
147 </a>
148 <a target="_blank"
149 href="https://bugzilla.mozilla.org/show_bug.cgi?id=601205"
150 title="Expose intrinsic invalid state to accessibility API">
151 Bug 601205
152 </a>
153 <a target="_blank"
154 href="https://bugzilla.mozilla.org/show_bug.cgi?id=559766"
155 title="Add accessibility support for @list on HTML input and for HTML datalist">
156 Bug 559766
157 </a>
158 <a target="_blank"
159 href="https://bugzilla.mozilla.org/show_bug.cgi?id=699017"
160 title="File input control should be propogate states to descendants">
161 Bug 699017
162 </a>
163 <a target="_blank"
164 href="https://bugzilla.mozilla.org/show_bug.cgi?id=733382"
165 title="Editable state bit should be present on readonly inputs">
166 Bug 733382
167 </a>
168 <a target="_blank"
169 href="https://bugzilla.mozilla.org/show_bug.cgi?id=878590"
170 title="HTML5 datalist is not conveyed by haspopup property">
171 Bug 878590
172 </a>
173
174 <p id="display"></p>
175 <div id="content" style="display: none"></div>
176 <pre id="test">
177 </pre>
178
179
180 <form>
181 <input id="input" type="input">
182 <input id="input_required" type="input" required>
183 <input id="input_readonly" type="input" readonly>
184 <input id="input_disabled" type="input" disabled>
185 <input id="search" type="search">
186 <input id="search_required" type="search" required>
187 <input id="search_readonly" type="search" readonly>
188 <input id="search_disabled" type="search" disabled>
189 <input id="radio" type="radio">
190 <input id="radio_required" type="radio" required>
191 <input id="radio_disabled" type="radio" disabled>
192 <input id="checkbox" type="checkbox">
193 <input id="checkbox_required" type="checkbox" required>
194 <input id="checkbox_disabled" type="checkbox" disabled>
195 <textarea id="textarea"></textarea>
196 <textarea id="textarea_required" required></textarea>
197 <textarea id="textarea_readonly" readonly></textarea>
198 <textarea id="textarea_disabled" disabled></textarea>
199 </form>
200
201 <!-- bogus required usage -->
202 <input id="submit" type="submit" required>
203 <input id="button" type="button" required>
204 <input id="reset" type="reset" required>
205 <input id="image" type="image" required>
206
207 <!-- inherited disabled -->
208 <fieldset id="f" disabled>
209 <input id="f_input">
210 <input id="f_input_disabled" disabled>
211 </fieldset>
212
213 <!-- inherited from input@type="file" -->
214 <input id="file" type="file" required disabled>
215
216 <!-- invalid/valid -->
217 <input id="maxlength" maxlength="1">
218 <input id="maxlength2" maxlength="100" value="foo">
219 <input id="pattern" pattern="bar" value="foo">
220 <input id="pattern2" pattern="bar" value="bar">
221 <input id="email" type="email" value="foo">
222 <input id="email2" type="email" value="foo@bar.com">
223 <input id="url" type="url" value="foo">
224 <input id="url2" type="url" value="http://mozilla.org/">
225
226 <!-- invalid/valid -->
227 <input id="maxlength" maxlength="1">
228 <input id="maxlength2" maxlength="100" value="foo">
229 <input id="pattern" pattern="bar" value="foo">
230 <input id="pattern2" pattern="bar" value="bar">
231 <input id="email" type="email" value="foo">
232 <input id="email2" type="email" value="foo@bar.com">
233 <input id="url" type="url" value="foo">
234 <input id="url2" type="url" value="http://mozilla.org/">
235
236 <!-- autocomplete -->
237 <input id="autocomplete-default">
238 <input id="autocomplete-off" autocomplete="off">
239 <form autocomplete="off">
240 <input id="autocomplete-formoff">
241 </form>
242 <datalist id="cities">
243 <option>Paris</option>
244 <option>San Francisco</option>
245 </datalist>
246 <input id="autocomplete-list" list="cities">
247 <input id="autocomplete-list2" list="cities" autocomplete="off">
248 <input id="autocomplete-tel" type="tel">
249
250 Email Address:
251 <input id="autocomplete-email" type="email" list="contacts" value="xyzzy">
252 <datalist id="contacts">
253 <option>xyzzy@plughs.com</option>
254 <option>nobody@mozilla.org</option>
255 </datalist>
256
257 </br>Search for:
258 <input id="autocomplete-search" type="search" list="searchhisty" value="Gamma">
259 <datalist id="searchhisty">
260 <option>Gamma Rays</option>
261 <option>Gamma Ray Bursts</option>
262 </datalist>
263
264 </body>
265 </html>

mercurial