caret-position-should-be-correct-while-moveup-movedown.html (19494B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 .vertical-lr { 8 writing-mode: vertical-lr; 9 border: 1px solid black; 10 padding: 10px; 11 width: 100px; 12 height: 200px; 13 } 14 .vertical-rl { 15 writing-mode: vertical-rl; 16 border: 1px solid black; 17 padding: 10px; 18 width: 100px; 19 height: 200px; 20 } 21 </style> 22 </head> 23 <body> 24 <div contenteditable id="horizontal">text1<br />text2</div> 25 <div contenteditable class="vertical-lr" id="vertical_lr"> 26 text1<br /> 27 text2 28 </div> 29 <div contenteditable class="vertical-rl" id="vertical_rl"> 30 text1<br /> 31 text2 32 </div> 33 34 <script> 35 const horizontal = document.getElementById("horizontal"); 36 const verticalLR = document.getElementById("vertical_lr"); 37 const verticalRL = document.getElementById("vertical_rl"); 38 const tests = [ 39 { 40 elementUnderTest: horizontal, 41 startNode: horizontal.childNodes[2], 42 endNode: horizontal.childNodes[0], 43 anchorOffset: horizontal.childNodes[2].textContent.indexOf( 44 horizontal.childNodes[2].textContent.trim() 45 ), 46 focusOffset: 47 horizontal.childNodes[2].textContent.indexOf( 48 horizontal.childNodes[2].textContent.trim() 49 ) + horizontal.childNodes[2].textContent.trim().length, 50 direction: "backward", 51 granularity: "line", 52 description: 53 "Caret position should be correct in moving up horizontal div when selection was left to right with line granularity", 54 }, 55 { 56 elementUnderTest: horizontal, 57 startNode: horizontal.childNodes[2], 58 endNode: horizontal.childNodes[0], 59 anchorOffset: 60 horizontal.childNodes[2].textContent.indexOf( 61 horizontal.childNodes[2].textContent.trim() 62 ) + horizontal.childNodes[2].textContent.trim().length, 63 focusOffset: horizontal.childNodes[2].textContent.indexOf( 64 horizontal.childNodes[2].textContent.trim() 65 ), 66 direction: "backward", 67 granularity: "line", 68 description: 69 "Caret position should be correct in moving up horizontal div when selection was right to left with line granularity", 70 }, 71 { 72 elementUnderTest: horizontal, 73 startNode: horizontal.childNodes[0], 74 endNode: horizontal.childNodes[2], 75 anchorOffset: horizontal.childNodes[0].textContent.indexOf( 76 horizontal.childNodes[0].textContent.trim() 77 ), 78 focusOffset: 79 horizontal.childNodes[0].textContent.indexOf( 80 horizontal.childNodes[0].textContent.trim() 81 ) + horizontal.childNodes[0].textContent.trim().length, 82 direction: "forward", 83 granularity: "line", 84 description: 85 "Caret position should be correct in moving down horizontal div when selection was left to right with line granularity", 86 }, 87 { 88 elementUnderTest: horizontal, 89 startNode: horizontal.childNodes[0], 90 endNode: horizontal.childNodes[2], 91 anchorOffset: 92 horizontal.childNodes[0].textContent.indexOf( 93 horizontal.childNodes[0].textContent.trim() 94 ) + horizontal.childNodes[0].textContent.trim().length, 95 focusOffset: horizontal.childNodes[0].textContent.indexOf( 96 horizontal.childNodes[0].textContent.trim() 97 ), 98 direction: "forward", 99 granularity: "line", 100 description: 101 "Caret position should be correct in moving down horizontal div when selection was right to left with line granularity", 102 }, 103 { 104 elementUnderTest: horizontal, 105 startNode: horizontal.childNodes[2], 106 endNode: horizontal.childNodes[0], 107 anchorOffset: horizontal.childNodes[2].textContent.indexOf( 108 horizontal.childNodes[2].textContent.trim() 109 ), 110 focusOffset: 111 horizontal.childNodes[2].textContent.indexOf( 112 horizontal.childNodes[2].textContent.trim() 113 ) + horizontal.childNodes[2].textContent.trim().length, 114 direction: "backward", 115 granularity: "paragraph", 116 description: 117 "Caret position should be correct in moving up horizontal div when selection was left to right with paragraph granularity", 118 }, 119 { 120 elementUnderTest: horizontal, 121 startNode: horizontal.childNodes[2], 122 endNode: horizontal.childNodes[0], 123 anchorOffset: 124 horizontal.childNodes[2].textContent.indexOf( 125 horizontal.childNodes[2].textContent.trim() 126 ) + horizontal.childNodes[2].textContent.trim().length, 127 focusOffset: horizontal.childNodes[2].textContent.indexOf( 128 horizontal.childNodes[2].textContent.trim() 129 ), 130 direction: "backward", 131 granularity: "paragraph", 132 description: 133 "Caret position should be correct in moving up horizontal div when selection was right to left with paragraph granularity", 134 }, 135 { 136 elementUnderTest: horizontal, 137 startNode: horizontal.childNodes[0], 138 endNode: horizontal.childNodes[2], 139 anchorOffset: horizontal.childNodes[0].textContent.indexOf( 140 horizontal.childNodes[0].textContent.trim() 141 ), 142 focusOffset: 143 horizontal.childNodes[0].textContent.indexOf( 144 horizontal.childNodes[0].textContent.trim() 145 ) + horizontal.childNodes[0].textContent.trim().length, 146 direction: "forward", 147 granularity: "paragraph", 148 description: 149 "Caret position should be correct in moving down horizontal div when selection was left to right with paragraph granularity", 150 }, 151 { 152 elementUnderTest: horizontal, 153 startNode: horizontal.childNodes[0], 154 endNode: horizontal.childNodes[2], 155 anchorOffset: 156 horizontal.childNodes[0].textContent.indexOf( 157 horizontal.childNodes[0].textContent.trim() 158 ) + horizontal.childNodes[0].textContent.trim().length, 159 focusOffset: horizontal.childNodes[0].textContent.indexOf( 160 horizontal.childNodes[0].textContent.trim() 161 ), 162 direction: "forward", 163 granularity: "paragraph", 164 description: 165 "Caret position should be correct in moving down horizontal div when selection was right to left with paragraph granularity", 166 }, 167 { 168 elementUnderTest: verticalLR, 169 startNode: verticalLR.childNodes[0], 170 endNode: verticalLR.childNodes[2], 171 anchorOffset: verticalLR.childNodes[0].textContent.indexOf( 172 verticalLR.childNodes[0].textContent.trim() 173 ), 174 focusOffset: 175 verticalLR.childNodes[0].textContent.indexOf( 176 verticalLR.childNodes[0].textContent.trim() 177 ) + verticalLR.childNodes[0].textContent.trim().length, 178 direction: "forward", 179 granularity: "line", 180 description: 181 "Caret position should be correct in move right with line granularity for vertical-lr div when selection was top to bottom", 182 }, 183 { 184 elementUnderTest: verticalLR, 185 startNode: verticalLR.childNodes[0], 186 endNode: verticalLR.childNodes[2], 187 anchorOffset: 188 verticalLR.childNodes[0].textContent.indexOf( 189 verticalLR.childNodes[0].textContent.trim() 190 ) + verticalLR.childNodes[0].textContent.trim().length, 191 focusOffset: verticalLR.childNodes[0].textContent.indexOf( 192 verticalLR.childNodes[0].textContent.trim() 193 ), 194 direction: "forward", 195 granularity: "line", 196 description: 197 "Caret position should be correct in move right with line granularity for vertical-lr div when selection was bottom to top", 198 }, 199 { 200 elementUnderTest: verticalLR, 201 startNode: verticalLR.childNodes[2], 202 endNode: verticalLR.childNodes[0], 203 anchorOffset: verticalLR.childNodes[2].textContent.indexOf( 204 verticalLR.childNodes[2].textContent.trim() 205 ), 206 focusOffset: 207 verticalLR.childNodes[2].textContent.indexOf( 208 verticalLR.childNodes[2].textContent.trim() 209 ) + verticalLR.childNodes[2].textContent.trim().length, 210 direction: "backward", 211 granularity: "line", 212 description: 213 "Caret position should be correct in move left with line granularity for vertical-lr div when selection was top to bottom", 214 }, 215 { 216 elementUnderTest: verticalLR, 217 startNode: verticalLR.childNodes[2], 218 endNode: verticalLR.childNodes[0], 219 anchorOffset: 220 verticalLR.childNodes[2].textContent.indexOf( 221 verticalLR.childNodes[2].textContent.trim() 222 ) + verticalLR.childNodes[2].textContent.trim().length, 223 focusOffset: verticalLR.childNodes[2].textContent.indexOf( 224 verticalLR.childNodes[2].textContent.trim() 225 ), 226 direction: "backward", 227 granularity: "line", 228 description: 229 "Caret position should be correct in move left with line granularity for vertical-lr div when selection was bottom to top", 230 }, 231 { 232 elementUnderTest: verticalLR, 233 startNode: verticalLR.childNodes[0], 234 endNode: verticalLR.childNodes[2], 235 anchorOffset: verticalLR.childNodes[0].textContent.indexOf( 236 verticalLR.childNodes[0].textContent.trim() 237 ), 238 focusOffset: 239 verticalLR.childNodes[0].textContent.indexOf( 240 verticalLR.childNodes[0].textContent.trim() 241 ) + verticalLR.childNodes[0].textContent.trim().length, 242 direction: "forward", 243 granularity: "paragraph", 244 description: 245 "Caret position should be correct in move right with paragraph granularity for vertical-lr div when selection was top to bottom", 246 }, 247 { 248 elementUnderTest: verticalLR, 249 startNode: verticalLR.childNodes[0], 250 endNode: verticalLR.childNodes[2], 251 anchorOffset: 252 verticalLR.childNodes[0].textContent.indexOf( 253 verticalLR.childNodes[0].textContent.trim() 254 ) + verticalLR.childNodes[0].textContent.trim().length, 255 focusOffset: verticalLR.childNodes[0].textContent.indexOf( 256 verticalLR.childNodes[0].textContent.trim() 257 ), 258 direction: "forward", 259 granularity: "paragraph", 260 description: 261 "Caret position should be correct in move right with paragraph granularity for vertical-lr div when selection was bottom to top", 262 }, 263 { 264 elementUnderTest: verticalLR, 265 startNode: verticalLR.childNodes[2], 266 endNode: verticalLR.childNodes[0], 267 anchorOffset: verticalLR.childNodes[2].textContent.indexOf( 268 verticalLR.childNodes[2].textContent.trim() 269 ), 270 focusOffset: 271 verticalLR.childNodes[2].textContent.indexOf( 272 verticalLR.childNodes[2].textContent.trim() 273 ) + verticalLR.childNodes[2].textContent.trim().length, 274 direction: "backward", 275 granularity: "paragraph", 276 description: 277 "Caret position should be correct in move left with paragraph granularity for vertical-lr div when selection was top to bottom", 278 }, 279 { 280 elementUnderTest: verticalLR, 281 startNode: verticalLR.childNodes[2], 282 endNode: verticalLR.childNodes[0], 283 anchorOffset: 284 verticalLR.childNodes[2].textContent.indexOf( 285 verticalLR.childNodes[2].textContent.trim() 286 ) + verticalLR.childNodes[2].textContent.trim().length, 287 focusOffset: verticalLR.childNodes[2].textContent.indexOf( 288 verticalLR.childNodes[2].textContent.trim() 289 ), 290 direction: "backward", 291 granularity: "paragraph", 292 description: 293 "Caret position should be correct in move left with paragraph granularity for vertical-lr div when selection was bottom to top", 294 }, 295 { 296 elementUnderTest: verticalLR, 297 startNode: verticalLR.childNodes[0], 298 endNode: verticalLR.childNodes[2], 299 anchorOffset: verticalLR.childNodes[0].textContent.indexOf( 300 verticalLR.childNodes[0].textContent.trim() 301 ), 302 focusOffset: 303 verticalLR.childNodes[0].textContent.indexOf( 304 verticalLR.childNodes[0].textContent.trim() 305 ) + verticalLR.childNodes[0].textContent.trim().length, 306 direction: "forward", 307 granularity: "line", 308 description: 309 "Caret position should be correct in move left with line granularity for vertical-rl div when selection was top to bottom", 310 }, 311 { 312 elementUnderTest: verticalLR, 313 startNode: verticalLR.childNodes[0], 314 endNode: verticalLR.childNodes[2], 315 anchorOffset: 316 verticalLR.childNodes[0].textContent.indexOf( 317 verticalLR.childNodes[0].textContent.trim() 318 ) + verticalLR.childNodes[0].textContent.trim().length, 319 focusOffset: verticalLR.childNodes[0].textContent.indexOf( 320 verticalLR.childNodes[0].textContent.trim() 321 ), 322 direction: "forward", 323 granularity: "line", 324 description: 325 "Caret position should be correct in move left with line granularity for vertical-rl div when selection was bottom to top", 326 }, 327 { 328 elementUnderTest: verticalLR, 329 startNode: verticalLR.childNodes[2], 330 endNode: verticalLR.childNodes[0], 331 anchorOffset: verticalLR.childNodes[2].textContent.indexOf( 332 verticalLR.childNodes[2].textContent.trim() 333 ), 334 focusOffset: 335 verticalLR.childNodes[2].textContent.indexOf( 336 verticalLR.childNodes[2].textContent.trim() 337 ) + verticalLR.childNodes[2].textContent.trim().length, 338 direction: "backward", 339 granularity: "line", 340 description: 341 "Caret position should be correct in move right with line granularity for vertical-rl div when selection was top to bottom", 342 }, 343 { 344 elementUnderTest: verticalLR, 345 startNode: verticalLR.childNodes[2], 346 endNode: verticalLR.childNodes[0], 347 anchorOffset: 348 verticalLR.childNodes[2].textContent.indexOf( 349 verticalLR.childNodes[2].textContent.trim() 350 ) + verticalLR.childNodes[2].textContent.trim().length, 351 focusOffset: verticalLR.childNodes[2].textContent.indexOf( 352 verticalLR.childNodes[2].textContent.trim() 353 ), 354 direction: "backward", 355 granularity: "line", 356 description: 357 "Caret position should be correct in move right with line granularity for vertical-rl div when selection was bottom to top", 358 }, 359 { 360 elementUnderTest: verticalLR, 361 startNode: verticalLR.childNodes[0], 362 endNode: verticalLR.childNodes[2], 363 anchorOffset: verticalLR.childNodes[0].textContent.indexOf( 364 verticalLR.childNodes[0].textContent.trim() 365 ), 366 focusOffset: 367 verticalLR.childNodes[0].textContent.indexOf( 368 verticalLR.childNodes[0].textContent.trim() 369 ) + verticalLR.childNodes[0].textContent.trim().length, 370 direction: "forward", 371 granularity: "line", 372 description: 373 "Caret position should be correct in move left with paragraph granularity for vertical-rl div when selection was top to bottom", 374 }, 375 { 376 elementUnderTest: verticalLR, 377 startNode: verticalLR.childNodes[0], 378 endNode: verticalLR.childNodes[2], 379 anchorOffset: 380 verticalLR.childNodes[0].textContent.indexOf( 381 verticalLR.childNodes[0].textContent.trim() 382 ) + verticalLR.childNodes[0].textContent.trim().length, 383 focusOffset: verticalLR.childNodes[0].textContent.indexOf( 384 verticalLR.childNodes[0].textContent.trim() 385 ), 386 direction: "forward", 387 granularity: "line", 388 description: 389 "Caret position should be correct in move left with paragraph granularity for vertical-rl div when selection was bottom to top", 390 }, 391 { 392 elementUnderTest: verticalLR, 393 startNode: verticalLR.childNodes[2], 394 endNode: verticalLR.childNodes[0], 395 anchorOffset: verticalLR.childNodes[2].textContent.indexOf( 396 verticalLR.childNodes[2].textContent.trim() 397 ), 398 focusOffset: 399 verticalLR.childNodes[2].textContent.indexOf( 400 verticalLR.childNodes[2].textContent.trim() 401 ) + verticalLR.childNodes[2].textContent.trim().length, 402 direction: "backward", 403 granularity: "line", 404 description: 405 "Caret position should be correct in move right with paragraph granularity for vertical-rl div when selection was top to bottom", 406 }, 407 { 408 elementUnderTest: verticalLR, 409 startNode: verticalLR.childNodes[2], 410 endNode: verticalLR.childNodes[0], 411 anchorOffset: 412 verticalLR.childNodes[2].textContent.indexOf( 413 verticalLR.childNodes[2].textContent.trim() 414 ) + verticalLR.childNodes[2].textContent.trim().length, 415 focusOffset: verticalLR.childNodes[2].textContent.indexOf( 416 verticalLR.childNodes[2].textContent.trim() 417 ), 418 direction: "backward", 419 granularity: "line", 420 description: 421 "Caret position should be correct in move right with paragraph granularity for vertical-rl div when selection was bottom to top", 422 }, 423 ]; 424 for (const testData of tests) { 425 test(function () { 426 // Get the selection object and set startNode to it. 427 const selection = window.getSelection(); 428 selection.removeAllRanges(); 429 selection.setBaseAndExtent( 430 testData.startNode, 431 testData.anchorOffset, 432 testData.startNode, 433 testData.focusOffset 434 ); 435 // Modify the selection as per the direction and granularity of the test 436 testData.elementUnderTest.focus(); 437 selection.modify( 438 "move", 439 testData.direction, 440 testData.granularity 441 ); 442 // After modification, the selection should should have collapsed and should be on the endNode of the test with offset same as the initial focus offset 443 assert_true(selection.isCollapsed); 444 assert_equals(selection.focusOffset, testData.focusOffset); 445 assert_equals(selection.focusNode, testData.endNode); 446 }, testData.description); 447 } 448 </script> 449 </body> 450 </html>