input-events-get-target-ranges-joining-dl-elements.tentative.html (25356B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <meta name="timeout" content="long"> 4 <meta name="variant" content="?Backspace"> 5 <meta name="variant" content="?Delete"> 6 <title>InputEvent.getTargetRanges() at deleting in/around/across list item elements</title> 7 <div contenteditable></div> 8 <script src="input-events-get-target-ranges.js"></script> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="/resources/testdriver.js"></script> 12 <script src="/resources/testdriver-vendor.js"></script> 13 <script src="/resources/testdriver-actions.js"></script> 14 <script> 15 "use strict"; 16 17 const action = location.search.substring(1); 18 function run() { 19 switch (action) { 20 case "Backspace": 21 return sendBackspaceKey(); 22 case "Delete": 23 return sendDeleteKey(); 24 default: 25 throw "Unhandled variant"; 26 } 27 } 28 29 /** 30 * @param innerHTML Initial `innerHTML` value of the editor. 31 * @param data 32 * expectedInnerHTML 33 * Expected `innerHTML` of the editor after calling 34 * `run()`. This can be array of string if there are 35 * some acceptable differences like whether there is 36 * an invisible `<br>` element at end of list item. 37 * expectedTargetRanges 38 * `null` or `unspecified` if `beforeinput` event shouldn't 39 * be fired. 40 * Otherwise, function returning an array of objects 41 * which have `startContainer`, `startOffset`, 42 * `endContainer`, `endOffset`. This will be called 43 * before calling `run()` and compared with 44 * `getTargetRanges()` after that. 45 * expectInputEvent: 46 * `true` if it should cause an `input` event. 47 */ 48 function addPromiseTest(innerHTML, data) { 49 promise_test(async (t) => { 50 initializeTest(innerHTML); 51 let expectedTargetRanges = 52 typeof data.expectedTargetRanges === "function" 53 ? data.expectedTargetRanges() 54 : null; 55 await run(); 56 checkEditorContentResultAsSubTest(data.expectedInnerHTML, t.name); 57 if (expectedTargetRanges !== null) { 58 checkGetTargetRangesOfBeforeinputOnDeleteSomething(expectedTargetRanges); 59 if (data.expectInputEvent) { 60 checkGetTargetRangesOfInputOnDeleteSomething(); 61 } else { 62 checkGetTargetRangesOfInputOnDoNothing(); 63 } 64 } else { 65 checkBeforeinputAndInputEventsOnNOOP(); 66 } 67 }, `${action} at "${innerHTML}"`); 68 } 69 70 // Join left list element and right list element, both have one item. 71 function test_join_1_1(leftItem, rightItem) { 72 addPromiseTest( 73 action === "Backspace" 74 ? `<dl><${leftItem}>list-item1</${leftItem}></dl><dl><${rightItem}>[]list-item2</${rightItem}></dl>` 75 : `<dl><${leftItem}>list-item1[]</${leftItem}></dl><dl><${rightItem}>list-item2</${rightItem}></dl>`, 76 { 77 expectedInnerHTML: [ 78 `<dl><${leftItem}>list-item1list-item2</${leftItem}></dl>`, 79 `<dl><${leftItem}>list-item1list-item2<br></${leftItem}></dl>`, 80 ], 81 expectedTargetRanges: () => { 82 return [ 83 { 84 startContainer: gEditor.querySelector(`${leftItem}`).firstChild, 85 startOffset: gEditor.querySelector(`${leftItem}`).firstChild.length, 86 endContainer: gEditor.querySelector(`dl + dl > ${rightItem}`).firstChild, 87 endOffset: 0, 88 }, 89 ]; 90 }, 91 expectInputEvent: true, 92 } 93 ); 94 95 addPromiseTest( 96 `<dl><${leftItem}>list-item1[</${leftItem}></dl><dl><${rightItem}>}list-item2</${rightItem}></dl>`, 97 { 98 expectedInnerHTML: [ 99 `<dl><${leftItem}>list-item1list-item2</${leftItem}></dl>`, 100 `<dl><${leftItem}>list-item1list-item2<br></${leftItem}></dl>`, 101 ], 102 expectedTargetRanges: () => { 103 return [ 104 { 105 startContainer: gEditor.querySelector(`${leftItem}`).firstChild, 106 startOffset: gEditor.querySelector(`${leftItem}`).firstChild.length, 107 endContainer: gEditor.querySelector(`dl + dl > ${rightItem}`), 108 endOffset: 0, 109 }, 110 ]; 111 }, 112 expectInputEvent: true, 113 } 114 ); 115 116 addPromiseTest( 117 `<dl><${leftItem}>[list-item1</${leftItem}></dl><dl><${rightItem}>}list-item2</${rightItem}></dl>`, 118 { 119 expectedInnerHTML: 120 leftItem === "dt" && rightItem === "dd" 121 ? [ 122 `<dl><${rightItem}>list-item2</${rightItem}></dl>`, 123 `<dl><${rightItem}>list-item2<br></${rightItem}></dl>`, 124 ] 125 : [ 126 `<dl><${leftItem}>list-item2</${leftItem}></dl>`, 127 `<dl><${leftItem}>list-item2<br></${leftItem}></dl>`, 128 ], 129 expectedTargetRanges: () => { 130 return [ 131 { 132 startContainer: gEditor.querySelector(`${leftItem}`).firstChild, 133 startOffset: 0, 134 endContainer: gEditor.querySelector(`dl + dl > ${rightItem}`), 135 endOffset: 0, 136 }, 137 ]; 138 }, 139 expectInputEvent: true, 140 } 141 ); 142 143 addPromiseTest( 144 `<dl><${leftItem}>list-item1[</${leftItem}></dl><dl><${rightItem}>list-item2]</${rightItem}></dl>`, 145 { 146 expectedInnerHTML: [ 147 `<dl><${leftItem}>list-item1</${leftItem}></dl>`, 148 `<dl><${leftItem}>list-item1<br></${leftItem}></dl>`, 149 ], 150 expectedTargetRanges: () => { 151 return [ 152 { 153 startContainer: gEditor.querySelector(`${leftItem}`).firstChild, 154 startOffset: 0, 155 endContainer: gEditor.querySelector(`dl + dl > ${rightItem}`).firstChild, 156 endOffset: gEditor.querySelector(`dl + dl > ${rightItem}`).firstChild.length, 157 }, 158 ]; 159 }, 160 expectInputEvent: true, 161 } 162 ); 163 164 addPromiseTest( 165 `<dl><${leftItem}>[list-item1</${leftItem}></dl><dl><${rightItem}>list-item2]</${rightItem}></dl>`, 166 { 167 expectedInnerHTML: `<dl><${leftItem}><br></${leftItem}></dl>`, 168 expectedTargetRanges: () => { 169 return [ 170 { 171 startContainer: gEditor.querySelector(`${leftItem}`).firstChild, 172 startOffset: 0, 173 endContainer: gEditor.querySelector(`dl + dl > ${rightItem}`).firstChild, 174 endOffset: gEditor.querySelector(`dl + dl > ${rightItem}`).firstChild.length, 175 }, 176 ]; 177 }, 178 expectInputEvent: true, 179 } 180 ); 181 } 182 183 // Join left list element which has 2 items and right list element which has one item. 184 function test_join_2_1(leftItems, rightItem) { 185 addPromiseTest( 186 action === "Backspace" 187 ? `<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>list-item2</${leftItems[1]}></dl><dl><${rightItem}>[]list-item3</${rightItem}></dl>` 188 : `<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>list-item2[]</${leftItems[1]}></dl><dl><${rightItem}>list-item3</${rightItem}></dl>`, 189 { 190 expectedInnerHTML: [ 191 `<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>list-item2list-item3</${leftItems[1]}></dl>`, 192 `<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>list-item2list-item3<br></${leftItems[1]}></dl>`, 193 ], 194 expectedTargetRanges: () => { 195 return [ 196 { 197 startContainer: gEditor.querySelector(`${leftItems[0]} + ${leftItems[1]}`).firstChild, 198 startOffset: gEditor.querySelector(`${leftItems[0]} + ${leftItems[1]}`).firstChild.length, 199 endContainer: gEditor.querySelector(`dl + dl > ${rightItem}`).firstChild, 200 endOffset: 0, 201 }, 202 ]; 203 }, 204 expectInputEvent: true, 205 } 206 ); 207 208 addPromiseTest( 209 `<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>list-item2[</${leftItems[1]}></dl><dl><${rightItem}>}list-item3</${rightItem}></dl>`, 210 { 211 expectedInnerHTML: [ 212 `<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>list-item2list-item3</${leftItems[1]}></dl>`, 213 `<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>list-item2list-item3<br></${leftItems[1]}></dl>`, 214 ], 215 expectedTargetRanges: () => { 216 return [ 217 { 218 startContainer: gEditor.querySelector(`${leftItems[0]} + ${leftItems[1]}`).firstChild, 219 startOffset: gEditor.querySelector(`${leftItems[0]} + ${leftItems[1]}`).firstChild.length, 220 endContainer: gEditor.querySelector(`dl + dl > ${rightItem}`), 221 endOffset: 0, 222 }, 223 ]; 224 }, 225 expectInputEvent: true, 226 } 227 ); 228 229 addPromiseTest( 230 `<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>[list-item2</${leftItems[1]}></dl><dl><${rightItem}>}list-item3</${rightItem}></dl>`, 231 { 232 expectedInnerHTML: 233 leftItems[1] === "dt" && rightItem === "dd" 234 ? [ 235 `<dl><${leftItems[0]}>list-item1</${leftItems[0]}></dl><dl><${rightItem}>list-item3</${rightItem}></dl>`, 236 `<dl><${leftItems[0]}>list-item1</${leftItems[0]}></dl><dl><${rightItem}>list-item3<br></${rightItem}></dl>`, 237 ] 238 : [ 239 `<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>list-item3</${leftItems[1]}></dl>`, 240 `<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>list-item3<br></${leftItems[1]}></dl>`, 241 ], 242 expectedTargetRanges: () => { 243 return [ 244 { 245 startContainer: gEditor.querySelector(`${leftItems[0]} + ${leftItems[1]}`).firstChild, 246 startOffset: 0, 247 endContainer: gEditor.querySelector(`dl + dl > ${rightItem}`), 248 endOffset: 0, 249 }, 250 ]; 251 }, 252 expectInputEvent: true, 253 } 254 ); 255 256 addPromiseTest( 257 `<dl><${leftItems[0]}>[list-item1</${leftItems[0]}><${leftItems[1]}>list-item2</${leftItems[1]}></dl><dl><${rightItem}>}list-item3</${rightItem}></dl>`, 258 { 259 expectedInnerHTML: 260 leftItems[0] === "dt" && rightItem === "dd" 261 ? [ 262 `<dl><${rightItem}>list-item3</${rightItem}></dl>`, 263 `<dl><${rightItem}>list-item3<br></${rightItem}></dl>`, 264 ] 265 : [ 266 `<dl><${leftItems[0]}>list-item3</${leftItems[0]}></dl>`, 267 `<dl><${leftItems[0]}>list-item3<br></${leftItems[0]}></dl>`, 268 ], 269 expectedTargetRanges: () => { 270 return [ 271 { 272 startContainer: gEditor.querySelector(`${leftItems[0]}`).firstChild, 273 startOffset: 0, 274 endContainer: gEditor.querySelector(`dl + dl > ${rightItem}`), 275 endOffset: 0, 276 }, 277 ]; 278 }, 279 expectInputEvent: true, 280 } 281 ); 282 283 addPromiseTest( 284 `<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>list-item2[</${leftItems[1]}></dl><dl><${rightItem}>list-item3]</${rightItem}></dl>`, 285 { 286 expectedInnerHTML: `<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>list-item2</${leftItems[1]}></dl>`, 287 expectedTargetRanges: () => { 288 return [ 289 { 290 startContainer: gEditor.querySelector(`${leftItems[0]} + ${leftItems[1]}`).firstChild, 291 startOffset: gEditor.querySelector(`${leftItems[0]} + ${leftItems[1]}`).firstChild.length, 292 endContainer: gEditor.querySelector(`dl + dl > ${rightItem}`), 293 endOffset: 0, 294 }, 295 ]; 296 }, 297 expectInputEvent: true, 298 } 299 ); 300 301 addPromiseTest( 302 `<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>[list-item2</${leftItems[1]}></dl><dl><${rightItem}>list-item3]</${rightItem}></dl>`, 303 { 304 expectedInnerHTML: `<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}><br></${leftItems[1]}></dl>`, 305 expectedTargetRanges: () => { 306 return [ 307 { 308 startContainer: gEditor.querySelector(`${leftItems[0]} + ${leftItems[1]}`).firstChild, 309 startOffset: 0, 310 endContainer: gEditor.querySelector(`dl + dl > ${rightItem}`).firstChild, 311 endOffset: gEditor.querySelector(`dl + dl > ${rightItem}`).firstChild.length, 312 }, 313 ]; 314 }, 315 expectInputEvent: true, 316 } 317 ); 318 } 319 320 // Join left list element which has one item and right list element which has 2 items. 321 function test_join_1_2(leftItem, rightItems) { 322 addPromiseTest( 323 action === "Backspace" 324 ? `<dl><${leftItem}>list-item1</${leftItem}></dl><dl><${rightItems[0]}>[]list-item2</${rightItems[0]}><${rightItems[1]}>list-item3</${rightItems[1]}></dl>` 325 : `<dl><${leftItem}>list-item1[]</${leftItem}></dl><dl><${rightItems[0]}>list-item2</${rightItems[0]}><${rightItems[1]}>list-item3</${rightItems[1]}></dl>`, 326 { 327 expectedInnerHTML: [ 328 `<dl><${leftItem}>list-item1list-item2</${leftItem}></dl><dl><${rightItems[1]}>list-item3</${rightItems[1]}></dl>`, 329 `<dl><${leftItem}>list-item1list-item2<br></${leftItem}></dl><dl><${rightItems[1]}>list-item3</${rightItems[1]}></dl>`, 330 ], 331 expectedTargetRanges: () => { 332 return [ 333 { 334 startContainer: gEditor.querySelector(`${leftItem}`).firstChild, 335 startOffset: gEditor.querySelector(`${leftItem}`).firstChild.length, 336 endContainer: gEditor.querySelector(`dl + dl > ${rightItems[0]}`).firstChild, 337 endOffset: 0, 338 }, 339 ]; 340 }, 341 expectInputEvent: true, 342 } 343 ); 344 345 addPromiseTest( 346 `<dl><${leftItem}>list-item1[</${leftItem}></dl><dl><${rightItems[0]}>}list-item2</${rightItems[0]}><${rightItems[1]}>list-item3</${rightItems[1]}></dl>`, 347 { 348 expectedInnerHTML: [ 349 `<dl><${leftItem}>list-item1list-item2</${leftItem}></dl><dl><${rightItems[1]}>list-item3</${rightItems[1]}></dl>`, 350 `<dl><${leftItem}>list-item1list-item2<br></${leftItem}></dl><dl><${rightItems[1]}>list-item3</${rightItems[1]}></dl>`, 351 ], 352 expectedTargetRanges: () => { 353 return [ 354 { 355 startContainer: gEditor.querySelector(`${leftItem}`).firstChild, 356 startOffset: gEditor.querySelector(`${leftItem}`).firstChild.length, 357 endContainer: gEditor.querySelector(`dl + dl > ${rightItems[0]}`), 358 endOffset: 0, 359 }, 360 ]; 361 }, 362 expectInputEvent: true, 363 } 364 ); 365 366 addPromiseTest( 367 `<dl><${leftItem}>list-item1[</${leftItem}></dl><dl><${rightItems[0]}>list-item2]</${rightItems[0]}><${rightItems[1]}>list-item3</${rightItems[1]}></dl>`, 368 { 369 expectedInnerHTML: [ 370 `<dl><${leftItem}>list-item1</${leftItem}></dl><dl><${rightItems[1]}>list-item3</${rightItems[1]}></dl>`, 371 `<dl><${leftItem}>list-item1<br></${leftItem}></dl><dl><${rightItems[1]}>list-item3</${rightItems[1]}</dl>`, 372 ], 373 expectedTargetRanges: () => { 374 return [ 375 { 376 startContainer: gEditor.querySelector(`${leftItem}`).firstChild, 377 startOffset: gEditor.querySelector(`${leftItem}`).firstChild.length, 378 endContainer: gEditor.querySelector(`dl + dl > ${rightItems[0]}`).firstChild, 379 endOffset: gEditor.querySelector(`dl + dl > ${rightItems[0]}`).firstChild.length, 380 }, 381 ]; 382 }, 383 expectInputEvent: true, 384 } 385 ); 386 387 addPromiseTest( 388 `<dl><${leftItem}>[list-item1</${leftItem}></dl><dl><${rightItems[0]}>list-item2]</${rightItems[0]}><${rightItems[1]}>list-item3</${rightItems[1]}></dl>`, 389 { 390 expectedInnerHTML: `<dl><${leftItem}><br></${leftItem}></dl><dl><${rightItems[1]}>list-item3</${rightItems[1]}></dl>`, 391 expectedTargetRanges: () => { 392 return [ 393 { 394 startContainer: gEditor.querySelector(`${leftItem}`).firstChild, 395 startOffset: 0, 396 endContainer: gEditor.querySelector(`dl + dl > ${rightItems[0]}`).firstChild, 397 endOffset: gEditor.querySelector(`dl + dl > ${rightItems[0]}`).firstChild.length, 398 }, 399 ]; 400 }, 401 expectInputEvent: true, 402 } 403 ); 404 405 addPromiseTest( 406 `<dl><${leftItem}>[list-item1</${leftItem}></dl><dl><${rightItems[0]}>list-item2</${rightItems[0]}><${rightItems[1]}>}list-item3</${rightItems[1]}></dl>`, 407 { 408 expectedInnerHTML: 409 leftItem === "dt" && rightItems[1] === "dd" 410 ? [ 411 `<dl><${rightItems[1]}>list-item3</${rightItems[1]}></dl>`, 412 `<dl><${rightItems[1]}>list-item3<br></${rightItems[1]}></dl>`, 413 ] 414 : [ 415 `<dl><${leftItem}>list-item3</${leftItem}></dl>`, 416 `<dl><${leftItem}>list-item3<br></${leftItem}></dl>`, 417 ], 418 expectedTargetRanges: () => { 419 return [ 420 { 421 startContainer: gEditor.querySelector(`${leftItem}`).firstChild, 422 startOffset: 0, 423 endContainer: gEditor.querySelector(`dl + dl > ${rightItems[0]} + ${rightItems[1]}`), 424 endOffset: 0, 425 }, 426 ]; 427 }, 428 expectInputEvent: true, 429 } 430 ); 431 } 432 433 // Join left list element and right list element, both have 2 items. 434 function test_join_2_2(leftItems, rightItems) { 435 addPromiseTest( 436 action === "Backspace" 437 ? `<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>list-item2</${leftItems[1]}></dl><dl><${rightItems[0]}>[]list-item3</${rightItems[0]}><${rightItems[1]}>list-item4</${rightItems[1]}></dl>` 438 : `<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>list-item2[]</${leftItems[1]}></dl><dl><${rightItems[0]}>list-item3</${rightItems[0]}><${rightItems[1]}>list-item4</${rightItems[1]}></dl>`, 439 { 440 expectedInnerHTML: [ 441 `<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>list-item2list-item3</${leftItems[1]}></dl><dl><${rightItems[1]}>list-item4</${rightItems[1]}></dl>`, 442 `<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>list-item2list-item3<br></${leftItems[1]}></dl><dl><${rightItems[1]}>list-item4</${rightItems[1]}></dl>`, 443 ], 444 expectedTargetRanges: () => { 445 return [ 446 { 447 startContainer: gEditor.querySelector(`${leftItems[0]} + ${leftItems[1]}`).firstChild, 448 startOffset: gEditor.querySelector(`${leftItems[0]} + ${leftItems[1]}`).firstChild.length, 449 endContainer: gEditor.querySelector(`dl + dl > ${rightItems[0]}`).firstChild, 450 endOffset: 0, 451 }, 452 ]; 453 }, 454 expectInputEvent: true, 455 } 456 ); 457 458 addPromiseTest( 459 `<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>list-item2[</${leftItems[1]}></dl><dl><${rightItems[0]}>}list-item3</${rightItems[0]}><${rightItems[1]}>list-item4</${rightItems[1]}></dl>`, 460 { 461 expectedInnerHTML: [ 462 `<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>list-item2list-item3</${leftItems[1]}></dl><dl><${rightItems[1]}>list-item4</${rightItems[1]}></dl>`, 463 `<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>list-item2list-item3<br></${leftItems[1]}></dl><dl><${rightItems[1]}>list-item4</${rightItems[1]}></dl>`, 464 ], 465 expectedTargetRanges: () => { 466 return [ 467 { 468 startContainer: gEditor.querySelector(`${leftItems[0]} + ${leftItems[1]}`).firstChild, 469 startOffset: gEditor.querySelector(`${leftItems[0]} + ${leftItems[1]}`).firstChild.length, 470 endContainer: gEditor.querySelector(`dl + dl > ${rightItems[0]}`), 471 endOffset: 0, 472 }, 473 ]; 474 }, 475 expectInputEvent: true, 476 } 477 ); 478 479 // XXX This and next one's expectation come from Blink's behavior. 480 // I'm not sure whether this is intentional complicated handling 481 // or not. 482 addPromiseTest( 483 `<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>[list-item2</${leftItems[1]}></dl><dl><${rightItems[0]}>}list-item3</${rightItems[0]}><${rightItems[1]}>list-item4</${rightItems[1]}></dl>`, 484 { 485 expectedInnerHTML: 486 leftItems[1] === "dt" && rightItems[0] === "dd" 487 ? [ 488 `<dl><${leftItems[0]}>list-item1</${leftItems[0]}></dl><dl><${rightItems[0]}>list-item3</${rightItems[0]}><${rightItems[1]}>list-item4</${rightItems[1]}></dl>`, 489 `<dl><${leftItems[0]}>list-item1</${leftItems[0]}></dl><dl><${rightItems[0]}>list-item3<br></${rightItems[0]}><${rightItems[1]}>list-item4</${rightItems[1]}></dl>`, 490 ] 491 : [ 492 `<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>list-item3</${leftItems[1]}></dl><dl><${rightItems[1]}>list-item4</${rightItems[1]}></dl>`, 493 `<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>list-item3<br></${leftItems[1]}></dl><dl><${rightItems[1]}>list-item4</${rightItems[1]}></dl>`, 494 ], 495 expectedTargetRanges: () => { 496 return [ 497 { 498 startContainer: gEditor.querySelector(`${leftItems[0]} + ${leftItems[1]}`).firstChild, 499 startOffset: 0, 500 endContainer: gEditor.querySelector(`dl + dl > ${rightItems[0]}`), 501 endOffset: 0, 502 }, 503 ]; 504 }, 505 expectInputEvent: true, 506 } 507 ); 508 509 addPromiseTest( 510 `<dl><${leftItems[0]}>[list-item1</${leftItems[0]}><${leftItems[1]}>list-item2</${leftItems[1]}></dl><dl><${rightItems[0]}>}list-item3</${rightItems[0]}><${rightItems[1]}>list-item4</${rightItems[1]}></dl>`, 511 { 512 expectedInnerHTML: 513 leftItems[0] === "dt" && rightItems[0] === "dd" 514 ? [ 515 `<dl><${rightItems[0]}>list-item3</${rightItems[0]}><${rightItems[1]}>list-item4</${rightItems[1]}></dl>`, 516 `<dl><${rightItems[0]}>list-item3<br></${rightItems[0]}><${rightItems[1]}>list-item4</${rightItems[1]}></dl>`, 517 ] 518 : [ 519 `<dl><${leftItems[0]}>list-item3</${leftItems[0]}></dl><dl><${rightItems[1]}>list-item4</${rightItems[1]}></dl>`, 520 `<dl><${leftItems[0]}>list-item3<br></${leftItems[0]}></dl><dl><${rightItems[1]}>list-item4</${rightItems[1]}></dl>`, 521 ], 522 expectedTargetRanges: () => { 523 return [ 524 { 525 startContainer: gEditor.querySelector(`${leftItems[0]}`).firstChild, 526 startOffset: 0, 527 endContainer: gEditor.querySelector(`dl + dl > ${rightItems[0]}`), 528 endOffset: 0, 529 }, 530 ]; 531 }, 532 expectInputEvent: true, 533 } 534 ); 535 536 addPromiseTest( 537 `<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>list-item2[</${leftItems[1]}></dl><dl><${rightItems[0]}>list-item3]</${rightItems[0]}><${rightItems[1]}>list-item4</${rightItems[1]}></dl>`, 538 { 539 expectedInnerHTML: `<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>list-item2</${leftItems[1]}></dl><dl><${rightItems[1]}>list-item4</${rightItems[1]}></dl>`, 540 expectedTargetRanges: () => { 541 return [ 542 { 543 startContainer: gEditor.querySelector(`${leftItems[0]} + ${leftItems[1]}`).firstChild, 544 startOffset: gEditor.querySelector(`${leftItems[0]} + ${leftItems[1]}`).firstChild.length, 545 endContainer: gEditor.querySelector(`dl + dl > ${rightItems[0]}`).firstChild, 546 endOffset: gEditor.querySelector(`dl + dl > ${rightItems[0]}`).firstChild.length, 547 }, 548 ]; 549 }, 550 expectInputEvent: true, 551 } 552 ); 553 554 addPromiseTest( 555 `<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}>[list-item2</${leftItems[1]}></dl><dl><${rightItems[0]}>list-item3]</${rightItems[0]}><${rightItems[1]}>list-item4</${rightItems[1]}></dl>`, 556 { 557 expectedInnerHTML: `<dl><${leftItems[0]}>list-item1</${leftItems[0]}><${leftItems[1]}><br></${leftItems[1]}></dl><dl><${rightItems[1]}>list-item4</${rightItems[1]}></dl>`, 558 expectedTargetRanges: () => { 559 return [ 560 { 561 startContainer: gEditor.querySelector(`${leftItems[0]} + ${leftItems[1]}`).firstChild, 562 startOffset: 0, 563 endContainer: gEditor.querySelector(`dl + dl > ${rightItems[0]}`).firstChild, 564 endOffset: gEditor.querySelector(`dl + dl > ${rightItems[0]}`).firstChild.length, 565 }, 566 ]; 567 }, 568 expectInputEvent: true, 569 } 570 ); 571 572 addPromiseTest( 573 `<dl><${leftItems[0]}>[list-item1</${leftItems[0]}><${leftItems[1]}>list-item2</${leftItems[1]}></dl><dl><${rightItems[0]}>list-item3</${rightItems[0]}><${rightItems[1]}>list-item4]</${rightItems[1]}></dl>`, 574 { 575 expectedInnerHTML: `<dl><${leftItems[0]}><br></${leftItems[0]}></dl>`, 576 expectedTargetRanges: () => { 577 return [ 578 { 579 startContainer: gEditor.querySelector(`${leftItems[0]}`).firstChild, 580 startOffset: 0, 581 endContainer: gEditor.querySelector(`dl + dl > ${rightItems[0]} + ${rightItems[1]}`).firstChild, 582 endOffset: gEditor.querySelector(`dl + dl > ${rightItems[0]} + ${rightItems[1]}`).firstChild.length, 583 }, 584 ]; 585 }, 586 expectInputEvent: true, 587 } 588 ); 589 } 590 591 // Joining dl elements 592 for (let listItem1 of ["dt", "dd"]) { 593 for (let listItem2 of ["dt", "dd"]) { 594 test_join_1_1(listItem1, listItem2); 595 for (let listItem3 of ["dt", "dd"]) { 596 test_join_2_1([listItem1, listItem2], listItem3); 597 test_join_1_2(listItem1, [listItem2, listItem3]); 598 for (let listItem4 of ["dt", "dd"]) { 599 test_join_2_2([listItem1, listItem2], [listItem3, listItem4]); 600 } 601 } 602 } 603 } 604 605 </script>