accessible/tests/mochitest/states/test_inputs.html

Wed, 31 Dec 2014 06:09:35 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Wed, 31 Dec 2014 06:09:35 +0100
changeset 0
6474c204b198
permissions
-rw-r--r--

Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.

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

mercurial