dom/events/test/test_bug409604.html

Thu, 22 Jan 2015 13:21:57 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Thu, 22 Jan 2015 13:21:57 +0100
branch
TOR_BUG_9701
changeset 15
b8a032363ba2
permissions
-rw-r--r--

Incorporate requested changes from Mozilla in review:
https://bugzilla.mozilla.org/show_bug.cgi?id=1123480#c6

michael@0 1 <!DOCTYPE HTML>
michael@0 2 <html>
michael@0 3 <!--
michael@0 4 https://bugzilla.mozilla.org/show_bug.cgi?id=409604
michael@0 5 -->
michael@0 6 <head>
michael@0 7 <title>Test for Bug 409604</title>
michael@0 8 <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
michael@0 9 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
michael@0 10 </head>
michael@0 11 <body id="body">
michael@0 12 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=409604">Mozilla Bug 409604</a>
michael@0 13 <p id="display"></p>
michael@0 14 <div id="content" style="display: none">
michael@0 15
michael@0 16 </div>
michael@0 17 <pre id="test">
michael@0 18 <script class="testbody" type="text/javascript">
michael@0 19
michael@0 20 /** Test for Bug 409604 **/
michael@0 21
michael@0 22 var modifier = SpecialPowers.Ci.nsIDOMEvent.ALT_MASK |
michael@0 23 SpecialPowers.Ci.nsIDOMEvent.SHIFT_MASK;
michael@0 24 var expectedFocus = "a,c,d,e,f,g,h,i,j,k,l,m,n,p,x,y";
michael@0 25 // XXX the "map" test is causing trouble, see bug 433089
michael@0 26 var focusArray = expectedFocus.split(",");
michael@0 27 var unfocusableElementId = "invalid";
michael@0 28 var unfocusableTags = [
michael@0 29 {tag: "abbr", content: "text", attribs: {title: "something"}},
michael@0 30 {tag: "acronym", content: "text", attribs: {title: "something"}},
michael@0 31 {tag: "address", content: "text"},
michael@0 32 {tag: "b", content: "text"},
michael@0 33 {tag: "bdo", content: "text"},
michael@0 34 {tag: "big", content: "text"},
michael@0 35 {tag: "blockquote", content: "text"},
michael@0 36 {tag: "caption", content: "text", parent: "table", where: "first"},
michael@0 37 {tag: "cite", content: "text"},
michael@0 38 {tag: "code", content: "text"},
michael@0 39 {tag: "dd", content: "text", parent: "dl"},
michael@0 40 {tag: "del", content: "text"},
michael@0 41 {tag: "dfn", content: "text", attribs: {title: "something"}},
michael@0 42 {tag: "div", content: "text"},
michael@0 43 {tag: "dl", content: "<dd>text</dd>", parent: "dl"},
michael@0 44 {tag: "dt", content: "text", parent: "dl"},
michael@0 45 {tag: "em", content: "text"},
michael@0 46 {tag: "fieldset", content: "text"},
michael@0 47 {tag: "form", content: "text", attribs: {action: "any.html"}},
michael@0 48 {tag: "h1", content: "text"},
michael@0 49 {tag: "h2", content: "text"},
michael@0 50 {tag: "h3", content: "text"},
michael@0 51 {tag: "h4", content: "text"},
michael@0 52 {tag: "h5", content: "text"},
michael@0 53 {tag: "h6", content: "text"},
michael@0 54 {tag: "hr"},
michael@0 55 {tag: "i", content: "text"},
michael@0 56 {tag: "img", attribs: {src: "any.png", alt: "image"}},
michael@0 57 {tag: "ins", content: "text"},
michael@0 58 {tag: "kbd", content: "text"},
michael@0 59 {tag: "li", content: "text", parent: "ol"},
michael@0 60 {tag: "li", content: "text", parent: "ul"},
michael@0 61 {tag: "noscript", content: "text"},
michael@0 62 {tag: "ol", content: "<li>text</li>"},
michael@0 63 {tag: "optgroup", content: "<option>text</option>", attribs: {label: "some label"}, parent: "select"},
michael@0 64 {tag: "option", content: "text", parent: "select"},
michael@0 65 {tag: "p", content: "text"},
michael@0 66 {tag: "pre", content: "text"},
michael@0 67 {tag: "q", content: "text"},
michael@0 68 {tag: "samp", content: "text"},
michael@0 69 {tag: "small", content: "text"},
michael@0 70 {tag: "span", content: "text"},
michael@0 71 {tag: "strong", content: "text"},
michael@0 72 {tag: "sub", content: "text"},
michael@0 73 {tag: "sup", content: "text"},
michael@0 74 {tag: "tt", content: "text"},
michael@0 75 {tag: "ul", content: "<li>text</li>"},
michael@0 76 {tag: "var", content: "text"}
michael@0 77 ];
michael@0 78 var invalidElements = [
michael@0 79 "body",
michael@0 80 "col",
michael@0 81 "colgroup",
michael@0 82 // XXX the "map" test is causing trouble, see bug 433089
michael@0 83 // "map",
michael@0 84 "table",
michael@0 85 "tbody",
michael@0 86 "td",
michael@0 87 "tfoot",
michael@0 88 "th",
michael@0 89 "thead",
michael@0 90 "tr"
michael@0 91 ];
michael@0 92
michael@0 93 // ui.key.contentAccess must be set to value 5 before running the test.
michael@0 94 function setOrRestoreContentAccess(newValue) {
michael@0 95 if (!newValue) {
michael@0 96 SpecialPowers.clearUserPref("ui.key.contentAccess");
michael@0 97 } else {
michael@0 98 SpecialPowers.setIntPref("ui.key.contentAccess", newValue);
michael@0 99 }
michael@0 100 }
michael@0 101
michael@0 102 function handleFocus(e) {
michael@0 103 ok("accessKey" in e, "(focus) accesskey property not found on element");
michael@0 104 var expected = focusArray.shift();
michael@0 105 // "k" and "n" are a special cases because the element receiving the focus
michael@0 106 // is not the element which has the accesskey.
michael@0 107 if (expected == "k" || expected == "n") {
michael@0 108 ok(e.value == "test for label", "(focus) unexpected element: " + e.value +
michael@0 109 " expected: " + "test for label");
michael@0 110 // "l" is a special case because the element receiving the focus is not
michael@0 111 // the element which has the accesskey.
michael@0 112 } else if (expected == "l") {
michael@0 113 ok(e.value == "test for legend", "(focus) unexpected element: " + e.value +
michael@0 114 " expected: " + "test for legend");
michael@0 115 } else {
michael@0 116 ok(expected == e.accessKey, "(focus) unexpected element: " + e.accessKey +
michael@0 117 " expected: " + expected);
michael@0 118 }
michael@0 119 }
michael@0 120
michael@0 121 function handleClick(e) {
michael@0 122 ok("accessKey" in e, "(click) accesskey property not found on element");
michael@0 123 }
michael@0 124
michael@0 125 function handleInvalid(e) {
michael@0 126 ok("accessKey" in e, "(invalid) accesskey property not found on element");
michael@0 127 ok(false, "(invalid) accesskey should not have any effect on this element: " +
michael@0 128 e.localName);
michael@0 129 }
michael@0 130
michael@0 131 function pressAccessKey(key) {
michael@0 132 var utils = SpecialPowers.DOMWindowUtils;
michael@0 133 utils.sendKeyEvent("keydown", key, key, modifier);
michael@0 134 utils.sendKeyEvent("keypress", key, key, modifier);
michael@0 135 utils.sendKeyEvent("keyup", key, key, modifier);
michael@0 136 }
michael@0 137
michael@0 138 function testFocusableElements() {
michael@0 139 for (var code = "a".charCodeAt(0); code <= "y".charCodeAt(0); ++ code) {
michael@0 140 // XXX the "map" test is causing trouble, see bug 433089
michael@0 141 if (code == "b".charCodeAt(0))
michael@0 142 continue;
michael@0 143 pressAccessKey(code);
michael@0 144 }
michael@0 145 ok(focusArray.length == 0, "(focus) unhandled elements remaining: " + focusArray.join(","));
michael@0 146 }
michael@0 147
michael@0 148 function createUnfocusableElement(elem, accesskey) {
michael@0 149 ok("tag" in elem, "invalid object passed to createUnfocusableElement: " + elem.toString());
michael@0 150 var e = document.createElement(elem.tag);
michael@0 151 if ("content" in elem) {
michael@0 152 e.innerHTML = elem.content;
michael@0 153 }
michael@0 154 if ("attribs" in elem) {
michael@0 155 for (var attr in elem.attribs) {
michael@0 156 e.setAttribute(attr, elem.attribs[attr]);
michael@0 157 }
michael@0 158 }
michael@0 159 e.setAttribute("accesskey", accesskey);
michael@0 160 e.setAttribute("onclick", "handleClick(event.target); event.preventDefault();");
michael@0 161 e.setAttribute("onfocus", "handleInvalid(event.target);");
michael@0 162 var parent = null;
michael@0 163 var elementToInsert = null;
michael@0 164 if ("parent" in elem) {
michael@0 165 parent = document.getElementById(elem.parent);
michael@0 166 elementToInsert = e;
michael@0 167 } else {
michael@0 168 parent = document.getElementById("tbody");
michael@0 169 elementToInsert = document.createElement("tr");
michael@0 170 var td = document.createElement("td");
michael@0 171 td.textContent = elem.tag;
michael@0 172 elementToInsert.appendChild(td);
michael@0 173 td = document.createElement("td");
michael@0 174 td.appendChild(e);
michael@0 175 elementToInsert.appendChild(td);
michael@0 176 }
michael@0 177 ok(parent != null, "parent element not specified for element: " + elem.tag);
michael@0 178 ok(elementToInsert != null, "elementToInsert not specified for element: " + elem.tag);
michael@0 179 elementToInsert.setAttribute("id", unfocusableElementId);
michael@0 180 if ("where" in elem) {
michael@0 181 if (elem.where == "first") {
michael@0 182 parent.insertBefore(elementToInsert, parent.firstChild);
michael@0 183 } else {
michael@0 184 ok(false, "invalid where value specified for element: " + elem.tag);
michael@0 185 }
michael@0 186 } else {
michael@0 187 parent.appendChild(elementToInsert);
michael@0 188 }
michael@0 189 }
michael@0 190
michael@0 191 function destroyUnfocusableElement() {
michael@0 192 var el = document.getElementById(unfocusableElementId);
michael@0 193 ok(el != null, "unfocusable element not found");
michael@0 194 el.parentNode.removeChild(el);
michael@0 195 ok(document.getElementById(unfocusableElementId) == null, "unfocusable element not properly removed");
michael@0 196 }
michael@0 197
michael@0 198 function testUnfocusableElements() {
michael@0 199 var i, e;
michael@0 200 for (i = 0; i < unfocusableTags.length; ++ i) {
michael@0 201 createUnfocusableElement(unfocusableTags[i], "z");
michael@0 202 pressAccessKey("z".charCodeAt(0));
michael@0 203 destroyUnfocusableElement();
michael@0 204 }
michael@0 205 for (i = 0; i < invalidElements.length; ++ i) {
michael@0 206 e = document.getElementById(invalidElements[i]);
michael@0 207 ok(e != null, "element with ID " + invalidElements[i] + " not found");
michael@0 208 e.setAttribute("accesskey", "z");
michael@0 209 e.setAttribute("onclick", "handleClick(event.target); event.preventDefault();");
michael@0 210 e.setAttribute("onfocus", "handleInvalid(event.target);");
michael@0 211 pressAccessKey("z".charCodeAt(0));
michael@0 212 e.removeAttribute("accesskey");
michael@0 213 e.removeAttribute("onclick");
michael@0 214 e.removeAttribute("onfocus");
michael@0 215 }
michael@0 216 }
michael@0 217
michael@0 218 function start() {
michael@0 219 testFocusableElements();
michael@0 220 testUnfocusableElements();
michael@0 221 setOrRestoreContentAccess(0);
michael@0 222 SimpleTest.finish();
michael@0 223 }
michael@0 224
michael@0 225 function doTest() {
michael@0 226 setOrRestoreContentAccess(5);
michael@0 227 setTimeout(start, 100);
michael@0 228 }
michael@0 229
michael@0 230 SimpleTest.waitForExplicitFinish();
michael@0 231 addLoadEvent(doTest);
michael@0 232
michael@0 233 </script>
michael@0 234 </pre>
michael@0 235 <table id="table">
michael@0 236 <thead id="thead">
michael@0 237 <tr id="tr"><th id="th">Test header</th><th></th></tr>
michael@0 238 </thead>
michael@0 239 <tfoot id="tfoot">
michael@0 240 <tr><td id="td">Test footer</td><td></td></tr>
michael@0 241 </tfoot>
michael@0 242 <tbody id="tbody">
michael@0 243 <colgroup id="colgroup">
michael@0 244 <col id="col"></col>
michael@0 245 <col></col>
michael@0 246 </colgroup>
michael@0 247 <tr>
michael@0 248 <td>a</td><td><a href="#" onclick="handleClick(event.target); return false;" accesskey="a" onfocus="handleFocus(event.target);">test link"</a></td>
michael@0 249 </tr>
michael@0 250 <!-- the "map" test is causing trouble, see bug 433089
michael@0 251 <tr>
michael@0 252 <td>area</td><td><img src="about:logo" width="300" height="236" usemap="#map">
michael@0 253 <map id="map" name="map"><area shape="rect" coords="0,0,82,126" href="#"
michael@0 254 onclick="handleClick(event.target); return false;" accesskey="b"></map>
michael@0 255 </td>
michael@0 256 </tr>
michael@0 257 -->
michael@0 258 <tr>
michael@0 259 <td>button</td><td><button onclick="handleClick(event.target);" accesskey="c" onfocus="handleFocus(event.target);">test button"</button></td>
michael@0 260 </tr>
michael@0 261 <tr>
michael@0 262 <td>input type="text"</td><td><input type="text" value="" onclick="handleClick(event.target);" onfocus="handleFocus(event.target);" accesskey="d"></td>
michael@0 263 </tr>
michael@0 264 <tr>
michael@0 265 <td>input type="button"</td><td><input type="button" value="type='button'" onclick="handleClick(event.target);" onfocus="handleFocus(event.target);" accesskey="e"></td>
michael@0 266 </tr>
michael@0 267 <tr>
michael@0 268 <td>input type="checkbox"</td><td><input type="checkbox" onclick="handleClick(event.target);" onfocus="handleFocus(event.target)" accesskey="f"></td>
michael@0 269 </tr>
michael@0 270 <tr>
michael@0 271 <td>input type="radio"</td><td><input type="radio" name="radio" onclick="handleClick(event.target);" onfocus="handleFocus(event.target);" accesskey="g"></td>
michael@0 272 </tr>
michael@0 273 <tr>
michael@0 274 <td>input type="password"</td><td><input type="password" onclick="handleClick(event.target);" onfocus="handleFocus(event.target);" accesskey="h"></td>
michael@0 275 </tr>
michael@0 276 <tr>
michael@0 277 <td>input type="submit"</td><td><input type="submit" value="type='submit'" onclick="handleClick(event.target); return false;"
michael@0 278 onfocus="handleFocus(event.target);" accesskey="i"></td>
michael@0 279 </tr>
michael@0 280 <tr>
michael@0 281 <td>input type="reset"</td><td><input type="submit" value="type='reset'" onclick="handleClick(event.target);"
michael@0 282 onfocus="handleFocus(event.target);" accesskey="j"></td>
michael@0 283 </tr>
michael@0 284 <tr>
michael@0 285 <td>label</td><td><label accesskey="k" onclick="handleClick(event.target);" onfocus="handleInvalid(event.target);">test label
michael@0 286 <input type="text" value="test for label" onfocus="handleFocus(event.target);" onclick="handleClick(event.target);"></label></td>
michael@0 287 </tr>
michael@0 288 <tr>
michael@0 289 <td>legend</td><td><fieldset><legend accesskey="l">test legend</legend>
michael@0 290 <input type="text" value="test for legend" onfocus="handleFocus(event.target);" onclick="handleClick(event.target);" ></fieldset></td>
michael@0 291 </tr>
michael@0 292 <tr>
michael@0 293 <td>textarea</td><td><textarea onfocus="handleFocus(event.target);" onclick="handleClick(event.target);" accesskey="m">test text</textarea></td>
michael@0 294 </tr>
michael@0 295 <tr>
michael@0 296 <td>label (label invisible)</td><td><label for="txt1" accesskey="n" style="display:none"
michael@0 297 onclick="handleClick(event.target);" onfocus="handleInvalid(event.target);">test label</label>
michael@0 298 <input type="text" id="txt1" value="test for label" onclick="handleClick(event.target);" onfocus="handleFocus(event.target);"></td>
michael@0 299 </tr>
michael@0 300 <tr>
michael@0 301 <td>label (control invisible)</td><td><label for="txt2" accesskey="o"
michael@0 302 onclick="handleClick(event.target);" onfocus="handleInvalid(event.target);">test label</label>
michael@0 303 <input type="text" id="txt2" value="test for label" onclick="handleClick(event.target);"
michael@0 304 onfocus="handleInvalid(event.target);" style="display:none"></td>
michael@0 305 </tr>
michael@0 306 <tr>
michael@0 307 <td>select</td>
michael@0 308 <td>
michael@0 309 <select onclick="handleClick(event.target);" onfocus="handleFocus(event.target)" accesskey="p"><option>option</option></select>
michael@0 310 </td>
michael@0 311 </tr>
michael@0 312 <tr>
michael@0 313 <td>object</td>
michael@0 314 <td>
michael@0 315 <object onclick="handleClick(event.target);" onfocus="handleInvalid(event.target)" accesskey="q">an object</object>
michael@0 316 </td>
michael@0 317 </tr>
michael@0 318 <tr>
michael@0 319 <td>a without href</td>
michael@0 320 <td>
michael@0 321 <a onclick="handleClick(event.target);" onfocus="handleInvalid(event.target)" accesskey="r">an object</object>
michael@0 322 </td>
michael@0 323 </tr>
michael@0 324 <tr>
michael@0 325 <td>disabled button</td>
michael@0 326 <td>
michael@0 327 <button disabled="" onclick="handleClick(event.target);" onfocus="handleInvalid(event.target)" accesskey="s">disabled</button>
michael@0 328 </td>
michael@0 329 </tr>
michael@0 330 <tr>
michael@0 331 <td>disabled input</td>
michael@0 332 <td>
michael@0 333 <input disabled="" onclick="handleClick(event.target);" onfocus="handleInvalid(event.target)" accesskey="t"></input>
michael@0 334 </td>
michael@0 335 </tr>
michael@0 336 <tr>
michael@0 337 <td>hidden input</td>
michael@0 338 <td>
michael@0 339 <input type="hidden" onclick="handleClick(event.target);" onfocus="handleInvalid(event.target)" accesskey="u">disabled</input>
michael@0 340 </td>
michael@0 341 </tr>
michael@0 342 <tr>
michael@0 343 <td>disabled select</td>
michael@0 344 <td>
michael@0 345 <select disabled onclick="handleClick(event.target);" onfocus="handleInvalid(event.target)" accesskey="v">
michael@0 346 <option>disabled</option>
michael@0 347 </select>
michael@0 348 </td>
michael@0 349 </tr>
michael@0 350 <tr>
michael@0 351 <td>disabled textarea</td>
michael@0 352 <td>
michael@0 353 <textarea disabled onclick="handleClick(event.target);" onfocus="handleInvalid(event.target)" accesskey="w">disabled</textarea>
michael@0 354 </td>
michael@0 355 </tr>
michael@0 356 <tr>
michael@0 357 <td>scrollable div(focusable)</td>
michael@0 358 <td>
michael@0 359 <div onclick="handleClick(event.target);" onfocus="handleFocus(event.target)" accesskey="x" style="height: 50px; overflow: auto;">
michael@0 360 The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy
michael@0 361
michael@0 362 dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the
michael@0 363
michael@0 364 lazy dog. The quick brown fox jumps over the lazy dog.
michael@0 365 The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy
michael@0 366
michael@0 367 dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the
michael@0 368
michael@0 369 lazy dog. The quick brown fox jumps over the lazy dog.
michael@0 370 The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy
michael@0 371
michael@0 372 dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the
michael@0 373
michael@0 374 lazy dog. The quick brown fox jumps over the lazy dog.
michael@0 375 </div>
michael@0 376 </td>
michael@0 377 </tr>
michael@0 378 <tr>
michael@0 379 <td>contenteditable div(focusable)</td>
michael@0 380 <td>
michael@0 381 <div onclick="handleClick(event.target);" onfocus="handleFocus(event.target)" accesskey="y" contenteditable="true">
michael@0 382 Test text.....
michael@0 383 </div>
michael@0 384 </td>
michael@0 385 </tr>
michael@0 386 </tbody>
michael@0 387 </table>
michael@0 388 <dl id="dl"></dl>
michael@0 389 <ul id="ul"></ul>
michael@0 390 <ol id="ol"></ol>
michael@0 391 <select id="select"></select>
michael@0 392 </body>
michael@0 393 </html>

mercurial