| <!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> |
