multi-range-user-select.html (13854B)
1 <!DOCTYPE HTML> 2 <html class="reftest-wait"><head> 3 <meta charset="utf-8"> 4 <title>Testcase #1 for bug 1129078</title> 5 <script src="/tests/SimpleTest/SimpleTest.js"></script> 6 <script src="/tests/SimpleTest/EventUtils.js"></script> 7 <script src="selection-utils.js"></script> 8 9 <style type="text/css"> 10 @font-face { 11 font-family: Ahem; 12 src: url("Ahem.ttf"); 13 } 14 html,body { margin:0; padding: 0; } 15 body,pre { 16 font-family: Ahem; 17 font-size: 20px; 18 } 19 span { 20 user-select: none; 21 } 22 x { 23 user-select: text; 24 } 25 </style> 26 </head> 27 <body> 28 29 <pre id="select"> 30 2af45494-a<x>k7e-1</x><span id="span2">1e4-a0c6-a7e7 31 38222880-bj6d-11e4-8064-fb7b 32 3d649ae</span><x>4-ci5</x><span id="span3">c-11e4-995d-17b2 33 434351bc-dh4b-11e4-9971-4fc8 34 4dc0e0b4-eg4a-11e4-8c28-5319 35 a9631</span><x>9c8-ad7d-1</x>1e4-b312-039c 36 </pre> 37 38 <pre id="log" style="border:1px solid green"></pre> 39 40 <script> 41 window.info = parent.info; 42 window.is = parent.is; 43 window.isnot = parent.isnot; 44 window.ok = parent.ok; 45 46 const pre = document.getElementById("select"); 47 48 var sel = window.getSelection(); 49 50 function enableSelection(id) { 51 var span = document.getElementById(id); 52 span.style.MozUserSelect = 'text'; 53 } 54 55 function setupPrevSelection() { 56 dragSelectPoints(pre, 300, 125, 200, 5); 57 } 58 59 function setupNextSelection() { 60 dragSelectPoints(pre, 199, 5, 300, 125); 61 } 62 63 var ops = { 64 S_ : shiftClick, 65 SA : shiftAccelClick, 66 AD : accelDragSelect, 67 SL : keyLeft, 68 SR : keyRight 69 } 70 71 function runTest() { 72 const excludeNonSelectableNodes = SpecialPowers.getBoolPref("dom.selection.exclude_non_selectable_nodes"); 73 74 const firstText = pre.childNodes[0]; // [0] 1st line: 0-9 (+ leading linefeed 1) 75 const xBeforeSpan2 = firstText.nextSibling; // [1] 1st line: 0-4 76 const span2 = document.getElementById("span2"); // [2] 1st line: 0-13 77 // 2nd line: 14-42 78 // 3rd line: 43-49 79 const xAfterSpan2 = span2.nextSibling; // [3] 3rd line: 0-5 80 const span3 = document.getElementById("span3"); // [4] 3rd line: 0-16 81 // 4th line: 17-43 82 // 5th line: 44-74 83 // 6th line: 75-79 84 const xAfterSpan3 = span3.nextSibling; // [5] 6th line: 0-9 85 const lastText = xAfterSpan3.nextSibling; // [6] 6th line: 0-12 (+ trailing linefeed 1) 86 87 sel = window.getSelection(); 88 sel.removeAllRanges(); 89 document.body.offsetHeight; 90 var hash = window.location.hash 91 if (hash.substring(0,5)=="#prev") 92 setupPrevSelection(); 93 else 94 setupNextSelection(); 95 var op = hash.substring(6,8); 96 var action = ops[op]; 97 var test = hash.substring(0,6); 98 if (hash.substring(0,5) == "#prev") { 99 if (test == "#prev1") { 100 if (action == keyLeft) { 101 keyLeft({shiftKey:true}, 2) 102 checkRanges( 103 excludeNonSelectableNodes 104 ? [ 105 [firstText, 8, pre, 2], 106 [xAfterSpan2, 0, pre, 4], 107 [xAfterSpan3, 0, lastText, 0], 108 ] 109 : [[firstText, 8, lastText, 0]], 110 {id: "prev1: after Shift+ArrowLeft twice"} 111 ); 112 } else if (action == keyRight) { 113 keyRight({shiftKey:true}, 2) 114 checkRanges( 115 excludeNonSelectableNodes 116 ? [ 117 [xBeforeSpan2.firstChild, 2, pre, 2], 118 [xAfterSpan2, 0, pre, 4], 119 [xAfterSpan3, 0, lastText, 0], 120 ] 121 : [[xBeforeSpan2.firstChild, 2, lastText, 0]], 122 {id: "prev1: after Shift+ArrowRight twice"} 123 ); 124 } else if (action == accelDragSelect) { 125 accelDragSelect(pre, 30, 50); 126 checkRanges( 127 excludeNonSelectableNodes 128 ? [ 129 [firstText, 1, firstText, 2], 130 [xBeforeSpan2.firstChild, 0, pre, 2], 131 [xAfterSpan2, 0, pre, 4], 132 [xAfterSpan3, 0, lastText, 0], 133 ] 134 : [ 135 [firstText, 1, firstText, 2], 136 [xBeforeSpan2.firstChild, 0, lastText, 0], 137 ], 138 {id: "prev1: after accelDragSelect"} 139 ); 140 } else { 141 action(pre, 30); 142 checkRanges( 143 excludeNonSelectableNodes 144 ? [ 145 [firstText, 1, pre, 2], 146 [xAfterSpan2, 0, pre, 4], 147 [xAfterSpan3, 0, lastText, 0], 148 ] 149 : [[firstText, 1, lastText, 0]], 150 {id: `prev1: after action(${action.name})`} 151 ); 152 } 153 } else if (test == "#prev2") { 154 action(pre, 260); 155 checkRanges( 156 excludeNonSelectableNodes 157 ? [ 158 [xBeforeSpan2.firstChild, 3, pre, 2], 159 [xAfterSpan2, 0, pre, 4], 160 [xAfterSpan3, 0, lastText, 0], 161 ] 162 : [[xBeforeSpan2.firstChild, 3, lastText, 0]], 163 {id: `prev2: after action(${action.name})`} 164 ); 165 } else if (test == "#prev3") { 166 enableSelection('span2'); 167 action(pre, 400); 168 checkRanges( 169 excludeNonSelectableNodes 170 ? [ 171 [span2.firstChild, 5, pre, 4], 172 [xAfterSpan3, 0, lastText, 0], 173 ] 174 : [[span2.firstChild, 5, lastText, 0]], 175 {id: `prev3: after action(${action.name}) with enabling selection of span2`} 176 ); 177 } else if (test == "#prev4") { 178 action(pre, 180, 65); 179 checkRanges( 180 excludeNonSelectableNodes 181 ? [ 182 [xAfterSpan2.firstChild, 2, pre, 4], 183 [xAfterSpan3, 0, lastText, 0], 184 ] 185 : [[xAfterSpan2.firstChild, 2, lastText, 0]], 186 {id: `prev4: after action(${action.name})`} 187 ); 188 } else if (test == "#prev5") { 189 enableSelection('span3'); 190 action(pre, 440, 65); 191 checkRanges( 192 [[span3.firstChild, 10, lastText, 0]], 193 {id: `prev5: after action(${action.name}) with enabling selection of span3`} 194 ); 195 } else if (test == "#prev6") { 196 action(pre, 140, 125); 197 checkRanges( 198 [[xAfterSpan3.firstChild, 2, lastText, 0]], 199 {id: `prev6: after action(${action.name})`} 200 ); 201 } else if (test == "#prev7") { 202 if (action == accelDragSelect) { 203 accelDragSelect(pre, 460, 500, 125); 204 checkRanges( 205 excludeNonSelectableNodes 206 ? [ 207 [xBeforeSpan2.firstChild, 0, pre, 2], 208 [xAfterSpan2, 0, pre, 4], 209 [xAfterSpan3, 0, lastText, 0], 210 [lastText, 8, lastText, 10], 211 ] 212 : [ 213 [xBeforeSpan2.firstChild, 0, lastText, 0], 214 [lastText, 8, lastText, 10], 215 ], 216 {id: "prev7: after accelDragSelect"} 217 ); 218 } else { 219 action(pre, 500, 125); 220 checkRanges( 221 [[lastText, 0, lastText, 10]], 222 {id: `prev7: after action(${action.name})`} 223 ); 224 } 225 } else if (test == "#prev8") { 226 if (action == accelDragSelect) { 227 sel.removeAllRanges(); 228 synthesizeMouse(pre, 200, 125, {type: "mousedown", accelKey: true}); 229 synthesizeMouse(pre, 200, 120, {type: "mousemove", accelKey: true}); 230 synthesizeMouse(pre, 200, 100, {type: "mousemove", accelKey: true}); 231 synthesizeMouse(pre, 200, 80, {type: "mousemove", accelKey: true}); 232 synthesizeMouse(pre, 210, 60, {type: "mousemove", accelKey: true}); 233 synthesizeMouse(pre, 200, 60, {type: "mousemove", accelKey: true}); 234 synthesizeMouse(pre, 200, 60, {type: "mouseup", accelKey: true}); 235 checkRanges( 236 excludeNonSelectableNodes 237 ? [ 238 [xAfterSpan2.firstChild, 3, pre, 4], 239 [xAfterSpan3, 0, xAfterSpan3.firstChild, 5], 240 ] 241 : [[xAfterSpan2.firstChild, 3, xAfterSpan3.firstChild, 5]], 242 {id: "prev8: after dragging mouse with pressing accel key"} 243 ); 244 } 245 } 246 } else { 247 if (test == "#next1") { 248 if (action == keyLeft) { 249 keyLeft({shiftKey:true}, 2) 250 checkRanges( 251 excludeNonSelectableNodes 252 ? [ 253 [firstText, 10, pre, 2], 254 [xAfterSpan2, 0, pre, 4], 255 [xAfterSpan3, 0, xAfterSpan3.firstChild, 8], 256 ] 257 : [[firstText, 10, xAfterSpan3.firstChild, 8]], 258 {id: "next1: after Shift+ArrowLeft twice"} 259 ); 260 } else if (action == keyRight) { 261 keyRight({shiftKey:true}, 2) 262 checkRanges( 263 excludeNonSelectableNodes 264 ? [ 265 [firstText, 10, pre, 2], 266 [xAfterSpan2, 0, pre, 4], 267 [xAfterSpan3, 0, lastText, 2], 268 ] 269 : [[firstText, 10, lastText, 2]], 270 {id: "next1: after Shift+ArrowRight twice"} 271 ); 272 } else if (action == accelDragSelect) { 273 accelDragSelect(pre, 30, 50); 274 checkRanges( 275 excludeNonSelectableNodes 276 ? [ 277 [firstText, 1, firstText, 2], 278 [firstText, 10, pre, 2], 279 [xAfterSpan2, 0, pre, 4], 280 [xAfterSpan3, 0, xAfterSpan3.firstChild, 10], 281 ] 282 : [ 283 [firstText, 1, firstText, 2], 284 [firstText, 10, xAfterSpan3.firstChild, 10], 285 ], 286 {id: "next1: after accelDragSelect"} 287 ); 288 } else { 289 action(pre, 30); 290 checkRanges( 291 [[firstText, 1, firstText, 10]], 292 {id: `next1: after action(${action.name})`} 293 ); 294 } 295 } else if (test == "#next2") { 296 action(pre, 260); 297 checkRanges( 298 [[firstText, 10, xBeforeSpan2.firstChild, 3]], 299 {id: `next2: after action(${action.name})`} 300 ); 301 } else if (test == "#next3") { 302 enableSelection('span2'); 303 action(pre, 400); 304 checkRanges( 305 [[firstText, 10, span2.firstChild, 5]], 306 {id: `next3: after action(${action.name}) with enabling selection in span2`} 307 ); 308 } else if (test == "#next4") { 309 action(pre, 180, 65); 310 checkRanges( 311 excludeNonSelectableNodes 312 ? [ 313 [firstText, 10, pre, 2], 314 [xAfterSpan2, 0, xAfterSpan2.firstChild, 2], 315 ] 316 : [[firstText, 10, xAfterSpan2.firstChild, 2]], 317 {id: `next4: after action(${action.name})`} 318 ); 319 } else if (test == "#next5") { 320 enableSelection('span3'); 321 action(pre, 440, 65); 322 checkRanges( 323 excludeNonSelectableNodes 324 ? [ 325 [firstText, 10, pre, 2], 326 [xAfterSpan2, 0, span3.firstChild, 10], 327 ] 328 : [[firstText, 10, span3.firstChild, 10]], 329 {id: `next5: after action(${action.name}) with enabling selection in span3`} 330 ); 331 } else if (test == "#next6") { 332 action(pre, 140, 125); 333 checkRanges( 334 excludeNonSelectableNodes 335 ? [ 336 [firstText, 10, pre, 2], 337 [xAfterSpan2, 0, pre, 4], 338 [xAfterSpan3, 0, xAfterSpan3.firstChild, 2], 339 ] 340 : [[firstText, 10, xAfterSpan3.firstChild, 2]], 341 {id: `next6: after action(${action.name})`} 342 ); 343 } else if (test == "#next7") { 344 if (action == keyRight) { 345 keyRight({shiftKey:true}, 2) 346 checkRanges( 347 excludeNonSelectableNodes 348 ? [ 349 [firstText, 10, pre, 2], 350 [xAfterSpan2, 0, pre, 4], 351 [xAfterSpan3, 0, lastText, 2], 352 ] 353 : [[firstText, 10, lastText, 2]], 354 {id: "next7: after Shift+ArrowRight twice"} 355 ); 356 } else if (action == accelDragSelect) { 357 accelDragSelect(pre, 460, 500, 125); 358 checkRanges( 359 excludeNonSelectableNodes 360 ? [ 361 [firstText, 10, pre, 2], 362 [xAfterSpan2, 0, pre, 4], 363 [xAfterSpan3, 0, xAfterSpan3.firstChild, 10], 364 [lastText, 8, lastText, 10], 365 ] 366 : [ 367 [firstText, 10, xAfterSpan3.firstChild, 10], 368 [lastText, 8, lastText, 10], 369 ], 370 {id: "next7: after accelDragSelect"} 371 ); 372 } else { 373 action(pre, 500, 125); 374 checkRanges( 375 excludeNonSelectableNodes 376 ? [ 377 [firstText, 10, pre, 2], 378 [xAfterSpan2, 0, pre, 4], 379 [xAfterSpan3, 0, lastText, 10], 380 ] 381 : [[firstText, 10, lastText, 10]], 382 {id: `next7: after action(${action.name}`} 383 ); 384 } 385 } else if (test == "#next8") { 386 if (action == accelDragSelect) { 387 sel.removeAllRanges(); 388 synthesizeMouse(pre, 200, 60, {type: "mousedown", accelKey: true}); 389 synthesizeMouse(pre, 180, 60, {type: "mousemove", accelKey: true}); 390 synthesizeMouse(pre, 200, 80, {type: "mousemove", accelKey: true}); 391 synthesizeMouse(pre, 200, 100, {type: "mousemove", accelKey: true}); 392 synthesizeMouse(pre, 200, 120, {type: "mousemove", accelKey: true}); 393 synthesizeMouse(pre, 190, 125, {type: "mousemove", accelKey: true}); 394 synthesizeMouse(pre, 200, 125, {type: "mousemove", accelKey: true}); 395 synthesizeMouse(pre, 200, 125, {type: "mouseup", accelKey: true}); 396 checkRanges( 397 excludeNonSelectableNodes 398 ? [ 399 [xAfterSpan2.firstChild, 3, pre, 4], 400 [xAfterSpan3, 0, xAfterSpan3.firstChild, 5], 401 ] 402 : [[xAfterSpan2.firstChild, 3,xAfterSpan3.firstChild, 5]], 403 {id: "next8: after dragging with pressing Accel key"} 404 ); 405 } 406 } 407 } 408 document.documentElement.removeAttribute("class"); 409 } 410 411 SimpleTest.waitForFocus(function(){setTimeout(runTest,0)}); 412 413 </script> 414 415 </body> 416 </html>