198 lines
7.2 KiB
HTML
198 lines
7.2 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="timeout" content="long">
|
|
<meta name="variant" content="?white-space=normal">
|
|
<meta name="variant" content="?white-space=pre">
|
|
<meta name="variant" content="?white-space=pre-line">
|
|
<meta name="variant" content="?white-space=pre-wrap">
|
|
<title>Inserting a line break in plaintext-only</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";
|
|
|
|
const searchParams = new URLSearchParams(document.location.search);
|
|
const whiteSpace = searchParams.get("white-space");
|
|
const useBR = whiteSpace == "normal";
|
|
const collapseWhiteSpaces = whiteSpace == "normal" || whiteSpace == "pre-line";
|
|
const isSafari = navigator.platform.includes("Mac") &&
|
|
navigator.userAgent.includes("Safari") &&
|
|
!navigator.userAgent.includes("Chrome");
|
|
|
|
addEventListener("load", () => {
|
|
const editingHost = document.createElement("div");
|
|
editingHost.style.whiteSpace = whiteSpace;
|
|
editingHost.setAttribute("contenteditable", "plaintext-only");
|
|
document.body.appendChild(editingHost);
|
|
editingHost.focus();
|
|
editingHost.getBoundingClientRect();
|
|
const utils = new EditorTestUtils(editingHost);
|
|
|
|
let lastBeforeInputEvent;
|
|
editingHost.addEventListener("beforeinput", event => lastBeforeInputEvent = event);
|
|
|
|
// When a preformatted linefeed is preferred, it should be used instead of <br> for making the
|
|
// content can be retrieved with `.textContent`. However, padding line breaks which is required
|
|
// for empty block or empty last line should be <br> because it won't appear in `.textContent`.
|
|
// So, it helps to make the `.textContent` result better.
|
|
for (const data of [
|
|
{
|
|
initialInnerHTML: "A[]B",
|
|
expected: useBR ? "A<br>B" : "A\nB",
|
|
},
|
|
{
|
|
initialInnerHTML: "<p>{}<br></p>",
|
|
expected: useBR ? "<p><br><br></p>" : "<p>\n<br></p>",
|
|
},
|
|
{
|
|
initialInnerHTML: `<p style="white-space:normal">A[]B</p>`,
|
|
expected: `<p style="white-space:normal">A<br>B</p>`,
|
|
},
|
|
{
|
|
initialInnerHTML: `<p style="white-space:pre">A[]B</p>`,
|
|
expected: [`<p style="white-space:pre">A<br>B</p>`, `<p style="white-space:pre">A\nB</p>`],
|
|
},
|
|
{
|
|
initialInnerHTML: `<p style="white-space:pre-line">A[]B</p>`,
|
|
expected: [`<p style="white-space:pre-line">A<br>B</p>`, `<p style="white-space:pre-line">A\nB</p>`],
|
|
},
|
|
{
|
|
initialInnerHTML: `<p style="white-space:pre-wrap">A[]B</p>`,
|
|
expected: [`<p style="white-space:pre-wrap">A<br>B</p>`, `<p style="white-space:pre-wrap">A\nB</p>`],
|
|
},
|
|
{
|
|
initialInnerHTML: "<ul><li>[]AB</li></ul>",
|
|
expected: useBR ? "<ul><li><br>AB</li></ul>" : "<ul><li>\nAB</li></ul>",
|
|
},
|
|
{
|
|
initialInnerHTML: "<ul><li>A[]B</li></ul>",
|
|
expected: useBR ? "<ul><li>A<br>B</li></ul>" : "<ul><li>A\nB</li></ul>",
|
|
},
|
|
{
|
|
initialInnerHTML: "<ul><li>AB[]</li></ul>",
|
|
expected: useBR
|
|
? "<ul><li>AB<br><br></li></ul>"
|
|
: "<ul><li>AB\n<br></li></ul>",
|
|
},
|
|
{
|
|
initialInnerHTML: "<dl><dt>[]AB</dt></dl>",
|
|
expected: useBR ? "<dl><dt><br>AB</dt></dl>" : "<dl><dt>\nAB</dt></dl>",
|
|
},
|
|
{
|
|
initialInnerHTML: "<dl><dt>A[]B</dt></dl>",
|
|
expected: useBR ? "<dl><dt>A<br>B</dt></dl>" : "<dl><dt>A\nB</dt></dl>",
|
|
},
|
|
{
|
|
initialInnerHTML: "<dl><dt>AB[]</dt></dl>",
|
|
expected: useBR
|
|
? "<dl><dt>AB<br><br></dt></dl>"
|
|
: "<dl><dt>AB\n<br></dt></dl>",
|
|
},
|
|
{
|
|
initialInnerHTML: "<dl><dd>[]AB</dd></dl>",
|
|
expected: useBR ? "<dl><dd><br>AB</dd></dl>" : "<dl><dd>\nAB</dd></dl>",
|
|
},
|
|
{
|
|
initialInnerHTML: "<dl><dd>A[]B</dd></dl>",
|
|
expected: useBR ? "<dl><dd>A<br>B</dd></dl>" : "<dl><dd>A\nB</dd></dl>",
|
|
},
|
|
{
|
|
initialInnerHTML: "<dl><dd>AB[]</dd></dl>",
|
|
expected: useBR
|
|
? "<dl><dd>AB<br><br></dd></dl>"
|
|
: "<dl><dd>AB\n<br></dd></dl>",
|
|
},
|
|
{
|
|
initialInnerHTML: "<table><tbody><tr><td>[]AB</td></tr></tbody></table>",
|
|
expected: useBR
|
|
? "<table><tbody><tr><td><br>AB</td></tr></tbody></table>"
|
|
: "<table><tbody><tr><td>\nAB</td></tr></tbody></table>",
|
|
},
|
|
{
|
|
initialInnerHTML: "<table><tbody><tr><td>A[]B</td></tr></tbody></table>",
|
|
expected: useBR
|
|
? "<table><tbody><tr><td>A<br>B</td></tr></tbody></table>"
|
|
: "<table><tbody><tr><td>A\nB</td></tr></tbody></table>",
|
|
},
|
|
{
|
|
initialInnerHTML: "<table><tbody><tr><td>AB[]</td></tr></tbody></table>",
|
|
expected: useBR
|
|
? "<table><tbody><tr><td>AB<br><br></td></tr></tbody></table>"
|
|
: "<table><tbody><tr><td>AB\n<br></td></tr></tbody></table>",
|
|
},
|
|
{
|
|
initialInnerHTML: "<h1>[]AB</h1>",
|
|
expected: useBR ? "<h1><br>AB</h1>" : "<h1>\nAB</h1>",
|
|
},
|
|
{
|
|
initialInnerHTML: "<h1>A[]B</h1>",
|
|
expected: useBR ? "<h1>A<br>B</h1>" : "<h1>A\nB</h1>",
|
|
},
|
|
{
|
|
initialInnerHTML: "<h1>AB[]</h1>",
|
|
expected: useBR ? "<h1>AB<br><br></h1>" : "<h1>AB\n<br></h1>",
|
|
},
|
|
]) {
|
|
test(() => {
|
|
utils.setupEditingHost(data.initialInnerHTML);
|
|
document.execCommand("insertLineBreak");
|
|
if (Array.isArray(data.expected)) {
|
|
assert_in_array(editingHost.innerHTML, data.expected);
|
|
} else {
|
|
assert_equals(editingHost.innerHTML, data.expected);
|
|
}
|
|
}, `execCommand("insertLineBreak") when ${data.initialInnerHTML}`);
|
|
promise_test(async t => {
|
|
utils.setupEditingHost(data.initialInnerHTML);
|
|
lastBeforeInputEvent = undefined;
|
|
await utils.sendEnterKey();
|
|
test(() => {
|
|
assert_equals(
|
|
lastBeforeInputEvent?.inputType,
|
|
"insertLineBreak",
|
|
`inputType should be "insertLineBreak"`
|
|
);
|
|
}, `${t.name}: beforeinput`);
|
|
test(() => {
|
|
if (Array.isArray(data.expected)) {
|
|
assert_in_array(editingHost.innerHTML, data.expected);
|
|
} else {
|
|
assert_equals(editingHost.innerHTML, data.expected);
|
|
}
|
|
}, `${t.name}: editingHost.innerHTML`);
|
|
}, `Pressing Enter when ${
|
|
data.initialInnerHTML
|
|
} should cause "insertLineBreak" and shouldn't insert new paragraph`);
|
|
promise_test(async t => {
|
|
utils.setupEditingHost(data.initialInnerHTML);
|
|
lastBeforeInputEvent = undefined;
|
|
await utils.sendEnterKey(isSafari ? utils.kControl : utils.kShift);
|
|
test(() => {
|
|
assert_equals(
|
|
lastBeforeInputEvent?.inputType,
|
|
"insertLineBreak",
|
|
`inputType should be "insertLineBreak"`
|
|
);
|
|
}, `${t.name}: beforeinput`);
|
|
test(() => {
|
|
if (Array.isArray(data.expected)) {
|
|
assert_in_array(editingHost.innerHTML, data.expected);
|
|
} else {
|
|
assert_equals(editingHost.innerHTML, data.expected);
|
|
}
|
|
}, `${t.name}: editingHost.innerHTML`);
|
|
}, `Pressing ${isSafari ? "Ctrl" : "Shift"}+Enter when ${
|
|
data.initialInnerHTML
|
|
} should cause "insertLineBreak" and shouldn't insert new paragraph`);
|
|
}
|
|
}, {once: true});
|
|
</script>
|
|
</head>
|
|
<body></body>
|
|
</html>
|