Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 3 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /editing/plaintext-only/paste.https.html?white-space=normal - WPT Dashboard Interop Dashboard
- /editing/plaintext-only/paste.https.html?white-space=pre - WPT Dashboard Interop Dashboard
- /editing/plaintext-only/paste.https.html?white-space=pre-line - WPT Dashboard Interop Dashboard
- /editing/plaintext-only/paste.https.html?white-space=pre-wrap - WPT Dashboard Interop Dashboard
<!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>Pasting rich text into contenteditable=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";
addEventListener("load", () => {
const placeholderForCopy = document.createElement("div");
document.body.appendChild(placeholderForCopy);
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 lastBeforeInput;
editingHost.addEventListener("beforeinput", event => lastBeforeInput = event);
/**
* Pasting HTML into contenteditable=plaintext-only should work as pasting
* text which is serialized by the browser or OS. Then, `beforeinput` event
* should have only dataTransfer and it should have "text/html" format to
* make it possible that web apps can serialize the data by themselves to
* avoid the browser/OS dependency. Finally, if white-space style is normal,
* line breaks should appear as <br>. Otherwise, either <br> or \n is fine
* because both breaks the lines.
*/
promise_test(async t => {
placeholderForCopy.innerHTML = "<b>abc</b>";
document.activeElement?.blur();
await test_driver.click(placeholderForCopy);
getSelection().selectAllChildren(placeholderForCopy);
await utils.sendCopyShortcutKey();
utils.setupEditingHost("A[]B");
lastBeforeInput = undefined;
await utils.sendPasteShortcutKey();
test(() => {
assert_equals(lastBeforeInput?.inputType, "insertFromPaste", `inputType should be "insertFromPaste"`);
assert_equals(lastBeforeInput?.data, null, `data should be null`);
assert_true(
String(lastBeforeInput?.dataTransfer?.getData("text/html")).includes(placeholderForCopy.innerHTML),
`dataTransfer should have the copied HTML source`
);
}, `${t.name}: beforeinput`);
test(() => {
assert_equals(editingHost.innerHTML, "AabcB", "<b> should not be pasted");
}, `${t.name}: pasted result`);
}, "Pasting text in <b>");
promise_test(async t => {
placeholderForCopy.innerHTML = "<span>abc</span>";
document.activeElement?.blur();
await test_driver.click(placeholderForCopy);
getSelection().selectAllChildren(placeholderForCopy);
await utils.sendCopyShortcutKey();
utils.setupEditingHost("A[]B");
lastBeforeInput = undefined;
await utils.sendPasteShortcutKey();
test(() => {
assert_equals(lastBeforeInput?.inputType, "insertFromPaste", `inputType should be "insertFromPaste"`);
assert_equals(lastBeforeInput?.data, null, `data should be null`);
assert_true(
String(lastBeforeInput?.dataTransfer?.getData("text/html")).includes(placeholderForCopy.innerHTML),
`dataTransfer should have the copied HTML source`
);
}, `${t.name}: beforeinput`);
test(() => {
assert_equals(editingHost.innerHTML, "AabcB", "<span> should not be pasted");
}, `${t.name}: pasted result`);
}, "Pasting text in <span>");
promise_test(async t => {
placeholderForCopy.innerHTML = "abc";
document.activeElement?.blur();
await test_driver.click(placeholderForCopy);
getSelection().selectAllChildren(placeholderForCopy);
await utils.sendCopyShortcutKey();
utils.setupEditingHost("<b>A[]B</b>");
lastBeforeInput = undefined;
await utils.sendPasteShortcutKey();
test(() => {
assert_equals(lastBeforeInput?.inputType, "insertFromPaste", `inputType should be "insertFromPaste"`);
assert_equals(lastBeforeInput?.data, null, `data should be null`);
assert_true(
String(lastBeforeInput?.dataTransfer?.getData("text/html")).includes(placeholderForCopy.innerHTML),
`dataTransfer should have the copied HTML source`
);
}, `${t.name}: beforeinput`);
test(() => {
assert_equals(editingHost.innerHTML, "<b>AabcB</b>", "text should be inserted into the editable <b>");
}, `${t.name}: pasted result`);
}, "Pasting text into editable <b>");
promise_test(async t => {
placeholderForCopy.innerHTML = "<i>abc</i>";
document.activeElement?.blur();
await test_driver.click(placeholderForCopy);
getSelection().selectAllChildren(placeholderForCopy);
await utils.sendCopyShortcutKey();
utils.setupEditingHost("<b>A[]B</b>");
lastBeforeInput = undefined;
await utils.sendPasteShortcutKey();
test(() => {
assert_equals(lastBeforeInput?.inputType, "insertFromPaste", `inputType should be "insertFromPaste"`);
assert_equals(lastBeforeInput?.data, null, `data should be null`);
assert_true(
String(lastBeforeInput?.dataTransfer?.getData("text/html")).includes(placeholderForCopy.innerHTML),
`dataTransfer should have the copied HTML source`
);
}, `${t.name}: beforeinput`);
test(() => {
assert_equals(editingHost.innerHTML, "<b>AabcB</b>", "text should be inserted into the editable <b> without copied <i>");
}, `${t.name}: pasted result`);
}, "Pasting text in <i> into editable <b>");
promise_test(async t => {
placeholderForCopy.innerHTML = "<div>abc</div><div>def</div>";
document.activeElement?.blur();
await test_driver.click(placeholderForCopy);
getSelection().selectAllChildren(placeholderForCopy);
await utils.sendCopyShortcutKey();
utils.setupEditingHost("A[]B");
lastBeforeInput = undefined;
await utils.sendPasteShortcutKey();
test(() => {
assert_equals(lastBeforeInput?.inputType, "insertFromPaste", `inputType should be "insertFromPaste"`);
assert_equals(lastBeforeInput?.data, null, `data should be null`);
assert_true(
String(lastBeforeInput?.dataTransfer?.getData("text/html")).includes(placeholderForCopy.innerHTML),
`dataTransfer should have the copied HTML source`
);
}, `${t.name}: beforeinput`);
test(() => {
if (useBR) {
assert_in_array(
editingHost.innerHTML,
[
"Aabc<br>defB",
"A<br>abc<br>def<br>B",
],
"Each paragraph should be pasted as a line"
);
} else {
assert_in_array(
editingHost.innerHTML,
[
"Aabc\ndefB",
"A\nabc\ndef\nB",
],
"Each paragraph should be pasted as a line"
);
}
}, `${t.name}: pasted result`);
}, "Pasting 2 paragraphs");
promise_test(async t => {
placeholderForCopy.innerHTML = "<div>abc</div><div>def</div>";
document.activeElement?.blur();
await test_driver.click(placeholderForCopy);
getSelection().selectAllChildren(placeholderForCopy);
await utils.sendCopyShortcutKey();
utils.setupEditingHost("<b>A[]B</b>");
lastBeforeInput = undefined;
await utils.sendPasteShortcutKey();
test(() => {
assert_equals(lastBeforeInput?.inputType, "insertFromPaste", `inputType should be "insertFromPaste"`);
assert_equals(lastBeforeInput?.data, null, `data should be null`);
assert_true(
String(lastBeforeInput?.dataTransfer?.getData("text/html")).includes(placeholderForCopy.innerHTML),
`dataTransfer should have the copied HTML source`
);
}, `${t.name}: beforeinput`);
test(() => {
if (useBR) {
assert_in_array(
editingHost.innerHTML,
[
"<b>Aabc<br>defB</b>",
"<b>A<br>abc<br>def<br>B</b>",
],
"Each paragraph should be pasted as a line"
);
} else {
assert_in_array(
editingHost.innerHTML,
[
"<b>Aabc\ndefB</b>",
"<b>A\nabc\ndef\nB</b>",
],
"Each paragraph should be pasted as a line"
);
}
}, `${t.name}: pasted result`);
}, "Pasting 2 paragraphs into <b>");
promise_test(async t => {
placeholderForCopy.innerHTML = "<div><b>abc</b></div><div><b>def</b></div>";
document.activeElement?.blur();
await test_driver.click(placeholderForCopy);
getSelection().selectAllChildren(placeholderForCopy);
await utils.sendCopyShortcutKey();
utils.setupEditingHost("A[]B");
lastBeforeInput = undefined;
await utils.sendPasteShortcutKey();
test(() => {
assert_equals(lastBeforeInput?.inputType, "insertFromPaste", `inputType should be "insertFromPaste"`);
assert_equals(lastBeforeInput?.data, null, `data should be null`);
assert_true(
String(lastBeforeInput?.dataTransfer?.getData("text/html")).includes(placeholderForCopy.innerHTML),
`dataTransfer should have the copied HTML source`
);
}, `${t.name}: beforeinput`);
test(() => {
if (useBR) {
assert_in_array(
editingHost.innerHTML,
[
"Aabc<br>defB",
"A<br>abc<br>def<br>B",
],
"Each paragraph should be pasted as a line"
);
} else {
assert_in_array(
editingHost.innerHTML,
[
"Aabc\ndefB",
"A\nabc\ndef\nB",
],
"Each paragraph should be pasted as a line"
);
}
}, `${t.name}: pasted result`);
}, "Pasting 2 paragraphs whose text is bold");
}, {once: true});
</script>
</head>
<body></body>
</html>