copy-paste-before-non-editable.html (2521B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title> 5 Copy pasting in editable area should not lose data in non-editable area 6 </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 </head> 14 <body> 15 <div style="border: 2px solid gray" contenteditable="true"> 16 <p>Select and paste something (like plain text) into the middle of this text node. 17 <span contenteditable="false" style="border: 1px solid gray">This is a contentEditable=false</span> 18 after the paste, the contentEditable=false and everything after it, should not get lost. 19 </p> 20 </div> 21 <script> 22 function trimExtraSpaces(input) { 23 // Split with spaces and filter out empty elements(extra spaces) 24 return input.split(' ').filter(Boolean).join(' '); 25 } 26 document.addEventListener("DOMContentLoaded", () => { 27 promise_test(async () => { 28 const paragraph = document.querySelector("p"); 29 const editableText = paragraph.firstChild; 30 const numChildNodes = paragraph.childNodes.length; 31 // Select the first word "Select" from the paragraph 32 let selection = window.getSelection(); 33 selection.removeAllRanges(); 34 selection.setBaseAndExtent(editableText, 0, editableText, 6); 35 36 // Send copy command 37 const utils = new EditorTestUtils(editableText); 38 await utils.sendCopyShortcutKey(); 39 40 // Paste before the word "something" 41 selection.collapse(editableText, 17); 42 await utils.sendPasteShortcutKey(); 43 44 // None of the child nodes should be lost after paste 45 assert_equals(paragraph.childNodes.length, numChildNodes); 46 assert_equals(trimExtraSpaces(paragraph.innerHTML.split('\n').join('')), trimExtraSpaces("Select and paste Selectsomething (like plain text) into the middle of this text node.\ 47 <span contenteditable=\"false\" style=\"border: 1px solid gray;\">This is a contentEditable=false</span>\ 48 after the paste, the contentEditable=false and everything after it, should not get lost.") 49 ); 50 }, "Copy pasting in editable area should not lose data in non-editable area"); 51 }) 52 </script> 53 </body> 54 </html>