File: undo-redo-after-mutation.html

package info (click to toggle)
firefox 149.0-1
  • links: PTS, VCS
  • area: main
  • in suites: sid
  • size: 4,767,760 kB
  • sloc: cpp: 7,416,064; javascript: 6,752,859; ansic: 3,774,850; python: 1,250,473; xml: 641,578; asm: 439,191; java: 186,617; sh: 56,634; makefile: 18,856; objc: 13,092; perl: 12,763; pascal: 5,960; yacc: 4,583; cs: 3,846; lex: 1,720; ruby: 1,002; php: 436; lisp: 258; awk: 105; sql: 66; sed: 53; csh: 10; exp: 6
file content (119 lines) | stat: -rw-r--r-- 6,796 bytes parent folder | download | duplicates (28)
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>