| <!doctype html> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script src="../assert_selection.js"></script> |
| <script> |
| function swapMarks(string) { |
| return string.replace('^', '$').replace('|', '^').replace('$', '|'); |
| } |
| |
| function test_selection(sample, closure, expected, description) { |
| test(() => assert_selection(sample, closure, expected), |
| description + '; anchor is first'); |
| test(() => assert_selection(swapMarks(sample), closure, swapMarks(expected)), |
| description + '; focus is first'); |
| } |
| |
| test_selection( |
| '<div contenteditable><span>he^llo</span> wo|rld</div>', |
| selection => selection.document.querySelector('span').remove(), |
| '<div contenteditable>^ wo|rld</div>', |
| 'Remove the parent of startContainer'); |
| |
| // set nodeValue |
| test_selection( |
| '<div contenteditable><span>he^llo</span> wo|rld</div>', |
| selection => selection.document.querySelector('span').firstChild.nodeValue = 'a', |
| '<div contenteditable><span>^a</span> wo|rld</div>', |
| 'Replace nodeValue of startContainer'); |
| |
| test_selection( |
| '<div contenteditable><span>he^llo</span> wo|rld</div>', |
| selection => selection.document.querySelector('div').lastChild.nodeValue = 'a', |
| '<div contenteditable><span>he^llo</span>|a</div>', |
| 'Replace nodeValue of endContainer'); |
| |
| // appendData |
| test_selection( |
| '<div contenteditable><span>he^llo</span> wo|rld</div>', |
| selection => selection.document.querySelector('span').firstChild.appendData(' xyz'), |
| '<div contenteditable><span>he^llo xyz</span> wo|rld</div>', |
| 'Appending " xyz" to startContainer'); |
| |
| test_selection( |
| '<div contenteditable><span>he^llo</span> wo|rld</div>', |
| selection => selection.document.querySelector('div').lastChild.appendData(' xyz'), |
| '<div contenteditable><span>he^llo</span> wo|rld xyz</div>', |
| 'Appending " xyz" to endContainer'); |
| |
| // insertData |
| test_selection( |
| '<div contenteditable><span>he^llo</span> wo|rld</div>', |
| selection => selection.document.querySelector('span').firstChild.insertData(2, ' xyz'), |
| '<div contenteditable><span>he^ xyzllo</span> wo|rld</div>', |
| 'Inserting " xyz" to startContainer before the end point'); |
| |
| test_selection( |
| '<div contenteditable><span>he^llo</span> wo|rld</div>', |
| selection => selection.document.querySelector('div').lastChild.insertData(2, ' xyz'), |
| '<div contenteditable><span>he^llo</span> w xyzo|rld</div>', |
| 'Inserting " xyz" to endContainer before the end point'); |
| |
| test_selection( |
| '<div contenteditable><span>he^llo</span> wo|rld</div>', |
| selection => selection.document.querySelector('span').firstChild.insertData(3, ' xyz'), |
| '<div contenteditable><span>he^l xyzlo</span> wo|rld</div>', |
| 'Inserting " xyz" to startContainer before the after point'); |
| |
| test_selection( |
| '<div contenteditable><span>he^llo</span> wo|rld</div>', |
| selection => selection.document.querySelector('div').lastChild.insertData(3, ' xyz'), |
| '<div contenteditable><span>he^llo</span> wo| xyzrld</div>', |
| 'Inserting " xyz" to endContainer before the after point'); |
| |
| // deleteData |
| test_selection( |
| '<div contenteditable><span>he^llo</span> wo|rld</div>', |
| selection => selection.document.querySelector('span').firstChild.deleteData(1, 4), |
| '<div contenteditable><span>h^</span> wo|rld</div>', |
| 'deleteData(1, 4) in startContainer'); |
| |
| test_selection( |
| '<div contenteditable><span>he^llo</span> wo|rld</div>', |
| selection => selection.document.querySelector('div').lastChild.deleteData(1, 4), |
| '<div contenteditable><span>he^llo</span> |d</div>', |
| 'deleteData(1, 4) in endContainer'); |
| |
| test_selection( |
| '<div contenteditable><span>he^llo</span> wo|rld</div>', |
| selection => selection.document.querySelector('span').firstChild.deleteData(0, 3), |
| '<div contenteditable><span>^lo</span> wo|rld</div>', |
| 'deleteData(0, 3) in startContainer'); |
| |
| test_selection( |
| '<div contenteditable><span>he^llo</span> wo|rld</div>', |
| selection => selection.document.querySelector('div').lastChild.deleteData(0, 3), |
| '<div contenteditable><span>he^llo</span>|rld</div>', |
| 'deleteData(0, 3) in endContainer'); |
| |
| test_selection( |
| '<div contenteditable><span>he^llo</span> wo|rld</div>', |
| selection => selection.document.querySelector('span').firstChild.deleteData(0, 2), |
| '<div contenteditable><span>^llo</span> wo|rld</div>', |
| 'deleteData(0, 2) in startContainer'); |
| |
| test_selection( |
| '<div contenteditable><span>he^llo</span> wo|rld</div>', |
| selection => selection.document.querySelector('div').lastChild.deleteData(0, 2), |
| '<div contenteditable><span>he^llo</span>o|rld</div>', |
| 'deleteData(0, 2) in endContainer'); |
| |
| test_selection( |
| '<div contenteditable><span>he^llo</span> wo|rld</div>', |
| selection => selection.document.querySelector('span').firstChild.deleteData(3, 2), |
| '<div contenteditable><span>he^l</span> wo|rld</div>', |
| 'deleteData(3, 2) in startContainer'); |
| |
| test_selection( |
| '<div contenteditable><span>he^llo</span> wo|rld</div>', |
| selection => selection.document.querySelector('div').lastChild.deleteData(3, 2), |
| '<div contenteditable><span>he^llo</span> wo|d</div>', |
| 'deleteData(3, 2) in endContainer'); |
| |
| // replaceData |
| test_selection( |
| '<div contenteditable><span>he^llo</span> wo|rld</div>', |
| selection => selection.document.querySelector('span').firstChild |
| .replaceData(1, 4, '1234'), |
| '<div contenteditable><span>h^1234</span> wo|rld</div>', |
| 'replaceData(1, 4, "1234") in startContainer'); |
| |
| test_selection( |
| '<div contenteditable><span>he^llo</span> wo|rld</div>', |
| selection => selection.document.querySelector('div').lastChild |
| .replaceData(1, 4, '1234'), |
| '<div contenteditable><span>he^llo</span> |1234d</div>', |
| 'replaceData(1, 4, "1234") in endContainer'); |
| |
| test_selection( |
| '<div contenteditable><span>he^llo</span> wo|rld</div>', |
| selection => selection.document.querySelector('span').firstChild |
| .replaceData(0, 2, '12'), |
| '<div contenteditable><span>^12llo</span> wo|rld</div>', |
| 'replaceData(0, 2, "12") in startContainer'); |
| |
| test_selection( |
| '<div contenteditable><span>he^llo</span> wo|rld</div>', |
| selection => selection.document.querySelector('div').lastChild |
| .replaceData(0, 2, '12'), |
| '<div contenteditable><span>he^llo</span>12o|rld</div>', |
| 'replaceData(0, 2, "12") in endContainer'); |
| |
| test_selection( |
| '<div contenteditable><span>he^llo</span> wo|rld</div>', |
| selection => selection.document.querySelector('span').firstChild |
| .replaceData(0, 2, '1'), |
| '<div contenteditable><span>^1llo</span> wo|rld</div>', |
| 'replaceData(0, 2, "1") in startContainer'); |
| |
| test_selection( |
| '<div contenteditable><span>he^llo</span> wo|rld</div>', |
| selection => selection.document.querySelector('div').lastChild |
| .replaceData(0, 2, '1'), |
| '<div contenteditable><span>he^llo</span>1o|rld</div>', |
| 'replaceData(0, 2, "1") in endContainer'); |
| |
| test_selection( |
| '<div contenteditable><span>he^llo</span> wo|rld</div>', |
| selection => selection.document.querySelector('span').firstChild |
| .replaceData(3, 2, '12'), |
| '<div contenteditable><span>he^l12</span> wo|rld</div>', |
| 'replaceData(3, 2, "12") in startContainer'); |
| |
| test_selection( |
| '<div contenteditable><span>he^llo</span> wo|rld</div>', |
| selection => selection.document.querySelector('div').lastChild |
| .replaceData(3, 2, '12'), |
| '<div contenteditable><span>he^llo</span> wo|12d</div>', |
| 'replaceData(3, 2, "12") in endContainer'); |
| </script> |
