The Tor Browser / file comparison
comparison: accessible/tests/mochitest/states/test_inputs.html
accessible/tests/mochitest/states/test_inputs.html
- changeset 0
- 6474c204b198
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> |
