test_caret_browsing_around_form_controls.html (15514B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script src="/tests/SimpleTest/SimpleTest.js"></script> 6 <script src="/tests/SimpleTest/EventUtils.js"></script> 7 <link rel="stylesheet" href="/tests/SimpleTest/test.css"> 8 <script> 9 "use strict"; 10 11 SimpleTest.waitForExplicitFinish(); 12 SimpleTest.waitForFocus(async () => { 13 await SpecialPowers.pushPrefEnv({ 14 set:[ 15 ["accessibility.browsewithcaret", true], 16 ], 17 }); 18 (function test_move_caret_from_before_input_text() { 19 info("Starting test_move_caret_from_before_input_text..."); 20 document.body.innerHTML = '<div>abc<input value="def">ghi</div>'; 21 const input = document.querySelector("input"); 22 const textBefore = input.previousSibling; 23 getSelection().collapse(textBefore, textBefore.length); 24 synthesizeKey("KEY_ArrowRight"); 25 ok( 26 getSelection().isCollapsed, 27 "test_move_caret_from_before_input_text: selection should be collapsed after moving caret" 28 ); 29 is( 30 getSelection().focusNode, 31 input.nextSibling, 32 "test_move_caret_from_before_input_text: caret should be moved to text node after the <input>" 33 ); 34 is( 35 getSelection().focusOffset, 36 0, 37 "test_move_caret_from_before_input_text: caret should be moved to start of the text node" 38 ); 39 })(); 40 (function test_move_caret_from_after_input_text() { 41 info("Starting test_move_caret_from_after_input_text..."); 42 document.body.innerHTML = '<div>abc<input value="def">ghi</div>'; 43 const input = document.querySelector("input"); 44 getSelection().collapse(input.nextSibling, 0); 45 synthesizeKey("KEY_ArrowLeft"); 46 ok( 47 getSelection().isCollapsed, 48 "test_move_caret_from_after_input_text: selection should be collapsed after moving caret" 49 ); 50 is( 51 getSelection().focusNode, 52 input.previousSibling, 53 "test_move_caret_from_after_input_text: caret should be moved to text node before the <input>" 54 ); 55 is( 56 getSelection().focusOffset, 57 input.previousSibling.length, 58 "test_move_caret_from_after_input_text: caret should be moved to end of the text node" 59 ); 60 })(); 61 (function test_move_caret_from_before_double_input_text() { 62 info("Starting test_move_caret_from_before_double_input_text..."); 63 document.body.innerHTML = '<div>abc<input value="def"><input value="ghi">jkl</div>'; 64 const firstInput = document.querySelector("input"); 65 const secondInput = firstInput.nextSibling; 66 const textBefore = firstInput.previousSibling; 67 getSelection().collapse(textBefore, textBefore.length); 68 synthesizeKey("KEY_ArrowRight"); 69 ok( 70 getSelection().isCollapsed, 71 "test_move_caret_from_before_double_input_text: selection should be collapsed after moving caret" 72 ); 73 is( 74 getSelection().focusNode, 75 secondInput.nextSibling, 76 "test_move_caret_from_before_double_input_text: caret should be moved to text node after the second <input> (container)" 77 ); 78 is( 79 getSelection().focusOffset, 80 0, 81 "test_move_caret_from_before_double_input_text: caret should be moved to text node after the second <input> (offset)" 82 ); 83 })(); 84 (function test_move_caret_from_after_double_input_text() { 85 info("Starting test_move_caret_from_after_double_input_text..."); 86 document.body.innerHTML = '<div>abc<input value="def"><input value="ghi">jkl</div>'; 87 const firstInput = document.querySelector("input"); 88 const secondInput = firstInput.nextSibling; 89 getSelection().collapse(secondInput.nextSibling, 0); 90 synthesizeKey("KEY_ArrowLeft"); 91 ok( 92 getSelection().isCollapsed, 93 "test_move_caret_from_after_double_input_text: selection should be collapsed after moving caret" 94 ); 95 is( 96 getSelection().focusNode, 97 firstInput.previousSibling, 98 "test_move_caret_from_after_double_input_text: caret should be moved to text node before the first <input> (container)" 99 ); 100 is( 101 getSelection().focusOffset, 102 firstInput.previousSibling.length, 103 "test_move_caret_from_after_double_input_text: caret should be moved to text node before the first <input> (offset)" 104 ); 105 })(); 106 107 (function test_move_caret_from_before_input_button() { 108 info("Starting test_move_caret_from_before_input_button..."); 109 document.body.innerHTML = '<div>abc<input type="button" value="def">ghi</div>'; 110 const input = document.querySelector("input"); 111 const textBefore = input.previousSibling; 112 getSelection().collapse(textBefore, textBefore.length); 113 synthesizeKey("KEY_ArrowRight"); 114 ok( 115 getSelection().isCollapsed, 116 "test_move_caret_from_before_input_button: selection should be collapsed after moving caret" 117 ); 118 is( 119 getSelection().focusNode, 120 input.nextSibling, 121 "test_move_caret_from_before_input_button: caret should be moved to text node after the <input>" 122 ); 123 is( 124 getSelection().focusOffset, 125 0, 126 "test_move_caret_from_before_input_button: caret should be moved to start of the text node" 127 ); 128 })(); 129 (function test_move_caret_from_after_input_button() { 130 info("Starting test_move_caret_from_after_input_button..."); 131 document.body.innerHTML = '<div>abc<input type="button" value="def">ghi</div>'; 132 const input = document.querySelector("input"); 133 getSelection().collapse(input.nextSibling, 0); 134 synthesizeKey("KEY_ArrowLeft"); 135 ok( 136 getSelection().isCollapsed, 137 "test_move_caret_from_after_input_button: selection should be collapsed after moving caret" 138 ); 139 is( 140 getSelection().focusNode, 141 input.previousSibling, 142 "test_move_caret_from_after_input_button: caret should be moved to text node before the <input>" 143 ); 144 is( 145 getSelection().focusOffset, 146 input.previousSibling.length, 147 "test_move_caret_from_after_input_button: caret should be moved to end of the text node" 148 ); 149 })(); 150 (function test_move_caret_from_before_double_input_button() { 151 info("Starting test_move_caret_from_before_double_input_button..."); 152 document.body.innerHTML = '<div>abc<input type="button" value="def"><input type="button" value="ghi">jkl</div>'; 153 const firstInput = document.querySelector("input"); 154 const secondInput = firstInput.nextSibling; 155 const textBefore = firstInput.previousSibling; 156 getSelection().collapse(textBefore, textBefore.length); 157 synthesizeKey("KEY_ArrowRight"); 158 ok( 159 getSelection().isCollapsed, 160 "test_move_caret_from_before_double_input_button: selection should be collapsed after moving caret" 161 ); 162 is( 163 getSelection().focusNode, 164 secondInput.nextSibling, 165 "test_move_caret_from_before_double_input_button: caret should be moved to text node after the second <input> (container)" 166 ); 167 is( 168 getSelection().focusOffset, 169 0, 170 "test_move_caret_from_before_double_input_button: caret should be moved to text node after the second <input> (offset)" 171 ); 172 })(); 173 (function test_move_caret_from_after_double_input_button() { 174 info("Starting test_move_caret_from_after_double_input_button..."); 175 document.body.innerHTML = '<div>abc<input type="button" value="def"><input type="button" value="ghi">jkl</div>'; 176 const firstInput = document.querySelector("input"); 177 const secondInput = firstInput.nextSibling; 178 getSelection().collapse(secondInput.nextSibling, 0); 179 synthesizeKey("KEY_ArrowLeft"); 180 ok( 181 getSelection().isCollapsed, 182 "test_move_caret_from_after_double_input_button: selection should be collapsed after moving caret" 183 ); 184 is( 185 getSelection().focusNode, 186 firstInput.previousSibling, 187 "test_move_caret_from_after_double_input_button: caret should be moved to text node before the first <input> (container)" 188 ); 189 is( 190 getSelection().focusOffset, 191 firstInput.previousSibling.length, 192 "test_move_caret_from_after_double_input_button: caret should be moved to text node before the first <input> (offset)" 193 ); 194 })(); 195 196 (function test_move_caret_from_before_button() { 197 info("Starting test_move_caret_from_before_button..."); 198 document.body.innerHTML = '<div>abc<button>def</button>ghi</div>'; 199 const button = document.querySelector("button"); 200 const textBefore = button.previousSibling; 201 getSelection().collapse(textBefore, textBefore.length); 202 synthesizeKey("KEY_ArrowRight"); 203 ok( 204 getSelection().isCollapsed, 205 "test_move_caret_from_before_button: selection should be collapsed after moving caret" 206 ); 207 is( 208 getSelection().focusNode, 209 button.nextSibling, 210 "test_move_caret_from_before_button: caret should be moved to text node after the <button>" 211 ); 212 is( 213 getSelection().focusOffset, 214 0, 215 "test_move_caret_from_before_button: caret should be moved to start of the text node" 216 ); 217 })(); 218 (function test_move_caret_from_after_button() { 219 info("Starting test_move_caret_from_after_button..."); 220 document.body.innerHTML = '<div>abc<button>def</button>ghi</div>'; 221 const button = document.querySelector("button"); 222 getSelection().collapse(button.nextSibling, 0); 223 synthesizeKey("KEY_ArrowLeft"); 224 ok( 225 getSelection().isCollapsed, 226 "test_move_caret_from_after_button: selection should be collapsed after moving caret" 227 ); 228 is( 229 getSelection().focusNode, 230 button.previousSibling, 231 "test_move_caret_from_after_button: caret should be moved to text node before the <button>" 232 ); 233 is( 234 getSelection().focusOffset, 235 button.previousSibling.length, 236 "test_move_caret_from_after_button: caret should be moved to end of the text node" 237 ); 238 })(); 239 (function test_move_caret_from_before_double_button() { 240 info("Starting test_move_caret_from_before_double_button..."); 241 document.body.innerHTML = '<div>abc<button>def</button><button>ghi</button>jkl</div>'; 242 const firstButton = document.querySelector("button"); 243 const secondButton = firstButton.nextSibling; 244 const textBefore = firstButton.previousSibling; 245 getSelection().collapse(textBefore, textBefore.length); 246 synthesizeKey("KEY_ArrowRight"); 247 ok( 248 getSelection().isCollapsed, 249 "test_move_caret_from_before_double_button: selection should be collapsed after moving caret" 250 ); 251 is( 252 getSelection().focusNode, 253 secondButton.nextSibling, 254 "test_move_caret_from_before_double_button: caret should be moved to text node after the second <button> (container)" 255 ); 256 is( 257 getSelection().focusOffset, 258 0, 259 "test_move_caret_from_before_double_button: caret should be moved to text node after the second <button> (offset)" 260 ); 261 })(); 262 (function test_move_caret_from_after_double_button() { 263 info("Starting test_move_caret_from_after_double_button..."); 264 document.body.innerHTML = '<div>abc<button>def</button><button>ghi</button>jkl</div>'; 265 const firstButton = document.querySelector("button"); 266 const secondButton = firstButton.nextSibling; 267 getSelection().collapse(secondButton.nextSibling, 0); 268 synthesizeKey("KEY_ArrowLeft"); 269 ok( 270 getSelection().isCollapsed, 271 "test_move_caret_from_after_double_button: selection should be collapsed after moving caret" 272 ); 273 is( 274 getSelection().focusNode, 275 firstButton.previousSibling, 276 "test_move_caret_from_after_double_button: caret should be moved to text node before the first <button> (container)" 277 ); 278 is( 279 getSelection().focusOffset, 280 firstButton.previousSibling.length, 281 "test_move_caret_from_after_double_button: caret should be moved to text node before the first <button> (offset)" 282 ); 283 })(); 284 285 (function test_move_caret_from_before_textarea() { 286 info("Starting test_move_caret_from_before_textarea..."); 287 document.body.innerHTML = '<div>abc<textarea>def</textarea>ghi</div>'; 288 const textarea = document.querySelector("textarea"); 289 const textBefore = textarea.previousSibling; 290 getSelection().collapse(textBefore, textBefore.length); 291 synthesizeKey("KEY_ArrowRight"); 292 ok( 293 getSelection().isCollapsed, 294 "test_move_caret_from_before_textarea: selection should be collapsed after moving caret" 295 ); 296 is( 297 getSelection().focusNode, 298 textarea.nextSibling, 299 "test_move_caret_from_before_textarea: caret should be moved to text node after the <textarea>" 300 ); 301 is( 302 getSelection().focusOffset, 303 0, 304 "test_move_caret_from_before_textarea: caret should be moved to start of the text node" 305 ); 306 })(); 307 (function test_move_caret_from_after_textarea() { 308 info("Starting test_move_caret_from_after_textarea..."); 309 document.body.innerHTML = '<div>abc<textarea>def</textarea>ghi</div>'; 310 const textarea = document.querySelector("textarea"); 311 getSelection().collapse(textarea.nextSibling, 0); 312 synthesizeKey("KEY_ArrowLeft"); 313 ok( 314 getSelection().isCollapsed, 315 "test_move_caret_from_after_textarea: selection should be collapsed after moving caret" 316 ); 317 is( 318 getSelection().focusNode, 319 textarea.previousSibling, 320 "test_move_caret_from_after_textarea: caret should be moved to text node before the <textarea>" 321 ); 322 is( 323 getSelection().focusOffset, 324 textarea.previousSibling.length, 325 "test_move_caret_from_after_textarea: caret should be moved to end of the text node" 326 ); 327 })(); 328 (function test_move_caret_from_before_double_textarea() { 329 info("Starting test_move_caret_from_before_double_textarea..."); 330 document.body.innerHTML = '<div>abc<textarea>def</textarea><textarea>ghi</textarea>jkl</div>'; 331 const firstTextarea = document.querySelector("textarea"); 332 const secondTextarea = firstTextarea.nextSibling; 333 const textBefore = firstTextarea.previousSibling; 334 getSelection().collapse(textBefore, textBefore.length); 335 synthesizeKey("KEY_ArrowRight"); 336 ok( 337 getSelection().isCollapsed, 338 "test_move_caret_from_before_double_textarea: selection should be collapsed after moving caret" 339 ); 340 is( 341 getSelection().focusNode, 342 secondTextarea.nextSibling, 343 "test_move_caret_from_before_double_textarea: caret should be moved to text node after the second <textarea> (container)" 344 ); 345 is( 346 getSelection().focusOffset, 347 0, 348 "test_move_caret_from_before_double_textarea: caret should be moved to text node after the second <textarea> (offset)" 349 ); 350 })(); 351 (function test_move_caret_from_after_double_textarea() { 352 info("Starting test_move_caret_from_after_double_textarea..."); 353 document.body.innerHTML = '<div>abc<textarea>def</textarea><textarea>ghi</textarea>jkl</div>'; 354 const firstTextarea = document.querySelector("textarea"); 355 const secondTextarea = firstTextarea.nextSibling; 356 getSelection().collapse(secondTextarea.nextSibling, 0); 357 synthesizeKey("KEY_ArrowLeft"); 358 ok( 359 getSelection().isCollapsed, 360 "test_move_caret_from_after_double_textarea: selection should be collapsed after moving caret" 361 ); 362 is( 363 getSelection().focusNode, 364 firstTextarea.previousSibling, 365 "test_move_caret_from_after_double_textarea: caret should be moved to text node before the first <textarea> (container)" 366 ); 367 is( 368 getSelection().focusOffset, 369 firstTextarea.previousSibling.length, 370 "test_move_caret_from_after_double_textarea: caret should be moved to text node before the first <textarea> (offset)" 371 ); 372 })(); 373 374 SimpleTest.finish(); 375 }); 376 </script> 377 </head> 378 <body></body> 379 </html>