Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /editing/other/delete-without-unwrapping-first-line-of-child-block.html?method=BackspaceKey&lineBreak=br - WPT Dashboard Interop Dashboard
- /editing/other/delete-without-unwrapping-first-line-of-child-block.html?method=BackspaceKey&lineBreak=preformat - WPT Dashboard Interop Dashboard
- /editing/other/delete-without-unwrapping-first-line-of-child-block.html?method=DeleteKey&lineBreak=br - WPT Dashboard Interop Dashboard
- /editing/other/delete-without-unwrapping-first-line-of-child-block.html?method=DeleteKey&lineBreak=preformat - WPT Dashboard Interop Dashboard
- /editing/other/delete-without-unwrapping-first-line-of-child-block.html?method=deleteCommand&lineBreak=br - WPT Dashboard Interop Dashboard
- /editing/other/delete-without-unwrapping-first-line-of-child-block.html?method=deleteCommand&lineBreak=preformat - WPT Dashboard Interop Dashboard
- /editing/other/delete-without-unwrapping-first-line-of-child-block.html?method=forwardDeleteCommand&lineBreak=br - WPT Dashboard Interop Dashboard
- /editing/other/delete-without-unwrapping-first-line-of-child-block.html?method=forwardDeleteCommand&lineBreak=preformat - WPT Dashboard Interop Dashboard
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="timeout" content="long">
<meta name="variant" content="?method=BackspaceKey&lineBreak=br">
<meta name="variant" content="?method=DeleteKey&lineBreak=br">
<meta name="variant" content="?method=deleteCommand&lineBreak=br">
<meta name="variant" content="?method=forwardDeleteCommand&lineBreak=br">
<meta name="variant" content="?method=BackspaceKey&lineBreak=preformat">
<meta name="variant" content="?method=DeleteKey&lineBreak=preformat">
<meta name="variant" content="?method=deleteCommand&lineBreak=preformat">
<meta name="variant" content="?method=forwardDeleteCommand&lineBreak=preformat">
<title>Tests for deleting preceding lines of right child block if range ends at start of the right child</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="../include/editor-test-utils.js"></script>
<script>
"use strict";
/**
* Browsers delete only preceding lines (and selected content in the child
* block) when the deleting range starts from a line and ends in a child block
* without unwrapping the (new) first line of the child block at end. Note that
* this is a special handling for the above case, i.e., if the range starts from
* a middle of a preceding line of the child block, the first line of the child
* block should be unwrapped and merged into the preceding line. This is also
* applied when the range is directly replaced with new content like typing a
* character. Finally, selection should be collapsed at start of the child
* block and new content should be inserted at start of the child block.
*
* This file also tests getTargetRanges() of `beforeinput` of at deletion and
* replacing the selection directly. In the former case, if the range ends at
* start of the child block, browsers do not touch the child block. Therefore,
* the target ranges should the a range deleting the preceding lines, i.e.,
* should be end at the child block. When the range is replaced directly, the
* content will be inserted at start of the child block, and also when the range
* selects some content in the child block, browsers touch the child block.
* Therefore, the target range should end at the next insertion point.
*/
const searchParams = new URLSearchParams(document.location.search);
const testUserInput = searchParams.get("method") == "BackspaceKey" || searchParams.get("method") == "DeleteKey";
const testBackward = searchParams.get("method") == "BackspaceKey" || searchParams.get("method") == "deleteCommand";
const deleteMethod =
testUserInput
? testBackward ? "Backspace" : "Delete"
: `document.execCommand("${testBackward ? "delete" : "forwarddelete"}")`;
const insertTextMethod = testUserInput ? "Typing \"X\"" : "document.execCommand(\"insertText\", false, \"X\")";
const lineBreak = searchParams.get("lineBreak") == "br" ? "<br>" : "\n";
const lineBreakIsBR = lineBreak == "<br>";
function run(editorUtils) {
if (testUserInput) {
return testBackward ? editorUtils.sendBackspaceKey() : editorUtils.sendDeleteKey();
}
editorUtils.document.execCommand(testBackward ? "delete" : "forwardDelete");
}
function typeCharacter(editorUtils, ch) {
if (testUserInput) {
return editorUtils.sendKey(ch);
}
document.execCommand("insertText", false, ch);
}
async function runDeleteTest(
runningTest,
testUtils,
initialInnerHTML,
expectedAfterDeletion,
whatShouldHappenAfterDeletion,
expectedAfterDeletionAndInsertion,
whatShouldHappenAfterDeletionAndInsertion,
expectedTargetRangesAtDeletion,
whatGetTargetRangesShouldReturn
) {
let targetRanges = [];
if (testUserInput) {
testUtils.editingHost.addEventListener(
"beforeinput",
event => targetRanges = event.getTargetRanges(),
{once: true}
);
}
await run(testUtils);
(Array.isArray(expectedAfterDeletion) ? assert_in_array : assert_equals)(
testUtils.editingHost.innerHTML,
expectedAfterDeletion,
`${runningTest.name} ${whatShouldHappenAfterDeletion}`
);
if (testUserInput) {
test(() => {
const arrayOfStringifiedExpectedTargetRanges = (() => {
let arrayOfTargetRanges = [];
for (const expectedTargetRanges of expectedTargetRangesAtDeletion) {
arrayOfTargetRanges.push(
EditorTestUtils.getRangeArrayDescription(expectedTargetRanges)
);
}
return arrayOfTargetRanges;
})();
assert_in_array(
EditorTestUtils.getRangeArrayDescription(targetRanges),
arrayOfStringifiedExpectedTargetRanges
);
}, `getTargetRanges() for ${runningTest.name} ${whatGetTargetRangesShouldReturn}`);
}
await typeCharacter(testUtils, "X");
(Array.isArray(expectedAfterDeletionAndInsertion) ? assert_in_array : assert_equals)(
testUtils.editingHost.innerHTML,
expectedAfterDeletionAndInsertion,
`${insertTextMethod} after ${runningTest.name} ${whatShouldHappenAfterDeletionAndInsertion}`
);
}
async function runReplacingTest(
runningTest,
testUtils,
initialInnerHTML,
expectedAfterReplacing,
whatShouldHappenAfterReplacing,
expectedTargetRangesAtReplace,
whatGetTargetRangesShouldReturn
) {
let targetRanges = [];
if (testUserInput) {
testUtils.editingHost.addEventListener(
"beforeinput",
event => targetRanges = event.getTargetRanges(),
{once: true}
);
}
await typeCharacter(testUtils, "X");
(Array.isArray(expectedAfterReplacing) ? assert_in_array : assert_equals)(
testUtils.editingHost.innerHTML,
expectedAfterReplacing,
`${runningTest.name} ${whatShouldHappenAfterReplacing}`
);
if (testUserInput) {
test(() => {
const arrayOfStringifiedExpectedTargetRanges = (() => {
let arrayOfTargetRanges = [];
for (const expectedTargetRanges of expectedTargetRangesAtReplace) {
arrayOfTargetRanges.push(
EditorTestUtils.getRangeArrayDescription(expectedTargetRanges)
);
}
return arrayOfTargetRanges;
})();
assert_in_array(
EditorTestUtils.getRangeArrayDescription(targetRanges),
arrayOfStringifiedExpectedTargetRanges
);
}, `getTargetRanges() for ${runningTest.name} ${whatGetTargetRangesShouldReturn}`);
}
}
addEventListener("load", () => {
const editingHost = document.querySelector("div[contenteditable]");
const selStart = lineBreakIsBR ? "{" : "[";
const selCollapsed = lineBreakIsBR ? "{}" : "[]";
editingHost.style.whiteSpace = lineBreakIsBR ? "normal" : "pre";
const testUtils = new EditorTestUtils(editingHost);
(() => {
const initialInnerHTML =
`abc${lineBreak}${selStart}${lineBreak}<div id="child">]def<br>ghi</div>`;
promise_test(async t => {
testUtils.setupEditingHost(initialInnerHTML);
await runDeleteTest(
t, testUtils, initialInnerHTML,
[
`abc${lineBreak}<div id="child">def<br>ghi</div>`,
`abc<div id="child">def<br>ghi</div>`,
],
"should delete only the preceding empty line of the child <div>",
[
`abc${lineBreak}<div id="child">Xdef<br>ghi</div>`,
`abc<div id="child">Xdef<br>ghi</div>`,
],
"should insert text into the child <div>",
lineBreakIsBR
? [
// abc<br>{<br>}<div>
[{ startContainer: editingHost, startOffset: 2, endContainer: editingHost, endOffset: 3 }],
// abc{<br><br>}<div>
[{ startContainer: editingHost, startOffset: 1, endContainer: editingHost, endOffset: 3 }],
// abc[<br><br>}<div>
[{ startContainer: editingHost.firstChild, startOffset: "abc".length, endContainer: editingHost, endOffset: 3 }],
]
: [
// abc\n[\n}<div>
[{ startContainer: editingHost.firstChild, startOffset: "abc\n".length, endContainer: editingHost, endOffset: 1 }],
// abc[\n\n}<div>
[{ startContainer: editingHost.firstChild, startOffset: "abc".length, endContainer: editingHost, endOffset: 1 }],
// abc\n[\n]<div>
[{ startContainer: editingHost.firstChild, startOffset: "abc\n".length, endContainer: editingHost.firstChild, endOffset: "abc\n\n".length }],
// abc[\n\n]<div>
[{ startContainer: editingHost.firstChild, startOffset: "abc".length, endContainer: editingHost.firstChild, endOffset: "abc\n\n".length }],
],
"should return a range before the child <div>"
);
}, `${deleteMethod} at ${initialInnerHTML.replaceAll("\n", "\\\\n")}`);
promise_test(async t => {
testUtils.setupEditingHost(initialInnerHTML);
const firstTextInChildDiv = editingHost.querySelector("div").firstChild;
await runReplacingTest(
t, testUtils, initialInnerHTML,
[
`abc${lineBreak}<div id="child">Xdef<br>ghi</div>`,
`abc<div id="child">Xdef<br>ghi</div>`,
],
"should not unwrap the first line of the child <div>",
lineBreakIsBR
? [
// abc<br>{<br><div>]def
[{ startContainer: editingHost, startOffset: 2, endContainer: firstTextInChildDiv, endOffset: 0 }],
// abc{<br><br><div>]def
[{ startContainer: editingHost, startOffset: 1, endContainer: firstTextInChildDiv, endOffset: 0 }],
// abc[<br><br><div>]def
[{ startContainer: editingHost.firstChild, startOffset: "abc".length, endContainer: firstTextInChildDiv, endOffset: 0 }],
]
: [
// abc\n[\n<div>]def
[{ startContainer: editingHost.firstChild, startOffset: "abc\n".length, endContainer: firstTextInChildDiv, endOffset: 0 }],
// abc[\n\n<div>]def
[{ startContainer: editingHost.firstChild, startOffset: "abc".length, endContainer: firstTextInChildDiv, endOffset: 0 }],
],
"should return a range ending in the child <div>"
);
}, `${insertTextMethod} at ${initialInnerHTML.replaceAll("\n", "\\n")}`);
})();
(() => {
const initialInnerHTML =
`${lineBreak}[abc${lineBreak}<div id="child">]def<br>ghi</div>`;
promise_test(async t => {
testUtils.setupEditingHost(initialInnerHTML);
await runDeleteTest(
t, testUtils, initialInnerHTML,
`${lineBreak}<div id="child">def<br>ghi</div>`,
"should delete only the preceding empty line of the child <div>",
`${lineBreak}<div id="child">Xdef<br>ghi</div>`,
"should insert text into the child <div>",
lineBreakIsBR
? [
// <br>[abc<br>}<div>
[{ startContainer: editingHost.firstChild.nextSibling, startOffset: 0, endContainer: editingHost, endOffset: 3 }],
]
: [
// \n[abc\n}<div>
[{ startContainer: editingHost.firstChild, startOffset: "\n".length, endContainer: editingHost, endOffset: 1 }],
// \n[abc\n]<div>
[{ startContainer: editingHost.firstChild, startOffset: "\n".length, endContainer: editingHost.firstChild, endOffset: "\nabc\n".length }],
],
"should return a range before the child <div>"
);
}, `${deleteMethod} at ${initialInnerHTML.replaceAll("\n", "\\\\n")}`);
promise_test(async t => {
testUtils.setupEditingHost(initialInnerHTML);
const firstTextInChildDiv = editingHost.querySelector("div").firstChild;
await runReplacingTest(
t, testUtils, initialInnerHTML,
`${lineBreak}<div id="child">Xdef<br>ghi</div>`,
"should not unwrap the first line of the child <div>",
lineBreakIsBR
? [
// <br>[abc<br><div>]def
[{ startContainer: editingHost.firstChild.nextSibling, startOffset: 0, endContainer: firstTextInChildDiv, endOffset: 0 }],
]
: [
// \n[abc\n<div>]def
[{ startContainer: editingHost.firstChild, startOffset: "\n".length, endContainer: firstTextInChildDiv, endOffset: 0 }],
],
"should return a range ending in the child <div>"
);
}, `${insertTextMethod} at ${initialInnerHTML.replaceAll("\n", "\\n")}`);
})();
(() => {
const initialInnerHTML =
`${lineBreak}${selStart}${lineBreak}<div id="child">]def<br>ghi</div>`;
promise_test(async t => {
testUtils.setupEditingHost(initialInnerHTML);
await runDeleteTest(
t, testUtils, initialInnerHTML,
`${lineBreak}<div id="child">def<br>ghi</div>`,
"should delete only the preceding empty line of the child <div>",
`${lineBreak}<div id="child">Xdef<br>ghi</div>`,
"should insert text into the child <div>",
lineBreakIsBR
? [
// <br>{<br>}<div>
[{ startContainer: editingHost, startOffset: 1, endContainer: editingHost, endOffset: 2 }],
]
: [
// \n[\n}<div>
[{ startContainer: editingHost.firstChild, startOffset: "\n".length, endContainer: editingHost, endOffset: 1 }],
// \n[\n]<div>
[{ startContainer: editingHost.firstChild, startOffset: "\n".length, endContainer: editingHost.firstChild, endOffset: "\n\n".length }],
],
"should return a range before the child <div>"
);
}, `${deleteMethod} at ${initialInnerHTML.replaceAll("\n", "\\\\n")}`);
promise_test(async t => {
testUtils.setupEditingHost(initialInnerHTML);
const firstTextInChildDiv = editingHost.querySelector("div").firstChild;
await runReplacingTest(
t, testUtils, initialInnerHTML,
`${lineBreak}<div id="child">Xdef<br>ghi</div>`,
"should not unwrap the first line of the child <div>",
lineBreakIsBR
? [
// <br>{<br><div>]def
[{ startContainer: editingHost, startOffset: 1, endContainer: firstTextInChildDiv, endOffset: 0 }],
]
: [
// \n[\n<div>]def
[{ startContainer: editingHost.firstChild, startOffset: "\n".length, endContainer: firstTextInChildDiv, endOffset: 0 }],
],
"should return a range ending in the child <div>"
);
}, `${insertTextMethod} at ${initialInnerHTML.replaceAll("\n", "\\n")}`);
})();
(() => {
const initialInnerHTML =
`${selStart}${lineBreak}${lineBreak}<div id="child">]def<br>ghi</div>`;
promise_test(async t => {
testUtils.setupEditingHost(initialInnerHTML);
await runDeleteTest(
t, testUtils, initialInnerHTML,
`<div id="child">def<br>ghi</div>`,
"should delete only the preceding empty line of the child <div>",
`<div id="child">Xdef<br>ghi</div>`,
"should insert text into the child <div>",
lineBreakIsBR
? [
// {<br><br>}<div>
[{ startContainer: editingHost, startOffset: 0, endContainer: editingHost, endOffset: 2 }],
]
: [
// [\n\n}<div>
[{ startContainer: editingHost.firstChild, startOffset: 0, endContainer: editingHost, endOffset: 1 }],
// [\n\n}<div>
[{ startContainer: editingHost.firstChild, startOffset: 0, endContainer: editingHost.firstChild, endOffset: "\n\n".length }],
],
"should return a range before the child <div>"
);
}, `${deleteMethod} at ${initialInnerHTML.replaceAll("\n", "\\\\n")}`);
promise_test(async t => {
testUtils.setupEditingHost(initialInnerHTML);
const firstTextInChildDiv = editingHost.querySelector("div").firstChild;
await runReplacingTest(
t, testUtils, initialInnerHTML,
`<div id="child">Xdef<br>ghi</div>`,
"should not unwrap the first line of the child <div>",
lineBreakIsBR
? [
// {<br><br><div>]def
[{ startContainer: editingHost, startOffset: 0, endContainer: firstTextInChildDiv, endOffset: 0 }],
]
: [
// [\n\n<div>]def
[{ startContainer: editingHost.firstChild, startOffset: 0, endContainer: firstTextInChildDiv, endOffset: 0 }],
],
"should return a range ending in the child <div>"
);
}, `${insertTextMethod} at ${initialInnerHTML.replaceAll("\n", "\\n")}`);
})();
(() => {
const initialInnerHTML =
`[abc${lineBreak}${lineBreak}<div id="child">]def<br>ghi</div>`;
promise_test(async t => {
testUtils.setupEditingHost(initialInnerHTML);
await runDeleteTest(
t, testUtils, initialInnerHTML,
`<div id="child">def<br>ghi</div>`,
"should delete only the preceding empty line of the child <div>",
`<div id="child">Xdef<br>ghi</div>`,
"should insert text into the child <div>",
lineBreakIsBR
? [
// [abc<br><br>}<div>
[{ startContainer: editingHost.firstChild, startOffset: 0, endContainer: editingHost, endOffset: 3 }],
]
: [
// {abc\n\n}<div>
[{ startContainer: editingHost, startOffset: 0, endContainer: editingHost, endOffset: 1 }],
// [abc\n\n}<div>
[{ startContainer: editingHost.firstChild, startOffset: 0, endContainer: editingHost, endOffset: 1 }],
// [abc\n\n}<div>
[{ startContainer: editingHost.firstChild, startOffset: 0, endContainer: editingHost.firstChild, endOffset: "abc\n\n".length }],
],
"should return a range before the child <div>"
);
}, `${deleteMethod} at ${initialInnerHTML.replaceAll("\n", "\\\\n")}`);
promise_test(async t => {
testUtils.setupEditingHost(initialInnerHTML);
const firstTextInChildDiv = editingHost.querySelector("div").firstChild;
await runReplacingTest(
t, testUtils, initialInnerHTML,
`<div id="child">Xdef<br>ghi</div>`,
"should not unwrap the first line of the child <div>",
lineBreakIsBR
? [
// [abc<br><div>]def
[{ startContainer: editingHost.firstChild, startOffset: 0, endContainer: firstTextInChildDiv, endOffset: 0 }],
]
: [
// [abc\n<div>]def
[{ startContainer: editingHost.firstChild, startOffset: 0, endContainer: firstTextInChildDiv, endOffset: 0 }],
],
"should return a range ending in the child <div>"
);
}, `${insertTextMethod} at ${initialInnerHTML.replaceAll("\n", "\\n")}`);
})();
(() => {
const initialInnerHTML =
`abc${lineBreak}${selStart}${lineBreak}<div id="child">d]ef<br>ghi</div>`;
promise_test(async t => {
testUtils.setupEditingHost(initialInnerHTML);
const firstTextInChildDiv = editingHost.querySelector("div").firstChild;
await runDeleteTest(
t, testUtils, initialInnerHTML,
[
`abc${lineBreak}<div id="child">ef<br>ghi</div>`,
`abc<div id="child">ef<br>ghi</div>`,
],
"should delete only the preceding empty line of the child <div> and selected text in the <div>",
[
`abc${lineBreak}<div id="child">Xef<br>ghi</div>`,
`abc<div id="child">Xef<br>ghi</div>`,
],
"should insert text into the child <div>",
lineBreakIsBR
? [
// abc<br>{<br><div>d]ef
[{ startContainer: editingHost, startOffset: 2, endContainer: firstTextInChildDiv, endOffset: 1 }],
// abc{<br><br><div>d]ef
[{ startContainer: editingHost, startOffset: 1, endContainer: firstTextInChildDiv, endOffset: 1 }],
// abc[<br><br><div>d]ef
[{ startContainer: editingHost.firstChild, startOffset: "abc".length, endContainer: firstTextInChildDiv, endOffset: 1 }],
]
: [
// abc\n[\n}<div>d]ef
[{ startContainer: editingHost.firstChild, startOffset: "abc\n".length, endContainer: firstTextInChildDiv, endOffset: 1 }],
// abc[\n\n}<div>d]ef
[{ startContainer: editingHost.firstChild, startOffset: "abc".length, endContainer: firstTextInChildDiv, endOffset: 1 }],
],
"should return a range ends at start of the child <div>"
);
}, `${deleteMethod} at ${initialInnerHTML.replaceAll("\n", "\\\\n")}`);
promise_test(async t => {
testUtils.setupEditingHost(initialInnerHTML);
const firstTextInChildDiv = editingHost.querySelector("div").firstChild;
await runReplacingTest(
t, testUtils, initialInnerHTML,
[
`abc${lineBreak}<div id="child">Xef<br>ghi</div>`,
`abc<div id="child">Xef<br>ghi</div>`,
],
"should not unwrap the first line of the child <div>",
lineBreakIsBR
? [
// abc<br>{<br><div>d]ef
[{ startContainer: editingHost, startOffset: 2, endContainer: firstTextInChildDiv, endOffset: 1 }],
// abc{<br><br><div>d]ef
[{ startContainer: editingHost, startOffset: 1, endContainer: firstTextInChildDiv, endOffset: 1 }],
// abc[<br><br><div>d]ef
[{ startContainer: editingHost.firstChild, startOffset: "abc".length, endContainer: firstTextInChildDiv, endOffset: 1 }],
]
: [
// abc\n[\n<div>d]ef
[{ startContainer: editingHost.firstChild, startOffset: "abc\n".length, endContainer: firstTextInChildDiv, endOffset: 1 }],
// abc[\n\n<div>d]ef
[{ startContainer: editingHost.firstChild, startOffset: "abc".length, endContainer: firstTextInChildDiv, endOffset: 1 }],
],
"should return a range ends at start of the child <div>"
);
}, `${insertTextMethod} at ${initialInnerHTML.replaceAll("\n", "\\n")}`);
})();
(() => {
const initialInnerHTML =
`${lineBreak}[abc${lineBreak}<div id="child">d]ef<br>ghi</div>`;
promise_test(async t => {
testUtils.setupEditingHost(initialInnerHTML);
const firstTextInChildDiv = editingHost.querySelector("div").firstChild;
await runDeleteTest(
t, testUtils, initialInnerHTML,
`${lineBreak}<div id="child">ef<br>ghi</div>`,
"should delete only the preceding empty line of the child <div> and the selected content in the <div>",
`${lineBreak}<div id="child">Xef<br>ghi</div>`,
"should insert text into the child <div>",
lineBreakIsBR
? [
// <br>[abc<br><div>d]ef
[{ startContainer: editingHost.firstChild.nextSibling, startOffset: 0, endContainer: firstTextInChildDiv, endOffset: 1 }],
]
: [
// \n[abc\n<div>d]ef
[{ startContainer: editingHost.firstChild, startOffset: "\n".length, endContainer: firstTextInChildDiv, endOffset: 1 }],
],
"should return a range ends at start of the child <div>"
);
}, `${deleteMethod} at ${initialInnerHTML.replaceAll("\n", "\\\\n")}`);
promise_test(async t => {
testUtils.setupEditingHost(initialInnerHTML);
const firstTextInChildDiv = editingHost.querySelector("div").firstChild;
await runReplacingTest(
t, testUtils, initialInnerHTML,
`${lineBreak}<div id="child">Xef<br>ghi</div>`,
"should not unwrap the first line of the child <div>",
lineBreakIsBR
? [
// <br>[abc<br><div>d]ef
[{ startContainer: editingHost.firstChild.nextSibling, startOffset: 0, endContainer: firstTextInChildDiv, endOffset: 1 }],
]
: [
// \n[abc\n<div>d]ef
[{ startContainer: editingHost.firstChild, startOffset: "\n".length, endContainer: firstTextInChildDiv, endOffset: 1 }],
],
"should return a range ends at start of the child <div>"
);
}, `${insertTextMethod} at ${initialInnerHTML.replaceAll("\n", "\\n")}`);
})();
(() => {
const initialInnerHTML =
`${lineBreak}${selStart}${lineBreak}<div id="child">d]ef<br>ghi</div>`;
promise_test(async t => {
testUtils.setupEditingHost(initialInnerHTML);
const firstTextInChildDiv = editingHost.querySelector("div").firstChild;
await runDeleteTest(
t, testUtils, initialInnerHTML,
`${lineBreak}<div id="child">ef<br>ghi</div>`,
"should delete only the preceding empty line of the child <div> and selected content in the <div>",
`${lineBreak}<div id="child">Xef<br>ghi</div>`,
"should insert text into the child <div>",
lineBreakIsBR
? [
// <br>{<br><div>d]ef
[{ startContainer: editingHost, startOffset: 1, endContainer: firstTextInChildDiv, endOffset: 1 }],
]
: [
// \n[\n<div>d]ef
[{ startContainer: editingHost.firstChild, startOffset: "\n".length, endContainer: firstTextInChildDiv, endOffset: 1 }],
],
"should return a range ends at start of the child <div>"
);
}, `${deleteMethod} at ${initialInnerHTML.replaceAll("\n", "\\\\n")}`);
promise_test(async t => {
testUtils.setupEditingHost(initialInnerHTML);
const firstTextInChildDiv = editingHost.querySelector("div").firstChild;
await runReplacingTest(
t, testUtils, initialInnerHTML,
`${lineBreak}<div id="child">Xef<br>ghi</div>`,
"should not unwrap the first line of the child <div>",
lineBreakIsBR
? [
// <br>{<br><div>d]ef
[{ startContainer: editingHost, startOffset: 1, endContainer: firstTextInChildDiv, endOffset: 1 }],
]
: [
// \n[\n<div>d]ef
[{ startContainer: editingHost.firstChild, startOffset: "\n".length, endContainer: firstTextInChildDiv, endOffset: 1 }],
],
"should return a range ends at start of the child <div>"
);
}, `${insertTextMethod} at ${initialInnerHTML.replaceAll("\n", "\\n")}`);
})();
(() => {
const initialInnerHTML =
`${selStart}${lineBreak}${lineBreak}<div id="child">d]ef<br>ghi</div>`;
promise_test(async t => {
testUtils.setupEditingHost(initialInnerHTML);
const firstTextInChildDiv = editingHost.querySelector("div").firstChild;
await runDeleteTest(
t, testUtils, initialInnerHTML,
`<div id="child">ef<br>ghi</div>`,
"should delete only the preceding empty line of the child <div> and selected content in the <div>",
`<div id="child">Xef<br>ghi</div>`,
"should insert text into the child <div>",
lineBreakIsBR
? [
// {<br><br><div>d]ef
[{ startContainer: editingHost, startOffset: 0, endContainer: firstTextInChildDiv, endOffset: 1 }],
]
: [
// [\n\n<div>d]ef
[{ startContainer: editingHost.firstChild, startOffset: 0, endContainer: firstTextInChildDiv, endOffset: 1 }],
],
"should return a range ends at start of the child <div>"
);
}, `${deleteMethod} at ${initialInnerHTML.replaceAll("\n", "\\\\n")}`);
promise_test(async t => {
testUtils.setupEditingHost(initialInnerHTML);
const firstTextInChildDiv = editingHost.querySelector("div").firstChild;
await runReplacingTest(
t, testUtils, initialInnerHTML,
`<div id="child">Xef<br>ghi</div>`,
"should not unwrap the first line of the child <div>",
lineBreakIsBR
? [
// {<br><br><div>d]ef
[{ startContainer: editingHost, startOffset: 0, endContainer: firstTextInChildDiv, endOffset: 1 }],
]
: [
// [\n\n<div>d]ef
[{ startContainer: editingHost.firstChild, startOffset: 0, endContainer: firstTextInChildDiv, endOffset: 1 }],
],
"should return a range ends at start of the child <div>"
);
}, `${insertTextMethod} at ${initialInnerHTML.replaceAll("\n", "\\n")}`);
})();
(() => {
const initialInnerHTML =
`[abc${lineBreak}${lineBreak}<div id="child">d]ef<br>ghi</div>`;
promise_test(async t => {
testUtils.setupEditingHost(initialInnerHTML);
const firstTextInChildDiv = editingHost.querySelector("div").firstChild;
await runDeleteTest(
t, testUtils, initialInnerHTML,
`<div id="child">ef<br>ghi</div>`,
"should delete only the preceding empty line of the child <div> and selected content in the <div>",
`<div id="child">Xef<br>ghi</div>`,
"should insert text into the child <div>",
lineBreakIsBR
? [
// [abc<br><br><div>d]ef
[{ startContainer: editingHost.firstChild, startOffset: 0, endContainer: firstTextInChildDiv, endOffset: 1 }],
]
: [
// [abc\n\n}<div>d]ef
[{ startContainer: editingHost.firstChild, startOffset: 0, endContainer: firstTextInChildDiv, endOffset: 1 }],
],
"should return a range ends at start of the child <div>"
);
}, `${deleteMethod} at ${initialInnerHTML.replaceAll("\n", "\\\\n")}`);
promise_test(async t => {
testUtils.setupEditingHost(initialInnerHTML);
const firstTextInChildDiv = editingHost.querySelector("div").firstChild;
await runReplacingTest(
t, testUtils, initialInnerHTML,
`<div id="child">Xef<br>ghi</div>`,
"should not unwrap the first line of the child <div>",
lineBreakIsBR
? [
// [abc<br><div>d]ef
[{ startContainer: editingHost.firstChild, startOffset: 0, endContainer: firstTextInChildDiv, endOffset: 1 }],
]
: [
// [abc\n<div>d]ef
[{ startContainer: editingHost.firstChild, startOffset: 0, endContainer: firstTextInChildDiv, endOffset: 1 }],
],
"should return a range ends at start of the child <div>"
);
}, `${insertTextMethod} at ${initialInnerHTML.replaceAll("\n", "\\n")}`);
})();
(function test_BackspaceForCollapsedSelection() {
if (!testBackward) {
return;
}
(() => {
const initialInnerHTML =
`abc${lineBreak}${lineBreak}<div id="child">[]def<br>ghi</div>`;
promise_test(async t => {
testUtils.setupEditingHost(initialInnerHTML);
await runDeleteTest(
t, testUtils, initialInnerHTML,
[
`abc${lineBreak}<div id="child">def<br>ghi</div>`,
`abc<div id="child">def<br>ghi</div>`,
],
"should delete only the preceding empty line of the child <div>",
[
`abc${lineBreak}<div id="child">Xdef<br>ghi</div>`,
`abc<div id="child">Xdef<br>ghi</div>`,
],
"should insert text into the child <div>",
lineBreakIsBR
? [
// abc<br>{<br>}<div>
[{ startContainer: editingHost, startOffset: 2, endContainer: editingHost, endOffset: 3 }],
// abc{<br><br>}<div>
[{ startContainer: editingHost, startOffset: 1, endContainer: editingHost, endOffset: 3 }],
// abc[<br><br>}<div>
[{ startContainer: editingHost.firstChild, startOffset: "abc".length, endContainer: editingHost, endOffset: 3 }],
]
: [
// abc\n[\n}<div>
[{ startContainer: editingHost.firstChild, startOffset: "abc\n".length, endContainer: editingHost, endOffset: 1 }],
// abc[\n\n}<div>
[{ startContainer: editingHost.firstChild, startOffset: "abc".length, endContainer: editingHost, endOffset: 1 }],
// abc\n[\n]<div>
[{ startContainer: editingHost.firstChild, startOffset: "abc\n".length, endContainer: editingHost.firstChild, endOffset: "abc\n\n".length }],
// abc[\n\n]<div>
[{ startContainer: editingHost.firstChild, startOffset: "abc".length, endContainer: editingHost.firstChild, endOffset: "abc\n\n".length }],
],
"should return a range before the child <div>"
);
}, `${deleteMethod} at ${initialInnerHTML.replaceAll("\n", "\\\\n")}`);
})();
(() => {
const initialInnerHTML =
`${lineBreak}${lineBreak}<div id="child">[]def<br>ghi</div>`;
promise_test(async t => {
testUtils.setupEditingHost(initialInnerHTML);
await runDeleteTest(
t, testUtils, initialInnerHTML,
`${lineBreak}<div id="child">def<br>ghi</div>`,
"should delete only the preceding empty line of the child <div>",
`${lineBreak}<div id="child">Xdef<br>ghi</div>`,
"should insert text into the child <div>",
lineBreakIsBR
? [
// <br>{<br>}<div>
[{ startContainer: editingHost, startOffset: 1, endContainer: editingHost, endOffset: 2 }],
]
: [
// \n[\n}<div>
[{ startContainer: editingHost.firstChild, startOffset: "\n".length, endContainer: editingHost, endOffset: 1 }],
// \n[\n]<div>
[{ startContainer: editingHost.firstChild, startOffset: "\n".length, endContainer: editingHost.firstChild, endOffset: "\n\n".length }],
],
"should return a range before the child <div>"
);
}, `${deleteMethod} at ${initialInnerHTML.replaceAll("\n", "\\\\n")}`);
})();
(() => {
const initialInnerHTML =
`${lineBreak}<div id="child">[]def<br>ghi</div>`;
promise_test(async t => {
testUtils.setupEditingHost(initialInnerHTML);
await runDeleteTest(
t, testUtils, initialInnerHTML,
`<div id="child">def<br>ghi</div>`,
"should delete only the preceding empty line of the child <div>",
`<div id="child">Xdef<br>ghi</div>`,
"should insert text into the child <div>",
lineBreakIsBR
? [
// {<br>}<div>
[{ startContainer: editingHost, startOffset: 0, endContainer: editingHost, endOffset: 1 }],
]
: [
// {\n}<div>
[{ startContainer: editingHost, startOffset: 0, endContainer: editingHost, endOffset: 1 }],
// [\n}<div>
[{ startContainer: editingHost.firstChild, startOffset: 0, endContainer: editingHost, endOffset: 1 }],
// [\n]<div>
[{ startContainer: editingHost.firstChild, startOffset: 0, endContainer: editingHost.firstChild, endOffset: "\n".length }],
],
"should return a range before the child <div>"
);
}, `${deleteMethod} at ${initialInnerHTML.replaceAll("\n", "\\\\n")}`);
})();
(() => {
const initialInnerHTML =
`<b>abc${lineBreak}${lineBreak}</b></b><div id="child">[]def<br>ghi</div>`;
promise_test(async t => {
testUtils.setupEditingHost(initialInnerHTML);
const b = editingHost.querySelector("b");
await runDeleteTest(
t, testUtils, initialInnerHTML,
[
`<b>abc${lineBreak}</b><div id="child">def<br>ghi</div>`,
`<b>abc</b><div id="child">def<br>ghi</div>`,
],
"should delete only the preceding empty line of the child <div> (<b> should stay)",
[
`<b>abc${lineBreak}</b><div id="child">Xdef<br>ghi</div>`,
`<b>abc</b><div id="child">Xdef<br>ghi</div>`,
`<b>abc${lineBreak}</b><div id="child"><b>X</b>def<br>ghi</div>`,
`<b>abc</b><div id="child"><b>X</b>def<br>ghi</div>`,
],
"should insert text into the child <div> with or without <b>",
lineBreakIsBR
? [
// <b>abc<br>{<br>}</b><div>
[{ startContainer: b, startOffset: 2, endContainer: b, endOffset: 3 }],
// <b>abc{<br><br>}</b><div>
[{ startContainer: b, startOffset: 1, endContainer: b, endOffset: 3 }],
// <b>abc[<br><br>}</b><div>
[{ startContainer: b.firstChild, startOffset: "abc".length, endContainer: b, endOffset: 3 }],
]
: [
// <b>abc\n[\n}</b><div>
[{ startContainer: b.firstChild, startOffset: "abc\n".length, endContainer: b, endOffset: 1 }],
// <b>abc[\n\n}</b><div>
[{ startContainer: b.firstChild, startOffset: "abc".length, endContainer: b, endOffset: 1 }],
// <b>abc\n[\n]</b><div>
[{ startContainer: b.firstChild, startOffset: "abc\n".length, endContainer: b.firstChild, endOffset: "abc\n\n".length }],
// <b>abc[\n\n]</b><div>
[{ startContainer: b.firstChild, startOffset: "abc".length, endContainer: b.firstChild, endOffset: "abc\n\n".length }],
],
"should return a range before the child <div>"
);
}, `${deleteMethod} at ${initialInnerHTML.replaceAll("\n", "\\\\n")}`);
})();
(() => {
const initialInnerHTML =
`<b>${lineBreak}</b><div id="child">[]def<br>ghi</div>`;
promise_test(async t => {
testUtils.setupEditingHost(initialInnerHTML);
await runDeleteTest(
t, testUtils, initialInnerHTML,
`<div id="child">def<br>ghi</div>`,
"should delete only the preceding empty line (including the <b>) of the child <div>",
[
`<div id="child">Xdef<br>ghi</div>`,
`<div id="child"><b>X</b>def<br>ghi</div>`,
],
"should insert text into the child <div> with or without <b>",
[
// {<b><br></b>}<div> or {<b>\n</b>}<div>
[{ startContainer: editingHost, startOffset: 0, endContainer: editingHost, endOffset: 1 }],
],
"should return a range before the child <div>"
);
}, `${deleteMethod} at ${initialInnerHTML.replaceAll("\n", "\\\\n")}`);
})();
})();
(function test_ForwardDeleteForCollapsedSelection() {
if (testBackward) {
return;
}
(() => {
const initialInnerHTML =
`abc${lineBreak}${selCollapsed}${lineBreak}<div id="child">def<br>ghi</div>`;
promise_test(async t => {
testUtils.setupEditingHost(initialInnerHTML);
await runDeleteTest(
t, testUtils, initialInnerHTML,
[
`abc${lineBreak}<div id="child">def<br>ghi</div>`,
`abc<div id="child">def<br>ghi</div>`,
],
"should delete only the preceding empty line of the child <div>",
[
`abc${lineBreak}<div id="child">Xdef<br>ghi</div>`,
`abc<div id="child">Xdef<br>ghi</div>`,
],
"should insert text into the child <div>",
lineBreakIsBR
? [
// abc<br>{<br>}<div>
[{ startContainer: editingHost, startOffset: 2, endContainer: editingHost, endOffset: 3 }],
// abc{<br><br>}<div>
[{ startContainer: editingHost, startOffset: 1, endContainer: editingHost, endOffset: 3 }],
// abc[<br><br>}<div>
[{ startContainer: editingHost.firstChild, startOffset: "abc".length, endContainer: editingHost, endOffset: 3 }],
]
: [
// abc\n[\n}<div>
[{ startContainer: editingHost.firstChild, startOffset: "abc\n".length, endContainer: editingHost, endOffset: 1 }],
// abc[\n\n}<div>
[{ startContainer: editingHost.firstChild, startOffset: "abc".length, endContainer: editingHost, endOffset: 1 }],
// abc\n[\n]<div>
[{ startContainer: editingHost.firstChild, startOffset: "abc\n".length, endContainer: editingHost.firstChild, endOffset: "abc\n\n".length }],
// abc[\n\n]<div>
[{ startContainer: editingHost.firstChild, startOffset: "abc".length, endContainer: editingHost.firstChild, endOffset: "abc\n\n".length }],
],
"should return a range before the child <div>"
);
}, `${deleteMethod} at ${initialInnerHTML.replaceAll("\n", "\\\\n")}`);
})();
(() => {
const initialInnerHTML =
`${lineBreak}${selCollapsed}${lineBreak}<div id="child">def<br>ghi</div>`;
promise_test(async t => {
testUtils.setupEditingHost(initialInnerHTML);
await runDeleteTest(
t, testUtils, initialInnerHTML,
`${lineBreak}<div id="child">def<br>ghi</div>`,
"should delete only the preceding empty line of the child <div>",
`${lineBreak}<div id="child">Xdef<br>ghi</div>`,
"should insert text into the child <div>",
lineBreakIsBR
? [
// <br>{<br>}<div>
[{ startContainer: editingHost, startOffset: 1, endContainer: editingHost, endOffset: 2 }],
]
: [
// \n[\n}<div>
[{ startContainer: editingHost.firstChild, startOffset: "\n".length, endContainer: editingHost, endOffset: 1 }],
// \n[\n]<div>
[{ startContainer: editingHost.firstChild, startOffset: "\n".length, endContainer: editingHost.firstChild, endOffset: "\n\n".length }],
],
"should return a range before the child <div>"
);
}, `${deleteMethod} at ${initialInnerHTML.replaceAll("\n", "\\\\n")}`);
})();
(() => {
const initialInnerHTML =
`${selCollapsed}${lineBreak}<div id="child">def<br>ghi</div>`;
promise_test(async t => {
testUtils.setupEditingHost(initialInnerHTML);
await runDeleteTest(
t, testUtils, initialInnerHTML,
`<div id="child">def<br>ghi</div>`,
"should delete only the preceding empty line of the child <div>",
`<div id="child">Xdef<br>ghi</div>`,
"should insert text into the child <div>",
lineBreakIsBR
? [
// {<br>}<div>
[{ startContainer: editingHost, startOffset: 0, endContainer: editingHost, endOffset: 1 }],
]
: [
// {\n}<div>
[{ startContainer: editingHost, startOffset: 0, endContainer: editingHost, endOffset: 1 }],
// [\n}<div>
[{ startContainer: editingHost.firstChild, startOffset: 0, endContainer: editingHost, endOffset: 1 }],
// [\n]<div>
[{ startContainer: editingHost.firstChild, startOffset: 0, endContainer: editingHost.firstChild, endOffset: "\n".length }],
],
"should return a range before the child <div>"
);
}, `${deleteMethod} at ${initialInnerHTML.replaceAll("\n", "\\\\n")}`);
})();
(() => {
const initialInnerHTML =
`<b>abc${lineBreak}${selCollapsed}${lineBreak}</b></b><div id="child">def<br>ghi</div>`;
promise_test(async t => {
testUtils.setupEditingHost(initialInnerHTML);
const b = editingHost.querySelector("b");
await runDeleteTest(
t, testUtils, initialInnerHTML,
[
`<b>abc${lineBreak}</b><div id="child">def<br>ghi</div>`,
`<b>abc</b><div id="child">def<br>ghi</div>`,
],
"should delete only the preceding empty line of the child <div> (<b> should stay)",
[
`<b>abc${lineBreak}</b><div id="child">Xdef<br>ghi</div>`,
`<b>abc</b><div id="child">Xdef<br>ghi</div>`,
`<b>abc${lineBreak}</b><div id="child"><b>X</b>def<br>ghi</div>`,
`<b>abc</b><div id="child"><b>X</b>def<br>ghi</div>`,
],
"should insert text into the child <div> with or without <b>",
lineBreakIsBR
? [
// <b>abc<br>{<br>}</b><div>
[{ startContainer: b, startOffset: 2, endContainer: b, endOffset: 3 }],
// <b>abc{<br><br>}</b><div>
[{ startContainer: b, startOffset: 1, endContainer: b, endOffset: 3 }],
// <b>abc[<br><br>}</b><div>
[{ startContainer: b.firstChild, startOffset: "abc".length, endContainer: b, endOffset: 3 }],
]
: [
// <b>abc\n[\n}</b><div>
[{ startContainer: b.firstChild, startOffset: "abc\n".length, endContainer: b, endOffset: 1 }],
// <b>abc[\n\n}</b><div>
[{ startContainer: b.firstChild, startOffset: "abc".length, endContainer: b, endOffset: 1 }],
// <b>abc\n[\n]</b><div>
[{ startContainer: b.firstChild, startOffset: "abc\n".length, endContainer: b.firstChild, endOffset: "abc\n\n".length }],
// <b>abc[\n\n]</b><div>
[{ startContainer: b.firstChild, startOffset: "abc".length, endContainer: b.firstChild, endOffset: "abc\n\n".length }],
],
"should return a range before the child <div>"
);
}, `${deleteMethod} at ${initialInnerHTML.replaceAll("\n", "\\\\n")}`);
})();
(() => {
const initialInnerHTML =
`<b>${selCollapsed}${lineBreak}</b><div id="child">def<br>ghi</div>`;
promise_test(async t => {
testUtils.setupEditingHost(initialInnerHTML);
await runDeleteTest(
t, testUtils, initialInnerHTML,
`<div id="child">def<br>ghi</div>`,
"should delete only the preceding empty line (including the <b>) of the child <div>",
[
`<div id="child">Xdef<br>ghi</div>`,
`<div id="child"><b>X</b>def<br>ghi</div>`,
],
"should insert text into the child <div> with or without <b>",
[
// {<b><br></b>}<div> or {<b>\n</b>}<div>
[{ startContainer: editingHost, startOffset: 0, endContainer: editingHost, endOffset: 1 }],
],
"should return a range before the child <div>"
);
}, `${deleteMethod} at ${initialInnerHTML.replaceAll("\n", "\\\\n")}`);
})();
})();
}, {once: true});
</script>
</head>
<body><div contenteditable></div></body>
</html>