Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /editing/plaintext-only/paste-when-nested-with-contenteditable-true.https.html - WPT Dashboard Interop Dashboard
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="timeout" content="long">
<title>Delete editor in a shadow</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";
addEventListener("load", () => {
promise_test(async () => {
const div = document.createElement("div");
div.contentEditable = "true";
div.innerHTML = "<b>abc</b>";
document.body.appendChild(div);
await test_driver.click(div);
getSelection().selectAllChildren(div);
await (new EditorTestUtils(div)).sendCopyShortcutKey();
assert_true(true);
}, `Initializing the clipboard with <b>abc</b>...`);
promise_test(async () => {
const editingHost = document.createElement("div");
document.body.appendChild(editingHost);
editingHost.focus();
const utils = new EditorTestUtils(editingHost);
let lastBeforeInputEvent;
editingHost.addEventListener("beforeinput", event => lastBeforeInputEvent = event);
for (const data of [
{
desc: `pasting in contenteditable="plaintext-only" in contenteditable="true"`,
init: `<div contenteditable="plaintext-only">[ABC]</div>`,
expected: `<div contenteditable="plaintext-only"><b>abc</b></div>`
},
{
desc: `pasting in contenteditable="plaintext-only" in contenteditable="true" and contenteditable="false"`,
init: `<div contenteditable="false"><div contenteditable="plaintext-only">[ABC]</div></div>`,
expected: `<div contenteditable="false"><div contenteditable="plaintext-only">abc</div></div>`,
},
]) {
promise_test(async t => {
editingHost.setAttribute("contenteditable", "true");
utils.setupEditingHost(data.init);
lastBeforeInputEvent = undefined;
await utils.sendPasteShortcutKey();
test(() => {
assert_equals(
lastBeforeInputEvent?.inputType,
"insertFromPaste",
"beforeinput.inputType should be insertFromPaste"
);
assert_equals(lastBeforeInputEvent?.data, null, "beforeinput.data should be null");
assert_true(
String(lastBeforeInputEvent?.dataTransfer?.getData("text/html")).includes("<b>abc</b>"),
"beforeinput.dataTransfer should have the styled text as text/html"
);
}, `${t.name}: beforeinput`);
test(() => {
assert_equals(editingHost.outerHTML, `<div contenteditable="true">${data.expected}</div>`);
}, `${t.name}: innerHTML`);
}, data.desc);
}
for (const data of [
{
desc: `pasting in contenteditable="true" in contenteditable="plaintext-only"`,
init: `<div contenteditable="true">[ABC]</div>`,
expected: `<div contenteditable="true">abc</div>`
},
{
desc: `pasting in contenteditable="true" in contenteditable="plaintext-only" and contenteditable="false"`,
init: `<div contenteditable="false"><div contenteditable="true">[ABC]</div></div>`,
expected: `<div contenteditable="false"><div contenteditable="true"><b>abc</b></div></div>`,
},
]) {
promise_test(async t => {
editingHost.setAttribute("contenteditable", "plaintext-only");
utils.setupEditingHost(data.init);
lastBeforeInputEvent = undefined;
await utils.sendPasteShortcutKey();
test(() => {
assert_equals(
lastBeforeInputEvent?.inputType,
"insertFromPaste",
"beforeinput.inputType should be insertFromPaste"
);
assert_equals(lastBeforeInputEvent?.data, null, "beforeinput.data should be null");
assert_true(
String(lastBeforeInputEvent?.dataTransfer?.getData("text/html")).includes("<b>abc</b>"),
"beforeinput.dataTransfer should have the styled text as text/html"
);
}, `${t.name}: beforeinput`);
test(() => {
assert_equals(editingHost.outerHTML, `<div contenteditable="plaintext-only">${data.expected}</div>`);
}, `${t.name}: innerHTML`);
}, data.desc);
}
}, "The result should depend on the outermost editing host in the innermost non-editable element whether pasting with or without format");
}, {once: true});
</script>
</head>
<body></body>
</html>