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