paste-when-nested-with-contenteditable-true.https.html (4554B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="timeout" content="long"> 6 <title>Delete editor in a shadow</title> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/resources/testdriver.js"></script> 10 <script src="/resources/testdriver-vendor.js"></script> 11 <script src="/resources/testdriver-actions.js"></script> 12 <script src="../include/editor-test-utils.js"></script> 13 <script> 14 "use strict"; 15 16 addEventListener("load", () => { 17 promise_test(async () => { 18 const div = document.createElement("div"); 19 div.contentEditable = "true"; 20 div.innerHTML = "<b>abc</b>"; 21 document.body.appendChild(div); 22 await test_driver.click(div); 23 getSelection().selectAllChildren(div); 24 await (new EditorTestUtils(div)).sendCopyShortcutKey(); 25 assert_true(true); 26 }, `Initializing the clipboard with <b>abc</b>...`); 27 28 promise_test(async () => { 29 const editingHost = document.createElement("div"); 30 document.body.appendChild(editingHost); 31 editingHost.focus(); 32 const utils = new EditorTestUtils(editingHost); 33 let lastBeforeInputEvent; 34 editingHost.addEventListener("beforeinput", event => lastBeforeInputEvent = event); 35 for (const data of [ 36 { 37 desc: `pasting in contenteditable="plaintext-only" in contenteditable="true"`, 38 init: `<div contenteditable="plaintext-only">[ABC]</div>`, 39 expected: `<div contenteditable="plaintext-only"><b>abc</b></div>` 40 }, 41 { 42 desc: `pasting in contenteditable="plaintext-only" in contenteditable="true" and contenteditable="false"`, 43 init: `<div contenteditable="false"><div contenteditable="plaintext-only">[ABC]</div></div>`, 44 expected: `<div contenteditable="false"><div contenteditable="plaintext-only">abc</div></div>`, 45 }, 46 ]) { 47 promise_test(async t => { 48 editingHost.setAttribute("contenteditable", "true"); 49 utils.setupEditingHost(data.init); 50 lastBeforeInputEvent = undefined; 51 await utils.sendPasteShortcutKey(); 52 test(() => { 53 assert_equals( 54 lastBeforeInputEvent?.inputType, 55 "insertFromPaste", 56 "beforeinput.inputType should be insertFromPaste" 57 ); 58 assert_equals(lastBeforeInputEvent?.data, null, "beforeinput.data should be null"); 59 assert_true( 60 String(lastBeforeInputEvent?.dataTransfer?.getData("text/html")).includes("<b>abc</b>"), 61 "beforeinput.dataTransfer should have the styled text as text/html" 62 ); 63 }, `${t.name}: beforeinput`); 64 test(() => { 65 assert_equals(editingHost.outerHTML, `<div contenteditable="true">${data.expected}</div>`); 66 }, `${t.name}: innerHTML`); 67 }, data.desc); 68 } 69 for (const data of [ 70 { 71 desc: `pasting in contenteditable="true" in contenteditable="plaintext-only"`, 72 init: `<div contenteditable="true">[ABC]</div>`, 73 expected: `<div contenteditable="true">abc</div>` 74 }, 75 { 76 desc: `pasting in contenteditable="true" in contenteditable="plaintext-only" and contenteditable="false"`, 77 init: `<div contenteditable="false"><div contenteditable="true">[ABC]</div></div>`, 78 expected: `<div contenteditable="false"><div contenteditable="true"><b>abc</b></div></div>`, 79 }, 80 ]) { 81 promise_test(async t => { 82 editingHost.setAttribute("contenteditable", "plaintext-only"); 83 utils.setupEditingHost(data.init); 84 lastBeforeInputEvent = undefined; 85 await utils.sendPasteShortcutKey(); 86 test(() => { 87 assert_equals( 88 lastBeforeInputEvent?.inputType, 89 "insertFromPaste", 90 "beforeinput.inputType should be insertFromPaste" 91 ); 92 assert_equals(lastBeforeInputEvent?.data, null, "beforeinput.data should be null"); 93 assert_true( 94 String(lastBeforeInputEvent?.dataTransfer?.getData("text/html")).includes("<b>abc</b>"), 95 "beforeinput.dataTransfer should have the styled text as text/html" 96 ); 97 }, `${t.name}: beforeinput`); 98 test(() => { 99 assert_equals(editingHost.outerHTML, `<div contenteditable="plaintext-only">${data.expected}</div>`); 100 }, `${t.name}: innerHTML`); 101 }, data.desc); 102 } 103 }, "The result should depend on the outermost editing host in the innermost non-editable element whether pasting with or without format"); 104 }, {once: true}); 105 </script> 106 </head> 107 <body></body> 108 </html>