206 lines
8.1 KiB
HTML
206 lines
8.1 KiB
HTML
<!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>
|