426 lines
17 KiB
HTML
426 lines
17 KiB
HTML
<!doctype html>
|
|
<meta charset=utf-8>
|
|
<meta name="timeout" content="long">
|
|
<meta name="variant" content="?pre">
|
|
<meta name="variant" content="?pre-wrap">
|
|
<meta name="variant" content="?pre-line">
|
|
<meta name="variant" content="?nowrap">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="../include/editor-test-utils.js"></script>
|
|
<link rel=stylesheet href=../include/reset.css>
|
|
<title>insertlinebreak in white-space specified element</title>
|
|
<body><div contenteditable></div></body>
|
|
<script>
|
|
/**
|
|
* The expected behavior is based on Chrome 91.
|
|
*/
|
|
const style = location.search.substr(1);
|
|
const isNewLineSignificant = style == "pre" || style == "pre-wrap" || style == "pre-line";
|
|
const editingHost = document.querySelector("div[contenteditable]");
|
|
for (const defaultParagraphSeparator of ["div", "p"]) {
|
|
document.execCommand("defaultparagraphseparator", false, defaultParagraphSeparator);
|
|
for (const display of ["block", "inline", "inline-block"]) {
|
|
// insertlinebreak at direct child of editing host.
|
|
test(() => {
|
|
editingHost.style.whiteSpace = style;
|
|
editingHost.style.display = display;
|
|
const utils = new EditorTestUtils(editingHost);
|
|
utils.setupEditingHost(`abc[]`);
|
|
editingHost.getBoundingClientRect();
|
|
document.execCommand("insertlinebreak");
|
|
if (isNewLineSignificant) {
|
|
assert_in_array(
|
|
editingHost.innerHTML,
|
|
[
|
|
`abc\n\n`,
|
|
`abc\n<br>`,
|
|
],
|
|
"A linefeed should be inserted at end"
|
|
);
|
|
} else {
|
|
assert_equals(
|
|
editingHost.innerHTML,
|
|
`abc<br><br>`,
|
|
"A <br> should be inserted at end"
|
|
);
|
|
}
|
|
}, `<div contenteditable style="white-space:${style}; display:${display}">abc[]</div> (defaultparagraphseparator: ${defaultParagraphSeparator})`);
|
|
|
|
test(() => {
|
|
editingHost.style.whiteSpace = style;
|
|
editingHost.style.display = display;
|
|
const utils = new EditorTestUtils(editingHost);
|
|
utils.setupEditingHost(`[]abc`);
|
|
editingHost.getBoundingClientRect();
|
|
document.execCommand("insertlinebreak");
|
|
if (isNewLineSignificant) {
|
|
assert_in_array(
|
|
editingHost.innerHTML,
|
|
[
|
|
`\nabc`,
|
|
`\nabc<br>`,
|
|
],
|
|
"A linefeed should be inserted at start"
|
|
);
|
|
} else {
|
|
assert_in_array(
|
|
editingHost.innerHTML,
|
|
[
|
|
`<br>abc`,
|
|
`<br>abc<br>`,
|
|
],
|
|
"A <br> should be inserted at start"
|
|
);
|
|
}
|
|
}, `<div contenteditable style="white-space:${style}; display:${display}">[]abc</div> (defaultparagraphseparator: ${defaultParagraphSeparator})`);
|
|
|
|
test(() => {
|
|
editingHost.style.whiteSpace = style;
|
|
editingHost.style.display = display;
|
|
const utils = new EditorTestUtils(editingHost);
|
|
utils.setupEditingHost(`a[]bc`);
|
|
editingHost.getBoundingClientRect();
|
|
document.execCommand("insertlinebreak");
|
|
if (isNewLineSignificant) {
|
|
assert_in_array(
|
|
editingHost.innerHTML,
|
|
[
|
|
`a\nbc`,
|
|
`a\nbc<br>`,
|
|
],
|
|
"A linefeed should be inserted"
|
|
);
|
|
} else {
|
|
assert_in_array(
|
|
editingHost.innerHTML,
|
|
[
|
|
`a<br>bc`,
|
|
`a<br>bc<br>`,
|
|
],
|
|
"A <br> should be inserted"
|
|
);
|
|
}
|
|
}, `<div contenteditable style="white-space:${style}; display:${display}">a[]bc</div> (defaultparagraphseparator: ${defaultParagraphSeparator})`);
|
|
|
|
// inline styles should be preserved.
|
|
test(() => {
|
|
editingHost.style.whiteSpace = style;
|
|
editingHost.style.display = display;
|
|
const utils = new EditorTestUtils(editingHost);
|
|
utils.setupEditingHost(`abc[]`);
|
|
editingHost.getBoundingClientRect();
|
|
document.execCommand("italic");
|
|
document.execCommand("insertlinebreak");
|
|
document.execCommand("inserttext", false, "def");
|
|
if (isNewLineSignificant) {
|
|
assert_in_array(
|
|
editingHost.innerHTML,
|
|
[
|
|
`abc\n<i>def</i>`,
|
|
`abc\n<i>def\n</i>`,
|
|
`abc\n<i>def<br></i>`,
|
|
`abc\n<i>def</i>\n`,
|
|
`abc\n<i>def</i><br>`,
|
|
],
|
|
"The temporary inline style should be applied to next line"
|
|
);
|
|
} else {
|
|
assert_in_array(
|
|
editingHost.innerHTML,
|
|
[
|
|
`abc<br><i>def</i>`,
|
|
`abc<br><i>def<br></i>`,
|
|
`abc<br><i>def</i><br>`,
|
|
],
|
|
"The temporary inline style should be applied to next line"
|
|
);
|
|
}
|
|
}, `<div contenteditable style="white-space:${style}; display:${display}">abc[]</div> (defaultparagraphseparator: ${defaultParagraphSeparator}) (preserving temporary inline style test)`);
|
|
|
|
test(() => {
|
|
editingHost.style.whiteSpace = style;
|
|
editingHost.style.display = display;
|
|
const utils = new EditorTestUtils(editingHost);
|
|
utils.setupEditingHost(`<b>abc[]</b>`);
|
|
editingHost.getBoundingClientRect();
|
|
document.execCommand("insertlinebreak");
|
|
document.execCommand("inserttext", false, "def");
|
|
if (isNewLineSignificant) {
|
|
assert_in_array(
|
|
editingHost.innerHTML,
|
|
[
|
|
`<b>abc\ndef</b>`,
|
|
`<b>abc\ndef\n</b>`,
|
|
`<b>abc\ndef<br></b>`,
|
|
`<b>abc\ndef</b>\n`,
|
|
`<b>abc\ndef</b><br>`,
|
|
],
|
|
"The inline style should be applied to next line"
|
|
);
|
|
} else {
|
|
assert_in_array(
|
|
editingHost.innerHTML,
|
|
[
|
|
`<b>abc<br>def</b>`,
|
|
`<b>abc<br>def<br></b>`,
|
|
`<b>abc<br>def</b><br>`,
|
|
],
|
|
"The inline style should be applied to next line"
|
|
);
|
|
}
|
|
}, `<div contenteditable style="white-space:${style}; display:${display}"><b>abc[]</b></div> (defaultparagraphseparator: ${defaultParagraphSeparator}) (preserving inline style test)`);
|
|
|
|
for (const paragraph of ["div", "p"]) {
|
|
// insertlinebreak in existing paragraph whose `white-space` is specified.
|
|
test(() => {
|
|
editingHost.style.whiteSpace = "normal";
|
|
editingHost.style.display = display;
|
|
const utils = new EditorTestUtils(editingHost);
|
|
utils.setupEditingHost(`<${paragraph} style="white-space:${style}">abc[]</${paragraph}>`);
|
|
editingHost.getBoundingClientRect();
|
|
document.execCommand("insertlinebreak");
|
|
if (isNewLineSignificant) {
|
|
assert_in_array(
|
|
editingHost.innerHTML,
|
|
[
|
|
`<${paragraph} style="white-space:${style}">abc\n\n</${paragraph}>`,
|
|
`<${paragraph} style="white-space:${style}">abc\n<br></${paragraph}>`,
|
|
],
|
|
"A linefeed should be inserted at end of the paragraph"
|
|
);
|
|
} else {
|
|
assert_equals(
|
|
editingHost.innerHTML,
|
|
`<${paragraph} style="white-space:${style}">abc<br><br></${paragraph}>`,
|
|
"A <br> should be inserted at end of the paragraph"
|
|
);
|
|
}
|
|
}, `<div contenteditable style="display:${display}"><${paragraph} style="white-space:${style}">abc[]</${paragraph}></div> (defaultparagraphseparator: ${defaultParagraphSeparator})`);
|
|
|
|
test(() => {
|
|
editingHost.style.whiteSpace = "normal";
|
|
editingHost.style.display = display;
|
|
const utils = new EditorTestUtils(editingHost);
|
|
utils.setupEditingHost(`<${paragraph} style="white-space:${style}">[]abc</${paragraph}>`);
|
|
editingHost.getBoundingClientRect();
|
|
document.execCommand("insertlinebreak");
|
|
if (isNewLineSignificant) {
|
|
assert_in_array(
|
|
editingHost.innerHTML,
|
|
[
|
|
`<${paragraph} style="white-space:${style}">\nabc</${paragraph}>`,
|
|
`<${paragraph} style="white-space:${style}">\nabc<br></${paragraph}>`,
|
|
],
|
|
"A linefeed should be inserted at start"
|
|
);
|
|
} else {
|
|
assert_in_array(
|
|
editingHost.innerHTML,
|
|
[
|
|
`<${paragraph} style="white-space:${style}"><br>abc</${paragraph}>`,
|
|
`<${paragraph} style="white-space:${style}"><br>abc<br></${paragraph}>`,
|
|
],
|
|
"A <br> should be inserted at start"
|
|
);
|
|
}
|
|
}, `<div contenteditable style="display:${display}"><${paragraph} style="white-space:${style}">[]abc</${paragraph}></div> (defaultparagraphseparator: ${defaultParagraphSeparator})`);
|
|
|
|
test(() => {
|
|
editingHost.style.whiteSpace = "normal";
|
|
editingHost.style.display = display;
|
|
const utils = new EditorTestUtils(editingHost);
|
|
utils.setupEditingHost(`<${paragraph} style="white-space:${style}">a[]bc</${paragraph}>`);
|
|
editingHost.getBoundingClientRect();
|
|
document.execCommand("insertlinebreak");
|
|
if (isNewLineSignificant) {
|
|
assert_in_array(
|
|
editingHost.innerHTML,
|
|
[
|
|
`<${paragraph} style="white-space:${style}">a\nbc</${paragraph}>`,
|
|
`<${paragraph} style="white-space:${style}">a\nbc<br></${paragraph}>`,
|
|
],
|
|
"A linefeed should be inserted"
|
|
);
|
|
} else {
|
|
assert_in_array(
|
|
editingHost.innerHTML,
|
|
[
|
|
`<${paragraph} style="white-space:${style}">a<br>bc</${paragraph}>`,
|
|
`<${paragraph} style="white-space:${style}">a<br>bc<br></${paragraph}>`,
|
|
],
|
|
"A <br> should be inserted"
|
|
);
|
|
}
|
|
}, `<div contenteditable style="display:${display}"><${paragraph} style="white-space:${style}">a[]bc</${paragraph}></div> (defaultparagraphseparator: ${defaultParagraphSeparator})`);
|
|
|
|
// insertlinebreak in existing paragraph.
|
|
test(() => {
|
|
editingHost.style.whiteSpace = style;
|
|
editingHost.style.display = display;
|
|
const utils = new EditorTestUtils(editingHost);
|
|
utils.setupEditingHost(`<${paragraph}>abc[]</${paragraph}>`);
|
|
editingHost.getBoundingClientRect();
|
|
document.execCommand("insertlinebreak");
|
|
if (isNewLineSignificant) {
|
|
assert_in_array(
|
|
editingHost.innerHTML,
|
|
[
|
|
`<${paragraph}>abc\n\n</${paragraph}>`,
|
|
`<${paragraph}>abc\n<br></${paragraph}>`,
|
|
],
|
|
"A linefeed should be inserted at end of the paragraph"
|
|
);
|
|
} else {
|
|
assert_equals(
|
|
editingHost.innerHTML,
|
|
`<${paragraph}>abc<br><br></${paragraph}>`,
|
|
"A <br> should be inserted at end of the paragraph"
|
|
);
|
|
}
|
|
}, `<div contenteditable style="display:${display}; white-space:${style}"><${paragraph}>abc[]</${paragraph}></div> (defaultparagraphseparator: ${defaultParagraphSeparator})`);
|
|
|
|
test(() => {
|
|
editingHost.style.whiteSpace = style;
|
|
editingHost.style.display = display;
|
|
const utils = new EditorTestUtils(editingHost);
|
|
utils.setupEditingHost(`<${paragraph}>[]abc</${paragraph}>`);
|
|
editingHost.getBoundingClientRect();
|
|
document.execCommand("insertlinebreak");
|
|
if (isNewLineSignificant) {
|
|
assert_in_array(
|
|
editingHost.innerHTML,
|
|
[
|
|
`<${paragraph}>\nabc</${paragraph}>`,
|
|
`<${paragraph}>\nabc<br></${paragraph}>`,
|
|
],
|
|
"A linefeed should be inserted at start"
|
|
);
|
|
} else {
|
|
assert_in_array(
|
|
editingHost.innerHTML,
|
|
[
|
|
`<${paragraph}><br>abc</${paragraph}>`,
|
|
`<${paragraph}><br>abc<br></${paragraph}>`,
|
|
],
|
|
"A <br> should be inserted at start"
|
|
);
|
|
}
|
|
}, `<div contenteditable style="display:${display}; white-space:${style}"><${paragraph}>[]abc</${paragraph}></div> (defaultparagraphseparator: ${defaultParagraphSeparator})`);
|
|
|
|
test(() => {
|
|
editingHost.style.whiteSpace = style;
|
|
editingHost.style.display = display;
|
|
const utils = new EditorTestUtils(editingHost);
|
|
utils.setupEditingHost(`<${paragraph}>a[]bc</${paragraph}>`);
|
|
editingHost.getBoundingClientRect();
|
|
document.execCommand("insertlinebreak");
|
|
if (isNewLineSignificant) {
|
|
assert_in_array(
|
|
editingHost.innerHTML,
|
|
[
|
|
`<${paragraph}>a\nbc</${paragraph}>`,
|
|
`<${paragraph}>a\nbc<br></${paragraph}>`,
|
|
],
|
|
"A linefeed should be inserted"
|
|
);
|
|
} else {
|
|
assert_in_array(
|
|
editingHost.innerHTML,
|
|
[
|
|
`<${paragraph}>a<br>bc</${paragraph}>`,
|
|
`<${paragraph}>a<br>bc<br></${paragraph}>`,
|
|
],
|
|
"A <br> should be inserted"
|
|
);
|
|
}
|
|
}, `<div contenteditable style="display:${display}; white-space:${style}"><${paragraph}>a[]bc</${paragraph}></div> (defaultparagraphseparator: ${defaultParagraphSeparator})`);
|
|
|
|
// Styling the existing paragraph instead of editing host.
|
|
test(() => {
|
|
editingHost.style.whiteSpace = "normal";
|
|
editingHost.style.display = "block";
|
|
const utils = new EditorTestUtils(editingHost);
|
|
const styleAttr = `style="display:${display}; white-space:${style}"`;
|
|
utils.setupEditingHost(`<${paragraph} ${styleAttr}>abc[]</${paragraph}>`);
|
|
editingHost.getBoundingClientRect();
|
|
document.execCommand("insertlinebreak");
|
|
if (isNewLineSignificant) {
|
|
assert_in_array(
|
|
editingHost.innerHTML,
|
|
[
|
|
`<${paragraph} ${styleAttr}>abc\n\n</${paragraph}>`,
|
|
`<${paragraph} ${styleAttr}>abc\n<br></${paragraph}>`,
|
|
],
|
|
"A linefeed should be inserted at end of the paragraph"
|
|
);
|
|
} else {
|
|
assert_equals(
|
|
editingHost.innerHTML,
|
|
`<${paragraph} ${styleAttr}>abc<br><br></${paragraph}>`,
|
|
"A <br> should be inserted at end of the paragraph"
|
|
);
|
|
}
|
|
}, `<div contenteditable><${paragraph} style="display:${display}; white-space:${style}">abc[]</${paragraph}></div> (defaultparagraphseparator: ${defaultParagraphSeparator})`);
|
|
|
|
test(() => {
|
|
editingHost.style.whiteSpace = "normal";
|
|
editingHost.style.display = "block";
|
|
const utils = new EditorTestUtils(editingHost);
|
|
const styleAttr = `style="display:${display}; white-space:${style}"`;
|
|
utils.setupEditingHost(`<${paragraph} ${styleAttr}>[]abc</${paragraph}>`);
|
|
editingHost.getBoundingClientRect();
|
|
document.execCommand("insertlinebreak");
|
|
if (isNewLineSignificant) {
|
|
assert_in_array(
|
|
editingHost.innerHTML,
|
|
[
|
|
`<${paragraph} ${styleAttr}>\nabc</${paragraph}>`,
|
|
`<${paragraph} ${styleAttr}>\nabc<br></${paragraph}>`,
|
|
],
|
|
"A linefeed should be inserted at start"
|
|
);
|
|
} else {
|
|
assert_in_array(
|
|
editingHost.innerHTML,
|
|
[
|
|
`<${paragraph} ${styleAttr}><br>abc</${paragraph}>`,
|
|
`<${paragraph} ${styleAttr}><br>abc<br></${paragraph}>`,
|
|
],
|
|
"A <br> should be inserted at start"
|
|
);
|
|
}
|
|
}, `<div contenteditable><${paragraph} style="display:${display}; white-space:${style}">[]abc</${paragraph}></div> (defaultparagraphseparator: ${defaultParagraphSeparator})`);
|
|
|
|
test(() => {
|
|
editingHost.style.whiteSpace = "normal";
|
|
editingHost.style.display = "block";
|
|
const utils = new EditorTestUtils(editingHost);
|
|
const styleAttr = `style="display:${display}; white-space:${style}"`;
|
|
utils.setupEditingHost(`<${paragraph} ${styleAttr}>a[]bc</${paragraph}>`);
|
|
editingHost.getBoundingClientRect();
|
|
document.execCommand("insertlinebreak");
|
|
if (isNewLineSignificant) {
|
|
assert_in_array(
|
|
editingHost.innerHTML,
|
|
[
|
|
`<${paragraph} ${styleAttr}>a\nbc</${paragraph}>`,
|
|
`<${paragraph} ${styleAttr}>a\nbc<br></${paragraph}>`,
|
|
],
|
|
"A linefeed should be inserted"
|
|
);
|
|
} else {
|
|
assert_in_array(
|
|
editingHost.innerHTML,
|
|
[
|
|
`<${paragraph} ${styleAttr}>a<br>bc</${paragraph}>`,
|
|
`<${paragraph} ${styleAttr}>a<br>bc<br></${paragraph}>`,
|
|
],
|
|
"A <br> should be inserted"
|
|
);
|
|
}
|
|
}, `<div contenteditable><${paragraph} style="display:${display}; white-space:${style}">a[]bc</${paragraph}></div> (defaultparagraphseparator: ${defaultParagraphSeparator})`);
|
|
}
|
|
}
|
|
}
|
|
</script>
|