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