undo-redo-after-mutation.html (6796B)
1 <!DOCTYPE html> 2 <script src="/resources/testharness.js"></script> 3 <script src="/resources/testharnessreport.js"></script> 4 <div contenteditable></div> 5 <script> 6 "use strict"; 7 let editor = document.querySelector("div[contenteditable]"); 8 let selection = document.getSelection(); 9 10 test(function () { 11 editor.innerHTML = "<i>will be removed</i> abc"; 12 selection.collapse(editor.lastChild, editor.lastChild.length); 13 document.execCommand("insertLineBreak", false, ""); 14 assert_equals(editor.innerHTML, "<i>will be removed</i> abc<br><br>", 15 "<br> element should be inserted by execCommand(\"insertLineBreak\")"); 16 document.execCommand("undo", false, ""); 17 assert_equals(editor.innerHTML, "<i>will be removed</i> abc", 18 "<br> element should be removed by execCommand(\"undo\")"); 19 editor.firstChild.remove(); 20 document.execCommand("redo", false, ""); 21 assert_equals(editor.innerHTML, " abc<br><br>", 22 "<br> element should be inserted by execCommand(\"redo\")"); 23 }, "Redo for execCommand(\"insertLineBreak\") after removing prior sibling with DOM API after undoing"); 24 25 test(function () { 26 editor.innerHTML = "abc"; 27 selection.collapse(editor.firstChild, editor.firstChild.length); 28 document.execCommand("insertLineBreak", false, ""); 29 assert_equals(editor.innerHTML, "abc<br><br>", 30 "<br> element should be inserted by execCommand(\"insertLineBreak\")"); 31 document.execCommand("undo", false, ""); 32 assert_equals(editor.innerHTML, "abc", 33 "<br> element should be removed by execCommand(\"undo\")"); 34 let i = document.createElement("i"); 35 i.textContent = " appended text"; 36 editor.appendChild(i); 37 document.execCommand("redo", false, ""); 38 assert_equals(editor.innerHTML, "abc<i> appended text</i><br><br>", 39 "<br> element should be appended by execCommand(\"redo\") after the appended text"); 40 }, "Redo for execCommand(\"insertLineBreak\") after appending new child with DOM API after undoing"); 41 42 test(function () { 43 editor.innerHTML = "abc"; 44 selection.collapse(editor.firstChild, editor.firstChild.length); 45 document.execCommand("insertLineBreak", false, ""); 46 assert_equals(editor.innerHTML, "abc<br><br>", 47 "<br> element should be inserted by execCommand(\"insertLineBreak\")"); 48 document.execCommand("undo", false, ""); 49 assert_equals(editor.innerHTML, "abc", 50 "<br> element should be removed by execCommand(\"undo\")"); 51 let i = document.createElement("i"); 52 i.textContent = "inserted text "; 53 editor.insertBefore(i, editor.firstChild); 54 document.execCommand("redo", false, ""); 55 assert_equals(editor.innerHTML, "<i>inserted text </i>abc<br><br>", 56 "<br> element should be appended by execCommand(\"redo\") after the appended text"); 57 }, "Redo for execCommand(\"insertLineBreak\") after inserting new child with DOM API after undoing"); 58 59 test(function () { 60 editor.innerHTML = "<b>will be removed</b><i>abc</i>"; 61 selection.collapse(editor.querySelector("b").firstChild, editor.querySelector("b").firstChild.length); 62 document.execCommand("insertLineBreak", false, ""); 63 assert_equals(editor.innerHTML, "<b>will be removed<br></b><i>abc</i>", 64 "<br> element should be inserted into the <b> element by execCommand(\"insertLineBreak\")"); 65 document.execCommand("undo", false, ""); 66 assert_equals(editor.innerHTML, "<b>will be removed</b><i>abc</i>", 67 "<br> element should be removed by execCommand(\"undo\")"); 68 editor.querySelector("b").remove(); 69 document.execCommand("redo", false, ""); 70 assert_equals(editor.innerHTML, "<i>abc</i>", 71 "<br> element shouldn't be restored by execCommand(\"redo\") after removing the <b> element"); 72 }, "Redo for execCommand(\"insertLineBreak\") after removing its container with DOM API after undoing"); 73 74 test(function () { 75 editor.innerHTML = "<b>abc</b><i>will be removed</i>"; 76 selection.collapse(editor.querySelector("b").firstChild, editor.querySelector("b").firstChild.length); 77 document.execCommand("insertLineBreak", false, ""); 78 assert_equals(editor.innerHTML, "<b>abc<br></b><i>will be removed</i>", 79 "<br> element should be inserted into the <b> element by execCommand(\"insertLineBreak\")"); 80 document.execCommand("undo", false, ""); 81 assert_equals(editor.innerHTML, "<b>abc</b><i>will be removed</i>", 82 "<br> element should be removed by execCommand(\"undo\")"); 83 editor.querySelector("i").remove(); 84 document.execCommand("redo", false, ""); 85 assert_equals(editor.innerHTML, "<b>abc<br></b>", 86 "<br> element should be restored by execCommand(\"redo\") after removing the following <i> element"); 87 }, "Redo for execCommand(\"insertLineBreak\") after removing <i> element following the container with DOM API after undoing"); 88 89 // Not sure whether redoing in both of the following 2 cases should work as so. 90 test(function () { 91 editor.innerHTML = "<b>will be removed</b><i>abc</i>"; 92 selection.collapse(editor, 1); 93 document.execCommand("insertLineBreak", false, ""); 94 assert_equals(editor.innerHTML, "<b>will be removed</b><br><i>abc</i>", 95 "<br> element should be inserted between the <b> and <i> elements by execCommand(\"insertLineBreak\")"); 96 document.execCommand("undo", false, ""); 97 assert_equals(editor.innerHTML, "<b>will be removed</b><i>abc</i>", 98 "<br> element should be removed by execCommand(\"undo\")"); 99 editor.querySelector("b").remove(); 100 document.execCommand("redo", false, ""); 101 assert_equals(editor.innerHTML, "<br><i>abc</i>", 102 "<br> element should be restored by execCommand(\"redo\") after removing the preceding <b> element"); 103 }, "Redo for execCommand(\"insertLineBreak\") between <b> and <i> after removing preceding <b> element with DOM API after undoing"); 104 105 test(function () { 106 editor.innerHTML = "<b>abc</b><i>will be removed</i>"; 107 selection.collapse(editor, 1); 108 document.execCommand("insertLineBreak", false, ""); 109 assert_equals(editor.innerHTML, "<b>abc</b><br><i>will be removed</i>", 110 "<br> element should be inserted between the <b> and <i> elements by execCommand(\"insertLineBreak\")"); 111 document.execCommand("undo", false, ""); 112 assert_equals(editor.innerHTML, "<b>abc</b><i>will be removed</i>", 113 "<br> element should be removed by execCommand(\"undo\")"); 114 editor.querySelector("i").remove(); 115 document.execCommand("redo", false, ""); 116 assert_equals(editor.innerHTML, "<b>abc</b><br>", 117 "<br> element should be restored by execCommand(\"redo\") after removing the following <i> element"); 118 }, "Redo for execCommand(\"insertLineBreak\") between <b> and <i> after after removing following <i> element with DOM API after undoing"); 119 </script>