3 <title>Test for backspace key and delete key shouldn't remove another editing host's text
</title>
4 <script src=
"/tests/SimpleTest/SimpleTest.js"></script>
5 <script src=
"/tests/SimpleTest/EventUtils.js"></script>
6 <link rel=
"stylesheet" type=
"text/css" href=
"/tests/SimpleTest/test.css"/>
9 <div id=
"display"></div>
10 <div id=
"content" style=
"display: none">
16 <script class=
"testbody" type=
"application/javascript">
18 SimpleTest.waitForExplicitFinish();
19 SimpleTest.waitForFocus(runTests);
22 var container = document.getElementById(
"display");
25 document.execCommand(
"Undo", false, null);
28 var selection = window.getSelection();
29 function moveCaretToStartOf(aEditor) {
30 selection.selectAllChildren(aEditor);
31 selection.collapseToStart();
34 function moveCaretToEndOf(aEditor) {
35 selection.selectAllChildren(aEditor);
36 selection.collapseToEnd();
42 "<p id=\"editor1\
" contenteditable=\"true\
">editor1</p>" +
43 "<p id=\"editor2\
" contenteditable=\"true\
">editor2</p>" +
44 "<div id=\"editor3\
" contenteditable=\"true\
"><div>editor3</div></div>" +
45 "<p id=\"editor4\
" contenteditable=\"true\
">editor4</p>" +
47 "<p id=\"editor5\
" contenteditable=\"true\
">editor5</p>";
49 const kTestCase1_editor3_deleteAtStart =
50 "<p id=\"editor1\
" contenteditable=\"true\
">editor1</p>" +
51 "<p id=\"editor2\
" contenteditable=\"true\
">editor2</p>" +
52 "<div id=\"editor3\
" contenteditable=\"true\
"><div>ditor3</div></div>" +
53 "<p id=\"editor4\
" contenteditable=\"true\
">editor4</p>" +
55 "<p id=\"editor5\
" contenteditable=\"true\
">editor5</p>";
57 const kTestCase1_editor3_backspaceAtEnd =
58 "<p id=\"editor1\
" contenteditable=\"true\
">editor1</p>" +
59 "<p id=\"editor2\
" contenteditable=\"true\
">editor2</p>" +
60 "<div id=\"editor3\
" contenteditable=\"true\
"><div>editor</div></div>" +
61 "<p id=\"editor4\
" contenteditable=\"true\
">editor4</p>" +
63 "<p id=\"editor5\
" contenteditable=\"true\
">editor5</p>";
65 container.innerHTML = kTestCase1;
67 var editor1 = document.getElementById(
"editor1");
68 var editor2 = document.getElementById(
"editor2");
69 var editor3 = document.getElementById(
"editor3");
70 var editor4 = document.getElementById(
"editor4");
71 var editor5 = document.getElementById(
"editor5");
74 * pressing backspace key at start should not change the content.
77 moveCaretToStartOf(editor2);
78 synthesizeKey(
"KEY_Backspace");
79 is(container.innerHTML, kTestCase1,
80 "Pressing backspace key at start of editor2 changes the content");
84 moveCaretToStartOf(editor3);
85 synthesizeKey(
"KEY_Backspace");
86 is(container.innerHTML, kTestCase1,
87 "Pressing backspace key at start of editor3 changes the content");
91 moveCaretToStartOf(editor4);
92 synthesizeKey(
"KEY_Backspace");
93 is(container.innerHTML, kTestCase1,
94 "Pressing backspace key at start of editor4 changes the content");
98 moveCaretToStartOf(editor5);
99 synthesizeKey(
"KEY_Backspace");
100 is(container.innerHTML, kTestCase1,
101 "Pressing backspace key at start of editor5 changes the content");
105 * pressing delete key at end should not change the content.
108 moveCaretToEndOf(editor1);
109 synthesizeKey(
"KEY_Delete");
110 is(container.innerHTML, kTestCase1,
111 "Pressing delete key at end of editor1 changes the content");
115 moveCaretToEndOf(editor2);
116 synthesizeKey(
"KEY_Delete");
117 is(container.innerHTML, kTestCase1,
118 "Pressing delete key at end of editor2 changes the content");
122 moveCaretToEndOf(editor3);
123 synthesizeKey(
"KEY_Delete");
124 is(container.innerHTML, kTestCase1,
125 "Pressing delete key at end of editor3 changes the content");
129 moveCaretToEndOf(editor4);
130 synthesizeKey(
"KEY_Delete");
131 is(container.innerHTML, kTestCase1,
132 "Pressing delete key at end of editor4 changes the content");
135 /* TestCase #
1: cases when the caret is not on text node.
136 * - pressing delete key at start should remove the first character
137 * - pressing backspace key at end should remove the first character
138 * and the adjacent blocks should not be changed.
141 moveCaretToStartOf(editor3);
142 synthesizeKey(
"KEY_Delete");
143 is(container.innerHTML, kTestCase1_editor3_deleteAtStart,
144 "Pressing delete key at start of editor3 changes adjacent elements"
145 +
" and/or does not remove the first character.");
149 moveCaretToEndOf(editor3);
150 synthesizeKey(
"KEY_Backspace");
151 is(container.innerHTML, kTestCase1_editor3_backspaceAtEnd,
152 "Pressing backspace key at end of editor3 changes adjacent elements"
153 +
" and/or does not remove the last character.");
157 * two adjacent editable
<span> in a table cell.
159 const kTestCase2 =
"<table><tbody><tr><td><span id=\"editor1\
" contenteditable=\"true\
">test</span>" +
160 "<span id=\"editor2\
" contenteditable=\"true\
">test</span></td></tr></tbody></table>";
162 container.innerHTML = kTestCase2;
163 editor1 = document.getElementById(
"editor1");
164 editor2 = document.getElementById(
"editor2");
167 moveCaretToStartOf(editor2);
168 synthesizeKey(
"KEY_Backspace");
169 is(container.innerHTML, kTestCase2,
170 "Pressing backspace key at the start of editor2 changes the content for kTestCase2");
174 moveCaretToEndOf(editor1);
175 synthesizeKey(
"KEY_Delete");
176 is(container.innerHTML, kTestCase2,
177 "Pressing delete key at the end of editor1 changes the content for kTestCase2");
181 * editable
<span> in two adjacent table cells.
183 const kTestCase3 =
"<table><tbody><tr><td><span id=\"editor1\
" contenteditable=\"true\
">test</span></td>" +
184 "<td><span id=\"editor2\
" contenteditable=\"true\
">test</span></td></tr></tbody></table>";
186 container.innerHTML = kTestCase3;
187 editor1 = document.getElementById(
"editor1");
188 editor2 = document.getElementById(
"editor2");
191 moveCaretToStartOf(editor2);
192 synthesizeKey(
"KEY_Backspace");
193 is(container.innerHTML, kTestCase3,
194 "Pressing backspace key at the start of editor2 changes the content for kTestCase3");
198 moveCaretToEndOf(editor1);
199 synthesizeKey(
"KEY_Delete");
200 is(container.innerHTML, kTestCase3,
201 "Pressing delete key at the end of editor1 changes the content for kTestCase3");
205 * editable
<div> in two adjacent table cells.
207 const kTestCase4 =
"<table><tbody><tr><td><div id=\"editor1\
" contenteditable=\"true\
">test</div></td>" +
208 "<td><div id=\"editor2\
" contenteditable=\"true\
">test</div></td></tr></tbody></table>";
210 container.innerHTML = kTestCase4;
211 editor1 = document.getElementById(
"editor1");
212 editor2 = document.getElementById(
"editor2");
215 moveCaretToStartOf(editor2);
216 synthesizeKey(
"KEY_Backspace");
217 is(container.innerHTML, kTestCase4,
218 "Pressing backspace key at the start of editor2 changes the content for kTestCase4");
222 moveCaretToEndOf(editor1);
223 synthesizeKey(
"KEY_Delete");
224 is(container.innerHTML, kTestCase4,
225 "Pressing delete key at the end of editor1 changes the content for kTestCase4");