Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 8 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /editing/other/insert-paragraph-in-void-element.tentative.html - WPT Dashboard Interop Dashboard
<!doctype html>
<meta charset=utf-8>
<title>Test insertParagraph when selection collapsed in void element</title>
<meta name="timeout" content="long">
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<div contenteditable></div>
<script>
"use strict";
const voidElements = [
"br",
"embed",
"hr",
"img",
"input",
"wbr",
];
// This test tests whether the inserted text is inserted into, when selection
// is collapsed in the void element. The expected results are based on Blink,
// but the results of <hr>, <embed> and <wbr> elements are not consistent with
// the other elements'. Therefore, Blink also does not pass some of the
// following tests.
// FYI: This cannot be tested by editing/run because there is no way to collapse
// selection into a void element with the framework.
const editor = document.querySelector("div[contenteditable]");
for (const container of ["div", "h1", "li"]) {
const openTagOfContainer = (() => {
if (container == "li") {
return "<ol><li>";
}
return `<${container}>`;
})();
const closeTagOfContainer = (() => {
if (container == "li") {
return "</li></ol>";
}
return `</${container}>`;
})();
const closeAndOpenTagsOfSplitPoint = (() => {
if (container == "li") {
return "</li><li>";
}
return `</${container}><${container}>`;
})();
for (const tag of voidElements) {
const visibleTag = tag == "hr" || tag == "img" || tag == "input";
test(() => {
editor.innerHTML = `${openTagOfContainer}<${tag}>${closeTagOfContainer}`;
const element = editor.querySelector(tag);
editor.focus();
const selection = getSelection();
selection.collapse(element, 0);
document.execCommand("insertParagraph");
if (tag == "br") {
if (!visibleTag && container == "h1") {
assert_in_array(
editor.innerHTML,
`${openTagOfContainer}<br>${closeTagOfContainer}<div><br></div>`,
`The paragraph should be inserted before the <${tag}> element`
);
} else {
assert_in_array(
editor.innerHTML,
`${openTagOfContainer}<br>${closeAndOpenTagsOfSplitPoint}<br>${closeTagOfContainer}`,
`The paragraph should be inserted before the <${tag}> element`
);
}
} else if (!visibleTag && container == "h1") {
assert_in_array(
editor.innerHTML,
[
`${openTagOfContainer}<br>${closeTagOfContainer}<div><${tag}></div>`,
`${openTagOfContainer}<br>${closeTagOfContainer}<div><${tag}><br></div>`,
],
`The paragraph should be inserted before the <${tag}> element`
);
} else {
assert_in_array(
editor.innerHTML,
[
`${openTagOfContainer}<br>${closeAndOpenTagsOfSplitPoint}<${tag}>${closeTagOfContainer}`,
`${openTagOfContainer}<br>${closeAndOpenTagsOfSplitPoint}<${tag}><br>${closeTagOfContainer}`,
],
`The paragraph should be inserted before the <${tag}> element`
);
}
}, `Inserting paragraph when selection is collapsed in <${tag}> in <${container}> which is only child`);
test(() => {
editor.innerHTML = `${openTagOfContainer}<${tag}>${closeTagOfContainer}`;
const element = editor.querySelector(tag);
editor.focus();
const selection = getSelection();
selection.collapse(element, 0);
element.getBoundingClientRect();
document.execCommand("insertParagraph");
if (tag == "br") {
if (!visibleTag && container == "h1") {
assert_in_array(
editor.innerHTML,
`${openTagOfContainer}<br>${closeTagOfContainer}<div><br></div>`,
`The paragraph should be inserted before the <${tag}> element`
);
} else {
assert_in_array(
editor.innerHTML,
`${openTagOfContainer}<br>${closeAndOpenTagsOfSplitPoint}<br>${closeTagOfContainer}`,
`The paragraph should be inserted before the <${tag}> element`
);
}
} else if (!visibleTag && container == "h1") {
assert_in_array(
editor.innerHTML,
[
`${openTagOfContainer}<br>${closeTagOfContainer}<div><${tag}></div>`,
`${openTagOfContainer}<br>${closeTagOfContainer}<div><${tag}><br></div>`,
],
`The paragraph should be inserted before the <${tag}> element`
);
} else {
assert_in_array(
editor.innerHTML,
[
`${openTagOfContainer}<br>${closeAndOpenTagsOfSplitPoint}<${tag}>${closeTagOfContainer}`,
`${openTagOfContainer}<br>${closeAndOpenTagsOfSplitPoint}<${tag}><br>${closeTagOfContainer}`,
],
`The paragraph should be inserted before the <${tag}> element`
);
}
}, `Inserting paragraph when selection is collapsed in <${tag}> in <${container}> which is only child (explicitly flushes maybe pending layout)`);
test(() => {
editor.innerHTML = `${openTagOfContainer}abc<${tag}>${closeTagOfContainer}`;
const element = editor.querySelector(tag);
editor.focus();
const selection = getSelection();
selection.collapse(element, 0);
document.execCommand("insertParagraph");
if (tag == "br") {
if (!visibleTag && container == "h1") {
assert_in_array(
editor.innerHTML,
[
`${openTagOfContainer}abc${closeTagOfContainer}<div><br></div>`,
`${openTagOfContainer}abc<br>${closeTagOfContainer}<div><br></div>`,
],
`The paragraph should be split before the <${tag}> element`
);
} else {
assert_in_array(
editor.innerHTML,
[
`${openTagOfContainer}abc${closeAndOpenTagsOfSplitPoint}<br>${closeTagOfContainer}`,
`${openTagOfContainer}abc<br>${closeAndOpenTagsOfSplitPoint}<br>${closeTagOfContainer}`,
],
`The paragraph should be split before the <${tag}> element`
);
}
} else if (!visibleTag && container == "h1") {
assert_in_array(
editor.innerHTML,
[
`${openTagOfContainer}abc${closeTagOfContainer}<div><${tag}></div>`,
`${openTagOfContainer}abc<br>${closeTagOfContainer}<div><${tag}></div>`,
`${openTagOfContainer}abc${closeTagOfContainer}<div><${tag}><br></div>`,
`${openTagOfContainer}abc<br>${closeTagOfContainer}<div><${tag}><br></div>`,
],
`The paragraph should be split before the <${tag}> element`
);
} else {
assert_in_array(
editor.innerHTML,
[
`${openTagOfContainer}abc${closeAndOpenTagsOfSplitPoint}<${tag}>${closeTagOfContainer}`,
`${openTagOfContainer}abc<br>${closeAndOpenTagsOfSplitPoint}<${tag}>${closeTagOfContainer}`,
`${openTagOfContainer}abc${closeAndOpenTagsOfSplitPoint}<${tag}><br>${closeTagOfContainer}`,
`${openTagOfContainer}abc<br>${closeAndOpenTagsOfSplitPoint}<${tag}><br>${closeTagOfContainer}`,
],
`The paragraph should be split before the <${tag}> element`
);
}
}, `Inserting paragraph when selection is collapsed in <${tag}> which follows a text node in <${container}>`);
test(() => {
editor.innerHTML = `${openTagOfContainer}<${tag}>abc${closeTagOfContainer}`;
const element = editor.querySelector(tag);
editor.focus();
const selection = getSelection();
selection.collapse(element, 0);
document.execCommand("insertParagraph");
assert_in_array(
editor.innerHTML,
[
`${openTagOfContainer}<br>${closeAndOpenTagsOfSplitPoint}<${tag}>abc${closeTagOfContainer}`,
`${openTagOfContainer}<br>${closeAndOpenTagsOfSplitPoint}<${tag}>abc<br>${closeTagOfContainer}`,
],
`The paragraph should be inserted before the <${tag}> element`
);
}, `Inserting paragraph when selection is collapsed in <${tag}> which is followed by a text node in <${container}>`);
}
}
</script>