test_inputs.html (9988B)
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 src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 9 <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.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 // 'editable' and 'multiline' states. 22 testStates("input", 0, EXT_STATE_EDITABLE, 0, EXT_STATE_MULTI_LINE); 23 testStates("textarea", 0, EXT_STATE_EDITABLE | EXT_STATE_MULTI_LINE); 24 25 testStates("input_readonly", 0, EXT_STATE_EDITABLE); 26 testStates("input_disabled", 0, EXT_STATE_EDITABLE); 27 testStates("textarea_readonly", 0, EXT_STATE_EDITABLE); 28 testStates("textarea_disabled", 0, EXT_STATE_EDITABLE); 29 30 // ////////////////////////////////////////////////////////////////////////// 31 // 'required', 'readonly' and 'unavailable' states. 32 var maybe_required = ["input", "search", "radio", "checkbox", "textarea"]; 33 var never_required = ["submit", "button", "reset", "image"]; 34 35 var i; 36 for (i in maybe_required) { 37 testStates(maybe_required[i], 38 STATE_FOCUSABLE, 0, 39 STATE_REQUIRED | STATE_READONLY | STATE_UNAVAILABLE); 40 41 testStates(maybe_required[i] + "_required", 42 STATE_FOCUSABLE | STATE_REQUIRED, 0, 43 STATE_UNAVAILABLE | STATE_READONLY); 44 45 var readonlyID = maybe_required[i] + "_readonly"; 46 if (document.getElementById(readonlyID)) { 47 testStates(readonlyID, 48 STATE_FOCUSABLE | STATE_READONLY, 0, 49 STATE_UNAVAILABLE | STATE_REQUIRED); 50 } 51 52 testStates(maybe_required[i] + "_disabled", 53 STATE_UNAVAILABLE, 0, 54 STATE_FOCUSABLE | STATE_READONLY | STATE_REQUIRED); 55 } 56 57 for (i in never_required) { 58 testStates(never_required[i], 0, 0, STATE_REQUIRED | EXT_STATE_EDITABLE); 59 } 60 61 // ////////////////////////////////////////////////////////////////////////// 62 // inherited 'unavailable' state 63 testStates("f", STATE_UNAVAILABLE); 64 testStates("f_input", STATE_UNAVAILABLE); 65 testStates("f_input_disabled", STATE_UNAVAILABLE); 66 67 // ////////////////////////////////////////////////////////////////////////// 68 // file control 69 var fileBrowseButton = getAccessible("file"); 70 testStates(fileBrowseButton, STATE_UNAVAILABLE | STATE_REQUIRED); 71 72 // ////////////////////////////////////////////////////////////////////////// 73 // 'invalid' state 74 var invalid = ["pattern", "email", "url"]; 75 for (i in invalid) { 76 testStates(invalid[i], STATE_INVALID); 77 testStates(invalid[i] + "2", 0, 0, STATE_INVALID); 78 } 79 80 // ////////////////////////////////////////////////////////////////////////// 81 // not 'invalid' state 82 // (per spec, min/maxlength are always valid until interactively edited) 83 var validInput = document.createElement("input"); 84 validInput.maxLength = "0"; 85 validInput.value = "a"; 86 ok(validInput.validity.valid, 87 "input should be valid despite maxlength (no interactive edits)"); 88 89 var validInput2 = document.createElement("input"); 90 validInput2.minLength = "1"; 91 validInput2.value = ""; 92 ok(validInput2.validity.valid, 93 "input should be valid despite minlength (no interactive edits)"); 94 95 var valid = ["minlength", "maxlength"]; 96 for (i in valid) { 97 testStates(valid[i], 0, 0, STATE_INVALID); 98 testStates(valid[i] + "2", 0, 0, STATE_INVALID); 99 } 100 101 // ////////////////////////////////////////////////////////////////////////// 102 // 'invalid' state 103 // (per spec, min/maxlength validity is affected by interactive edits) 104 var mininp = document.getElementById("minlength"); 105 mininp.focus(); 106 mininp.setSelectionRange(mininp.value.length, mininp.value.length); 107 synthesizeKey("KEY_Backspace"); 108 ok(!mininp.validity.valid, 109 "input should be invalid after interactive edits"); 110 testStates(mininp, STATE_INVALID); 111 // inputs currently cannot be made longer than maxlength interactively, 112 // so we're not testing that case. 113 114 // ////////////////////////////////////////////////////////////////////////// 115 // autocomplete states 116 testStates("autocomplete-default", 0, EXT_STATE_SUPPORTS_AUTOCOMPLETION); 117 testStates("autocomplete-off", 0, 0, 0, EXT_STATE_SUPPORTS_AUTOCOMPLETION); 118 testStates("autocomplete-formoff", 0, 0, 0, EXT_STATE_SUPPORTS_AUTOCOMPLETION); 119 testStates("autocomplete-list", 0, EXT_STATE_SUPPORTS_AUTOCOMPLETION); 120 testStates("autocomplete-list2", 0, EXT_STATE_SUPPORTS_AUTOCOMPLETION); 121 testStates("autocomplete-tel", 0, EXT_STATE_SUPPORTS_AUTOCOMPLETION); 122 testStates("autocomplete-email", 0, EXT_STATE_SUPPORTS_AUTOCOMPLETION); 123 testStates("autocomplete-search", 0, EXT_STATE_SUPPORTS_AUTOCOMPLETION); 124 125 // ////////////////////////////////////////////////////////////////////////// 126 // haspopup 127 testStates("autocomplete-list", STATE_HASPOPUP); 128 129 SimpleTest.finish(); 130 } 131 132 SimpleTest.waitForExplicitFinish(); 133 addA11yLoadEvent(doTest); 134 </script> 135 </head> 136 137 <body> 138 <a target="_blank" 139 href="https://bugzilla.mozilla.org/show_bug.cgi?id=559275" 140 title="map attribute required to STATE_REQUIRED"> 141 Bug 559275 142 </a> 143 <a target="_blank" 144 href="https://bugzilla.mozilla.org/show_bug.cgi?id=389238" 145 title="Support disabled state on fieldset"> 146 Bug 389238 147 </a> 148 <a target="_blank" 149 href="https://bugzilla.mozilla.org/show_bug.cgi?id=599163" 150 title="check disabled state instead of attribute"> 151 Bug 599163 152 </a> 153 <a target="_blank" 154 href="https://bugzilla.mozilla.org/show_bug.cgi?id=601205" 155 title="Expose intrinsic invalid state to accessibility API"> 156 Bug 601205 157 </a> 158 <a target="_blank" 159 href="https://bugzilla.mozilla.org/show_bug.cgi?id=601205" 160 title="Expose intrinsic invalid state to accessibility API"> 161 Bug 601205 162 </a> 163 <a target="_blank" 164 href="https://bugzilla.mozilla.org/show_bug.cgi?id=559766" 165 title="Add accessibility support for @list on HTML input and for HTML datalist"> 166 Bug 559766 167 </a> 168 <a target="_blank" 169 href="https://bugzilla.mozilla.org/show_bug.cgi?id=699017" 170 title="File input control should be propogate states to descendants"> 171 Bug 699017 172 </a> 173 <a target="_blank" 174 href="https://bugzilla.mozilla.org/show_bug.cgi?id=733382" 175 title="Editable state bit should be present on readonly inputs"> 176 Bug 733382 177 </a> 178 <a target="_blank" 179 href="https://bugzilla.mozilla.org/show_bug.cgi?id=878590" 180 title="HTML5 datalist is not conveyed by haspopup property"> 181 Bug 878590 182 </a> 183 184 <p id="display"></p> 185 <div id="content" style="display: none"></div> 186 <pre id="test"> 187 </pre> 188 189 190 <form> 191 <input id="input" type="input"> 192 <input id="input_required" type="input" required> 193 <input id="input_readonly" type="input" readonly> 194 <input id="input_disabled" type="input" disabled> 195 <input id="search" type="search"> 196 <input id="search_required" type="search" required> 197 <input id="search_readonly" type="search" readonly> 198 <input id="search_disabled" type="search" disabled> 199 <input id="radio" type="radio"> 200 <input id="radio_required" type="radio" required> 201 <input id="radio_disabled" type="radio" disabled> 202 <input id="checkbox" type="checkbox"> 203 <input id="checkbox_required" type="checkbox" required> 204 <input id="checkbox_disabled" type="checkbox" disabled> 205 <textarea id="textarea"></textarea> 206 <textarea id="textarea_required" required></textarea> 207 <textarea id="textarea_readonly" readonly></textarea> 208 <textarea id="textarea_disabled" disabled></textarea> 209 </form> 210 211 <!-- bogus required usage --> 212 <input id="submit" type="submit" required> 213 <input id="button" type="button" required> 214 <input id="reset" type="reset" required> 215 <input id="image" type="image" required> 216 217 <!-- inherited disabled --> 218 <fieldset id="f" disabled> 219 <input id="f_input"> 220 <input id="f_input_disabled" disabled> 221 </fieldset> 222 223 <!-- inherited from input@type="file" --> 224 <input id="file" type="file" required disabled> 225 226 <!-- invalid/valid --> 227 <input id="maxlength" maxlength="1" value="f"> 228 <input id="maxlength2" maxlength="100" value="foo"> 229 <input id="minlength" minlength="2" value="fo"> 230 <input id="minlength2" minlength="1" value="foo"> 231 <input id="pattern" pattern="bar" value="foo"> 232 <input id="pattern2" pattern="bar" value="bar"> 233 <input id="email" type="email" value="foo"> 234 <input id="email2" type="email" value="foo@bar.com"> 235 <input id="url" type="url" value="foo"> 236 <input id="url2" type="url" value="http://mozilla.org/"> 237 238 <!-- autocomplete --> 239 <input id="autocomplete-default"> 240 <input id="autocomplete-off" autocomplete="off"> 241 <form autocomplete="off"> 242 <input id="autocomplete-formoff"> 243 </form> 244 <datalist id="cities"> 245 <option>Paris</option> 246 <option>San Francisco</option> 247 </datalist> 248 <input id="autocomplete-list" list="cities"> 249 <input id="autocomplete-list2" list="cities" autocomplete="off"> 250 <input id="autocomplete-tel" type="tel"> 251 252 Email Address: 253 <input id="autocomplete-email" type="email" list="contacts" value="xyzzy"> 254 <datalist id="contacts"> 255 <option>xyzzy@plughs.com</option> 256 <option>nobody@mozilla.org</option> 257 </datalist> 258 259 </br>Search for: 260 <input id="autocomplete-search" type="search" list="searchhisty" value="Gamma"> 261 <datalist id="searchhisty"> 262 <option>Gamma Rays</option> 263 <option>Gamma Ray Bursts</option> 264 </datalist> 265 266 </body> 267 </html>