test_bug238987.html (9635B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=238987 5 --> 6 <head> 7 <title>Test for Bug 238987</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> 13 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=238987">Mozilla Bug 238987</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 238987 */ 22 23 var shouldStop = false; 24 var activateShift = false; 25 var expectedResult = "i1,i2,i3,i4,i5,i7,i8,number,i9,i10,i11,i12"; 26 var forwardFocusArray = expectedResult.split(","); 27 var backwardFocusArray = expectedResult.split(","); 28 var forwardBlurArray = expectedResult.split(","); 29 var backwardBlurArray = expectedResult.split(","); 30 // Adding 3 for "begin", "end", "begin" and one for the <a> in the Mochitest template, 31 var expectedWindowFocusCount = forwardFocusArray.length + backwardFocusArray.length + 4; 32 // but the last blur event goes to i1, not "begin". 33 var expectedWindowBlurCount = forwardFocusArray.length + backwardFocusArray.length + 3; 34 35 function handleFocus(e) { 36 if (e.target.id == "begin") { 37 // if the activateShift is set, the test is coming back from the end. 38 if (activateShift) { 39 shouldStop = true; 40 } 41 } else if (e.target.id == "end") { 42 activateShift = true; 43 } else if (activateShift) { 44 var expected = backwardFocusArray.pop(); 45 ok(expected == e.target.id, 46 "(focus) Backward tabbing, expected [" + 47 expected + "], got [" + e.target.id + "]"); 48 } else { 49 var expected = forwardFocusArray.shift(); 50 is(e.target, document.activeElement, "Wrong activeElement!"); 51 ok(expected == e.target.id, 52 "(focus) Forward tabbing, expected [" + 53 expected + "], got [" + e.target.id + "]"); 54 } 55 } 56 57 function handleWindowFocus(e) { 58 --expectedWindowFocusCount; 59 var s = "target " + e.target; 60 if ("id" in e.target) { 61 s = s + ", id=\"" + e.target.id + "\""; 62 } 63 ok(e.eventPhase == Event.CAPTURING_PHASE, 64 "|window| should not have got a focus event, " + s); 65 } 66 67 function handleBlur(e) { 68 if (e.target.id == "begin" || e.target.id == "end") { 69 return; 70 } 71 if (activateShift) { 72 var expected = backwardBlurArray.pop(); 73 ok(expected == e.target.id, 74 "(blur) backward tabbing, expected [" + 75 expected + "], got [" + e.target.id + "]"); 76 } else { 77 var expected = forwardBlurArray.shift(); 78 ok(expected == e.target.id, 79 "(blur) forward tabbing, expected [" + 80 expected + "], got [" + e.target.id + "]"); 81 } 82 } 83 84 function handleWindowBlur(e) { 85 --expectedWindowBlurCount; 86 var s = "target " + e.target; 87 if ("id" in e.target) { 88 s = s + ", id=\"" + e.target.id + "\""; 89 } 90 ok(e.eventPhase == Event.CAPTURING_PHASE, 91 "|window| should not have got a blur event, " + s); 92 } 93 94 function tab() { 95 // Send tab key events. 96 synthesizeKey("KEY_Tab", {shiftKey: activateShift}); 97 if (shouldStop) { 98 // Did focus handling succeed 99 is(forwardFocusArray.length, 0, 100 "Not all forward tabbing focus tests were run, " + 101 forwardFocusArray.toString()); 102 is(backwardFocusArray.length, 0, 103 "Not all backward tabbing focus tests were run, " + 104 backwardFocusArray.toString()); 105 is(expectedWindowFocusCount, 0, 106 "|window| didn't get the right amount of focus events"); 107 108 // and blur. 109 is(forwardBlurArray.length, 0, 110 "Not all forward tabbing blur tests were run, " + 111 forwardBlurArray.toString()); 112 is(backwardBlurArray.length, 0, 113 "Not all backward tabbing blur tests were run, " + 114 backwardBlurArray.toString()); 115 is(expectedWindowBlurCount, 0, 116 "|window| didn't get the right amount of blur events"); 117 118 // Cleanup 119 window.removeEventListener("focus", handleWindowFocus, true); 120 window.removeEventListener("focus", handleWindowFocus); 121 window.removeEventListener("blur", handleWindowBlur, true); 122 window.removeEventListener("blur", handleWindowBlur); 123 var elements = document.getElementsByTagName("*"); 124 for (var i = 0; i < elements.length; ++i) { 125 if (elements[i].hasAttribute("id")) { 126 elements[i].removeEventListener("focus", handleFocus); 127 elements[i].removeEventListener("blur", handleBlur); 128 } 129 } 130 131 SimpleTest.finish(); 132 } else { 133 setTimeout(tab, 0); 134 } 135 } 136 137 function start() { 138 window.focus(); 139 window.addEventListener("focus", handleWindowFocus, true); 140 window.addEventListener("focus", handleWindowFocus); 141 window.addEventListener("blur", handleWindowBlur, true); 142 window.addEventListener("blur", handleWindowBlur); 143 var elements = document.getElementsByTagName("*"); 144 for (var i = 0; i < elements.length; ++i) { 145 if (elements[i].hasAttribute("id")) { 146 elements[i].addEventListener("focus", handleFocus); 147 elements[i].addEventListener("blur", handleBlur); 148 } 149 if (elements[i].getAttribute("tabindex") == "1") { 150 elements[i].setAttribute("tabindex", "-1"); 151 } 152 } 153 tab(); 154 } 155 156 // accessibility.tabfocus must be set to value 7 before running test also 157 // on a mac. 158 function doTest() { 159 SpecialPowers.pushPrefEnv({"set": [["accessibility.tabfocus", 7]]}, start); 160 } 161 162 SimpleTest.waitForExplicitFinish(); 163 addLoadEvent(doTest); 164 165 </script> 166 </pre> 167 <h4 tabindex="0" id="begin">Test:</h4> 168 <table> 169 <tbody> 170 <tr> 171 <td>type="text"</td><td><input type="text" id="i1" value=""></td> 172 </tr> 173 <tr> 174 <td>type="button"</td><td><input type="button" id="i2" value="type='button'"></td> 175 </tr> 176 <tr> 177 <td>type="checkbox"</td><td><input type="checkbox" id="i3" ></td> 178 </tr> 179 <tr> 180 <td>type="radio" checked</td><td><input type="radio" id="i4" name="radio" checked> 181 <input type="radio" id="i4b" name="radio"></td> 182 </tr> 183 <tr> 184 <td>type="radio"</td><td><input type="radio" id="i5" name="radio2"> 185 <input type="radio" id="i6" name="radio2"></td> 186 </tr> 187 <tr> 188 <td>type="password"</td><td><input type="password" id="i7"></td> 189 </tr> 190 <tr> 191 <td>type="file"</td><td><input type="file" id="i8"></td> 192 </tr> 193 <tr> 194 <td>type="number"</td><td><input type="number" id="number"></td> 195 </tr> 196 <tr> 197 <td>button</td><td><button id="i9">button</button></td> 198 </tr> 199 <tr> 200 <td>select</td><td><select id="i10"><option>select</option></select></td> 201 </tr> 202 <tr> 203 <td>a</td><td><a href="#radio" id="i11">a link</a></td> 204 </tr> 205 <tr> 206 <td>tabindex="0"</td><td><span tabindex="0" id="i12">span</span></td> 207 </tr> 208 209 <tr> 210 <td><h3>Form elements with tabindex="-1"</h3></td> 211 </tr> 212 <tr> 213 <td>type="text"</td><td><input type="text" tabindex="-1" value=""></td> 214 </tr> 215 <tr> 216 <td>type="button"</td><td><input type="button" tabindex="-1" value="type='button'"></td> 217 </tr> 218 <tr> 219 <td>type="checkbox"</td><td><input type="checkbox" tabindex="-1"></td> 220 </tr> 221 <tr> 222 <td>type="radio" checked</td><td><input type="radio" tabindex="-1" name="radio3" checked> 223 <input type="radio" tabindex="-1" name="radio3"></td> 224 </tr> 225 <tr> 226 <td>type="radio"</td><td><input type="radio" tabindex="-1" name="radio4"> 227 <input type="radio" tabindex="-1" name="radio4"></td> 228 </tr> 229 <tr> 230 <td>type="password"</td><td><input type="password" tabindex="-1"></td> 231 </tr> 232 <tr> 233 <td>type="file"</td><td><input type="file" tabindex="-1"></td> 234 </tr> 235 <tr> 236 <td>button</td><td><button tabindex="-1">button</button></td> 237 </tr> 238 <tr> 239 <td>select</td><td><select tabindex="-1"><option>select</option></select></td> 240 </tr> 241 242 <tr> 243 <td><h3>Form elements with .setAttribute("tabindex", "-1")</h3></td> 244 </tr> 245 <tr> 246 <td>type="text"</td><td><input type="text" tabindex="1" value=""></td> 247 </tr> 248 <tr> 249 <td>type="button"</td><td><input type="button" tabindex="1" value="type='button'"></td> 250 </tr> 251 <tr> 252 <td>type="checkbox"</td><td><input type="checkbox" tabindex="1"></td> 253 </tr> 254 <tr> 255 <td>type="radio" checked</td><td><input type="radio" tabindex="1" name="radio5" checked> 256 <input type="radio" tabindex="1" name="radio5"></td> 257 </tr> 258 <tr> 259 <td>type="radio"</td><td><input type="radio" tabindex="1" name="radio6"> 260 <input type="radio" tabindex="1" name="radio6"></td> 261 </tr> 262 <tr> 263 <td>type="password"</td><td><input type="password" tabindex="1"></td> 264 </tr> 265 <tr> 266 <td>type="file"</td><td><input type="file" tabindex="1"></td> 267 </tr> 268 <tr> 269 <td>button</td><td><button tabindex="1">button</button></td> 270 </tr> 271 <tr> 272 <td>select</td><td><select tabindex="1"><option>select</option></select></td> 273 </tr> 274 275 </tbody> 276 </table> 277 <h4 tabindex="0" id="end">done.</h4> 278 </body> 279 </html>