character-data-mutation.html | Explore in Territory

<!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>
chromium/third_party/blink/web_tests/editing/selection/character-data-mutation.html
