test_selection_expanding.html (14802B)
1 <!DOCTYPE> 2 <html> 3 <head> 4 <title>selection expanding test</title> 5 <script src="/tests/SimpleTest/SimpleTest.js"></script> 6 <script src="/tests/SimpleTest/EventUtils.js"></script> 7 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> 8 <script> 9 customElements.define("custom-element", class extends HTMLElement { 10 constructor() { 11 super(); 12 const template = document.getElementById("template"); 13 const shadowRoot = this.attachShadow({mode: "open"}) 14 .appendChild(template.content.cloneNode(true)); 15 } 16 }); 17 </script> 18 <style type="text/css"> 19 .testingDiv { 20 font-size: 16px; 21 width: 300px; 22 height: 140px; 23 background-color: white; 24 } 25 #fixedDiv1, #fixedDiv2 { 26 position: fixed; 27 right: 0; 28 overflow: scroll; 29 width: 200px; 30 } 31 #fixedDiv1 { 32 top: 0; 33 } 34 #fixedDiv2 { 35 top: 150px; 36 } 37 iframe, input, textarea { 38 font-size: 16px; 39 height: 16px; 40 width: 80px; 41 margin: 0; 42 padding: 0; 43 } 44 </style> 45 46 </head> 47 <body> 48 <template id="template"> 49 <div> 50 <p>xxxxxxx xxxxxxx xxxxxxx</p> 51 <slot></slot> 52 </div> 53 </template> 54 <div id="div1" class="testingDiv"> 55 aaaaaaa 56 <iframe id="iframe" srcdoc="<style type='text/css'>*{margin: 0; padding: 0; font-size: 16px;}</style><div>ffffff ffffff ffffff ffffff</div>"></iframe> 57 aaaaaaa aaaaaaa<br>aaaaaaa aaaaaaa aaaaaaa aaaaaaa<br>aaaaaaa 58 </div> 59 <div id="div2" class="testingDiv"> 60 bbbbbbb 61 <input id="input" type="text" value="iiiiiiiii iiiiiiiii iiiiiiiii"> 62 bbbbbbb bbbbbbb<br>bbbbbbb bbbbbbb bbbbbbb<br>bbbbbbb 63 </div> 64 <div id="div3" class="testingDiv"> 65 ccccccc 66 <textarea id="textarea">tttttt tttttt tttttt</textarea> 67 ccccccc ccccccc<br>ccccccc ccccccc ccccccc ccccccc<br>ccccccc 68 <div id="fixedDiv1" class="testingDiv"> 69 dddddd dddddd dddddd 70 </div> 71 </div> 72 <custom-element id="custom"> 73 <p id="custom_child">yyyyyyy yyyyyyy yyyyyyy</p> 74 </custom-element> 75 <div id="fixedDiv2" class="testingDiv"> 76 eeeeee eeeeee eeeeee 77 </div> 78 <pre id="test"> 79 <script class="testbody" type="text/javascript"> 80 81 var div1 = document.getElementById("div1"); 82 var div2 = document.getElementById("div2"); 83 var div3 = document.getElementById("div3"); 84 var custom_child = document.getElementById("custom_child"); 85 var fixedDiv1 = document.getElementById("fixedDiv1"); 86 var fixedDiv2 = document.getElementById("fixedDiv2"); 87 var iframe = document.getElementById("iframe"); 88 var input = document.getElementById("input"); 89 var textarea = SpecialPowers.wrap(document.getElementById("textarea")); 90 91 function test() 92 { 93 function getSelectionForEditor(aEditorElement) 94 { 95 return SpecialPowers.wrap(aEditorElement).editor.selection; 96 } 97 98 function clear() 99 { 100 synthesizeMouse(div1, 10, 5, { type: "mouseup" }); 101 var sel = window.getSelection(); 102 if (sel.rangeCount > 0) 103 sel.collapseToEnd(); 104 sel = iframe.contentWindow.getSelection(); 105 if (sel.rangeCount > 0) 106 sel.collapseToEnd(); 107 sel = getSelectionForEditor(input); 108 if (sel.rangeCount > 0) 109 sel.collapseToEnd(); 110 sel = getSelectionForEditor(textarea); 111 if (sel.rangeCount > 0) 112 sel.collapseToEnd(); 113 114 div1.scrollTop = 0; 115 div1.scrollLeft = 0; 116 div2.scrollTop = 0; 117 div2.scrollLeft = 0; 118 div3.scrollTop = 0; 119 div3.scrollLeft = 0; 120 } 121 122 const kFalse = 0; 123 const kTrue = 1; 124 const kToDo = 2; 125 126 function check(aDiv1ShouldBeSelected, 127 aDiv2ShouldBeSelected, 128 aDiv3ShouldBeSelected, 129 aFixedDiv1ShouldBeSelected, 130 aCustomChildShouldBeSelected, 131 aFixedDiv2ShouldBeSelected, 132 aIFrameShouldBeSelected, 133 aInputShouldBeSelected, 134 aTextareaShouldBeSelected, 135 aTestingDescription) 136 { 137 function checkCharacter(aSelectedText, 138 aShouldBeIncludedCharacter, 139 aSouldBeSelected, 140 aElementName) 141 { 142 var boolvalue = aSouldBeSelected & kTrue; 143 var f = aSouldBeSelected & kToDo ? todo : ok; 144 var str = aSelectedText.replace('\n', '\\n'); 145 if (boolvalue) { 146 f(aSelectedText.includes(aShouldBeIncludedCharacter), 147 "The contents of " + aElementName + 148 " aren't selected (" + aTestingDescription + 149 "): Selected String: \"" + str + "\""); 150 } else { 151 f(!aSelectedText.includes(aShouldBeIncludedCharacter), 152 "The contents of " + aElementName + 153 " are selected (" + aTestingDescription + 154 "): Selected String: \"" + str + "\""); 155 } 156 } 157 158 var sel = window.getSelection().toString(); 159 checkCharacter(sel, "a", aDiv1ShouldBeSelected, "div1"); 160 checkCharacter(sel, "b", aDiv2ShouldBeSelected, "div2"); 161 checkCharacter(sel, "c", aDiv3ShouldBeSelected, "div3"); 162 checkCharacter(sel, "y", aCustomChildShouldBeSelected, "custom_child"); 163 checkCharacter(sel, "d", aFixedDiv1ShouldBeSelected, "fixedDiv1"); 164 checkCharacter(sel, "e", aFixedDiv2ShouldBeSelected, "fixedDiv2"); 165 166 // iframe/input/custom-element contents must not be included on the parent 167 // selection. 168 checkCharacter(sel, "f", false, "iframe (checking on parent)"); 169 checkCharacter(sel, "i", 170 SpecialPowers.getBoolPref("dom.selection.mimic_chrome_tostring.enabled") 171 ? aInputShouldBeSelected 172 : false, 173 "input (checking on parent)"); 174 checkCharacter(sel, "x", false, "Custom element contents (checking on parent)"); 175 176 var selInIFrame = iframe.contentWindow.getSelection().toString(); 177 checkCharacter(selInIFrame, "f", aIFrameShouldBeSelected, "iframe"); 178 179 var selInput = getSelectionForEditor(input).toString(); 180 checkCharacter(selInput, "i", aInputShouldBeSelected, "input"); 181 var selTextarea = getSelectionForEditor(textarea).toString(); 182 checkCharacter(selTextarea, "t", aTextareaShouldBeSelected, "textarea"); 183 } 184 185 // *********************************************************** 186 // Set all divs to overflow: auto; 187 const kOverflows = ["visible", "hidden", "scroll", "auto"]; 188 for (var i = 0; i < kOverflows.length; i++) { 189 div1.style.overflow = kOverflows[i]; 190 div2.style.overflow = kOverflows[i]; 191 div3.style.overflow = kOverflows[i]; 192 193 // *********************************************************** 194 // selection starting at div1 195 synthesizeMouse(div1, 30, 5, { type: "mousedown" }); 196 197 // XXX if we move the mouse cursor to another document, the 198 // nsFrameSelection::HandleDrag method is called on the another document's. 199 200 // to iframe 201 synthesizeMouse(iframe, 30, 5, { type: "mousemove" }); 202 check(kTrue | kToDo, kFalse, kFalse, 203 kFalse, kFalse, kFalse, kFalse, kFalse, kFalse, 204 "div1-iframe, all boxes are overflow: " + kOverflows[i] + ";"); 205 206 // XXX if the overflow is visible, synthesizeMouse with the input element 207 // or textarea element doesn't work fine. 208 var isVisibleTesting = kOverflows[i] == "visible"; 209 var todoFlag = isVisibleTesting ? kToDo : 0; 210 // to input 211 synthesizeMouse(input, 30, 5, { type: "mousemove" }); 212 check(kTrue | todoFlag, kTrue | todoFlag, kFalse, 213 kFalse, kFalse, kFalse, kFalse, kFalse, kFalse, 214 "div1-input, all boxes are overflow: " + kOverflows[i] + ";"); 215 216 // to textarea 217 synthesizeMouse(textarea, 30, 5, { type: "mousemove" }); 218 check(kTrue | todoFlag, kTrue | todoFlag, kTrue | todoFlag, 219 kFalse, kFalse, kFalse, kFalse, kFalse, kFalse, 220 "div1-textarea, all boxes are overflow: " + kOverflows[i] + ";"); 221 222 // to div2 223 synthesizeMouse(div2, 30, 5, { type: "mousemove" }); 224 check(kTrue, kTrue, kFalse, 225 kFalse, kFalse, kFalse, kFalse, kFalse, kFalse, 226 "div1-div2, all boxes are overflow: " + kOverflows[i] + ";"); 227 228 // to div3 229 synthesizeMouse(div3, 30, 5, { type: "mousemove" }); 230 check(kTrue, kTrue, kTrue, 231 kFalse, kFalse, kFalse, kFalse, kFalse, kFalse, 232 "div1-div3, all boxes are overflow: " + kOverflows[i] + ";"); 233 234 // to fixedDiv1 (child of div3) 235 synthesizeMouse(fixedDiv1, 30, 5, { type: "mousemove" }); 236 check(kTrue, kTrue, kTrue, 237 kTrue, kFalse, kFalse, kFalse, kFalse, kFalse, 238 "div1-fixedDiv1, all boxes are overflow: " + kOverflows[i] + ";"); 239 240 // to custom_child 241 synthesizeMouse(custom_child, 30, 5, { type: "mousemove" }); 242 check(kTrue, kTrue, kTrue, 243 kTrue, kTrue, kFalse, kFalse, kFalse, kFalse, 244 "div1-custom_child, all boxes are overflow: " + kOverflows[i] + ";"); 245 246 // to fixedDiv2 (sibling of div*) 247 synthesizeMouse(fixedDiv2, 30, 5, { type: "mousemove" }); 248 check(kTrue, kTrue, kTrue, 249 kTrue, kTrue, kTrue, kFalse, kFalse, kFalse, 250 "div1-fixedDiv2, all boxes are overflow: " + kOverflows[i] + ";"); 251 252 clear(); 253 254 // *********************************************************** 255 // selection starting at fixedDiv1 256 synthesizeMouse(fixedDiv1, 30, 5, { type: "mousedown" }); 257 258 // to custom_child 259 synthesizeMouse(custom_child, 30, 5, { type: "mousemove" }); 260 check(kFalse, kFalse, kFalse, 261 kTrue, kTrue, kFalse, kFalse, kFalse, kFalse, 262 "fixedDiv1-custom_child, all boxes are overflow: " + kOverflows[i] + ";"); 263 264 // to fixedDiv2 265 synthesizeMouse(fixedDiv2, 30, 5, { type: "mousemove" }); 266 check(kFalse, kFalse, kFalse, 267 kTrue, kTrue, kTrue, kFalse, kFalse, kFalse, 268 "fixedDiv1-fixedDiv2, all boxes are overflow: " + kOverflows[i] + ";"); 269 270 clear(); 271 272 // *********************************************************** 273 // selection starting at fixedDiv2 274 synthesizeMouse(fixedDiv2, 30, 5, { type: "mousedown" }); 275 276 // to custom_child 277 synthesizeMouse(custom_child, 30, 5, { type: "mousemove" }); 278 check(kFalse, kFalse, kFalse, 279 kFalse, kTrue, kTrue, kFalse, kFalse, kFalse, 280 "fixedDiv2-custom_child, all boxes are overflow: " + kOverflows[i] + ";"); 281 282 // to fixedDiv1 283 synthesizeMouse(fixedDiv1, 30, 5, { type: "mousemove" }); 284 check(kFalse, kFalse, kFalse, 285 kTrue, kTrue, kTrue, kFalse, kFalse, kFalse, 286 "fixedDiv2-fixedDiv1, all boxes are overflow: " + kOverflows[i] + ";"); 287 288 clear(); 289 290 // *********************************************************** 291 div2.style.overflow = "visible"; 292 293 // *********************************************************** 294 // selection starting at div2 295 synthesizeMouse(div2, 30, 5, { type: "mousedown" }); 296 297 // to div3 298 synthesizeMouse(div3, 30, 5, { type: "mousemove" }); 299 check(kFalse, kTrue, kTrue, 300 kFalse, kFalse, kFalse, kFalse, kFalse, kFalse, 301 "div2-div3, div3 is overflow: " + kOverflows[i] + 302 ";, but div2 is overflow: visible;"); 303 304 // to fixedDiv1 (child of div3) 305 synthesizeMouse(fixedDiv1, 30, 5, { type: "mousemove" }); 306 check(kFalse, kTrue, kTrue, 307 kTrue, kFalse, kFalse, kFalse, kFalse, kFalse, 308 "div2-fixedDiv1, div3 is overflow: " + kOverflows[i] + 309 ";, but div2 is overflow: visible;"); 310 311 // to custom_child 312 synthesizeMouse(custom_child, 30, 5, { type: "mousemove" }); 313 check(kFalse, kTrue, kTrue, 314 kTrue, kTrue, kFalse, kFalse, kFalse, kFalse, 315 "div2-custom_child, div3 is overflow: " + kOverflows[i] + 316 ";, but div2 is overflow: visible;"); 317 318 // to fixedDiv2 (sibling of div*) 319 synthesizeMouse(fixedDiv2, 30, 5, { type: "mousemove" }); 320 check(kFalse, kTrue, kTrue, 321 kTrue, kTrue, kTrue, kFalse, kFalse, kFalse, 322 "div2-fixedDiv2, div3 is overflow: " + kOverflows[i] + 323 ";, but div2 is overflow: visible;"); 324 325 clear(); 326 327 // *********************************************************** 328 // selection starting at div3 329 synthesizeMouse(div3, 30, 5, { type: "mousedown" }); 330 331 // to div2 332 synthesizeMouse(div2, 30, 5, { type: "mousemove" }); 333 check(kFalse, kTrue, kTrue, 334 kFalse, kFalse, kFalse, kFalse, kFalse, kFalse, 335 "div3-div2, div3 is overflow: " + kOverflows[i] + 336 ";, but div2 is overflow: visible;"); 337 338 // to fixedDiv1 (child of div3) 339 synthesizeMouse(fixedDiv1, 30, 5, { type: "mousemove" }); 340 check(kFalse, kFalse, kTrue, 341 kTrue, kFalse, kFalse, kFalse, kFalse, kFalse, 342 "div3-fixedDiv1, div3 is overflow: " + kOverflows[i] + 343 ";, but div2 is overflow: visible;"); 344 345 // to custom_child 346 synthesizeMouse(custom_child, 30, 5, { type: "mousemove" }); 347 check(kFalse, kFalse, kTrue, 348 kTrue, kTrue, kFalse, kFalse, kFalse, kFalse, 349 "div3-custom_child, div3 is overflow: " + kOverflows[i] + 350 ";, but div2 is overflow: visible;"); 351 352 // to fixedDiv2 (sibling of div*) 353 synthesizeMouse(fixedDiv2, 30, 5, { type: "mousemove" }); 354 check(kFalse, kFalse, kTrue, 355 kTrue, kTrue, kTrue, kFalse, kFalse, kFalse, 356 "div3-fixedDiv2, div3 is overflow: " + kOverflows[i] + 357 ";, but div2 is overflow: visible;"); 358 359 clear(); 360 } 361 362 // *********************************************************** 363 // selection starting at iframe 364 synthesizeMouse(iframe, 20, 5, { type: "mousedown" }); 365 366 // inside iframe 367 synthesizeMouse(iframe, 50, 5, { type: "mousemove" }); 368 check(kFalse, kFalse, kFalse, 369 kFalse, kFalse, kFalse, kTrue, kFalse, kFalse, 370 "iframe-iframe"); 371 372 // to div2 373 synthesizeMouse(div2, 30, 5, { type: "mousemove" }); 374 check(kFalse, kFalse, kFalse, 375 kFalse, kFalse, kFalse, kTrue, kFalse, kFalse, 376 "iframe-div2"); 377 378 clear(); 379 380 // *********************************************************** 381 // selection starting at input 382 synthesizeMouse(input, 20, 5, { type: "mousedown" }); 383 384 // inside input 385 synthesizeMouse(input, 40, 5, { type: "mousemove" }); 386 check(kFalse, kFalse, kFalse, 387 kFalse, kFalse, kFalse, kFalse, kTrue, kFalse, 388 "input-input"); 389 390 // to div3 391 synthesizeMouse(div3, 30, 5, { type: "mousemove" }); 392 check(kFalse, kFalse, kFalse, 393 kFalse, kFalse, kFalse, kFalse, kTrue, kFalse, 394 "input-div3"); 395 396 clear(); 397 398 // *********************************************************** 399 // selection starting at textarea 400 synthesizeMouse(textarea, 30, 5, { type: "mousedown" }); 401 402 // inside textarea 403 synthesizeMouse(textarea, 50, 5, { type: "mousemove" }); 404 check(kFalse, kFalse, kFalse, 405 kFalse, kFalse, kFalse, kFalse, kFalse, kTrue, 406 "textarea-textarea"); 407 408 // to div2 409 synthesizeMouse(div2, 30, 5, { type: "mousemove" }); 410 check(kFalse, kFalse, kFalse, 411 kFalse, kFalse, kFalse, kFalse, kFalse, kTrue, 412 "textarea-div2"); 413 414 clear(); 415 416 SimpleTest.finish(); 417 } 418 window.onload = function() { setTimeout(test, 0); }; 419 SimpleTest.waitForExplicitFinish(); 420 </script> 421 </pre> 422 </body> 423 </html>