Wed, 31 Dec 2014 06:09:35 +0100
Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.
1 <html>
2 <head>
3 <title>Test for backspace key and delete key shouldn't remove another editing host's text</title>
4 <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
5 <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
6 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
7 </head>
8 <body>
9 <div id="display"></div>
10 <div id="content" style="display: none">
12 </div>
13 <pre id="test">
14 </pre>
16 <script class="testbody" type="application/javascript">
18 SimpleTest.waitForExplicitFinish();
19 SimpleTest.waitForFocus(runTests);
21 function runTests()
22 {
24 var container = document.getElementById("display");
26 function reset()
27 {
28 document.execCommand("Undo", false, null);
29 }
31 var selection = window.getSelection();
32 function moveCaretToStartOf(aEditor)
33 {
34 selection.selectAllChildren(aEditor);
35 selection.collapseToStart();
36 }
38 function moveCaretToEndOf(aEditor)
39 {
40 selection.selectAllChildren(aEditor);
41 selection.collapseToEnd();
42 }
44 /* TestCase #1
45 */
46 const kTestCase1 =
47 "<p id=\"editor1\" contenteditable=\"true\">editor1</p>" +
48 "<p id=\"editor2\" contenteditable=\"true\">editor2</p>" +
49 "<div id=\"editor3\" contenteditable=\"true\"><div>editor3</div></div>" +
50 "<p id=\"editor4\" contenteditable=\"true\">editor4</p>" +
51 "non-editable text" +
52 "<p id=\"editor5\" contenteditable=\"true\">editor5</p>";
54 const kTestCase1_editor3_deleteAtStart =
55 "<p id=\"editor1\" contenteditable=\"true\">editor1</p>" +
56 "<p id=\"editor2\" contenteditable=\"true\">editor2</p>" +
57 "<div id=\"editor3\" contenteditable=\"true\"><div>ditor3</div></div>" +
58 "<p id=\"editor4\" contenteditable=\"true\">editor4</p>" +
59 "non-editable text" +
60 "<p id=\"editor5\" contenteditable=\"true\">editor5</p>";
62 const kTestCase1_editor3_backspaceAtEnd =
63 "<p id=\"editor1\" contenteditable=\"true\">editor1</p>" +
64 "<p id=\"editor2\" contenteditable=\"true\">editor2</p>" +
65 "<div id=\"editor3\" contenteditable=\"true\"><div>editor</div></div>" +
66 "<p id=\"editor4\" contenteditable=\"true\">editor4</p>" +
67 "non-editable text" +
68 "<p id=\"editor5\" contenteditable=\"true\">editor5</p>";
70 container.innerHTML = kTestCase1;
72 var editor1 = document.getElementById("editor1");
73 var editor2 = document.getElementById("editor2");
74 var editor3 = document.getElementById("editor3");
75 var editor4 = document.getElementById("editor4");
76 var editor5 = document.getElementById("editor5");
78 /* TestCase #1:
79 * pressing backspace key at start should not change the content.
80 */
81 editor2.focus();
82 moveCaretToStartOf(editor2);
83 synthesizeKey("VK_BACK_SPACE", { });
84 is(container.innerHTML, kTestCase1,
85 "Pressing backspace key at start of editor2 changes the content");
86 reset();
88 editor3.focus();
89 moveCaretToStartOf(editor3);
90 synthesizeKey("VK_BACK_SPACE", { });
91 is(container.innerHTML, kTestCase1,
92 "Pressing backspace key at start of editor3 changes the content");
93 reset();
95 editor4.focus();
96 moveCaretToStartOf(editor4);
97 synthesizeKey("VK_BACK_SPACE", { });
98 is(container.innerHTML, kTestCase1,
99 "Pressing backspace key at start of editor4 changes the content");
100 reset();
102 editor5.focus();
103 moveCaretToStartOf(editor5);
104 synthesizeKey("VK_BACK_SPACE", { });
105 is(container.innerHTML, kTestCase1,
106 "Pressing backspace key at start of editor5 changes the content");
107 reset();
109 /* TestCase #1:
110 * pressing delete key at end should not change the content.
111 */
112 editor1.focus();
113 moveCaretToEndOf(editor1);
114 synthesizeKey("VK_DELETE", { });
115 is(container.innerHTML, kTestCase1,
116 "Pressing delete key at end of editor1 changes the content");
117 reset();
119 editor2.focus();
120 moveCaretToEndOf(editor2);
121 synthesizeKey("VK_DELETE", { });
122 is(container.innerHTML, kTestCase1,
123 "Pressing delete key at end of editor2 changes the content");
124 reset();
126 editor3.focus();
127 moveCaretToEndOf(editor3);
128 synthesizeKey("VK_DELETE", { });
129 // Because of a bug in nsFrameSelection::CharacterExtendForDelete, pressing Delete
130 // here puts the selection in the text node inside editor3's inner div, which
131 // causes us to delete the contents of that text node. This situation shouldn't
132 // happen by the normal caret navigation functions that the user can invoke, so
133 // we can fix it later.
134 todo_is(container.innerHTML, kTestCase1,
135 "Pressing delete key at end of editor3 changes the content");
136 reset();
138 editor4.focus();
139 moveCaretToEndOf(editor4);
140 synthesizeKey("VK_DELETE", { });
141 is(container.innerHTML, kTestCase1,
142 "Pressing delete key at end of editor4 changes the content");
143 reset();
145 /* TestCase #1: cases when the caret is not on text node.
146 * - pressing delete key at start should remove the first character
147 * - pressing backspace key at end should remove the first character
148 * and the adjacent blocks should not be changed.
149 */
150 editor3.focus();
151 moveCaretToStartOf(editor3);
152 synthesizeKey("VK_DELETE", { });
153 is(container.innerHTML, kTestCase1_editor3_deleteAtStart,
154 "Pressing delete key at start of editor3 changes adjacent elements"
155 + " and/or does not remove the first character.");
156 reset();
158 // Backspace doesn't work here yet.
159 editor3.focus();
160 moveCaretToEndOf(editor3);
161 synthesizeKey("VK_BACK_SPACE", { });
162 todo_is(container.innerHTML, kTestCase1_editor3_backspaceAtEnd,
163 "Pressing backspace key at end of editor3 changes adjacent elements"
164 + " and/or does not remove the last character.");
165 reset();
166 // We can still check that adjacent elements are not affected.
167 editor3.focus();
168 moveCaretToEndOf(editor3);
169 synthesizeKey("VK_BACK_SPACE", { });
170 is(container.innerHTML, kTestCase1,
171 "Pressing backspace key at end of editor3 changes the content");
172 reset();
174 /* TestCase #2:
175 * two adjacent editable <span> in a table cell.
176 */
177 const kTestCase2 = "<table><tbody><tr><td><span id=\"editor1\" contenteditable=\"true\">test</span>" +
178 "<span id=\"editor2\" contenteditable=\"true\">test</span></td></tr></tbody></table>";
180 container.innerHTML = kTestCase2;
181 editor1 = document.getElementById("editor1");
182 editor2 = document.getElementById("editor2");
184 editor2.focus();
185 moveCaretToStartOf(editor2);
186 synthesizeKey("VK_BACK_SPACE", { });
187 is(container.innerHTML, kTestCase2,
188 "Pressing backspace key at the start of editor2 changes the content for kTestCase2");
189 reset();
191 editor1.focus();
192 moveCaretToEndOf(editor1);
193 synthesizeKey("VK_DELETE", { });
194 is(container.innerHTML, kTestCase2,
195 "Pressing delete key at the end of editor1 changes the content for kTestCase2");
196 reset();
198 /* TestCase #3:
199 * editable <span> in two adjacent table cells.
200 */
201 const kTestCase3 = "<table><tbody><tr><td><span id=\"editor1\" contenteditable=\"true\">test</span></td>" +
202 "<td><span id=\"editor2\" contenteditable=\"true\">test</span></td></tr></tbody></table>";
204 container.innerHTML = kTestCase3;
205 editor1 = document.getElementById("editor1");
206 editor2 = document.getElementById("editor2");
208 editor2.focus();
209 moveCaretToStartOf(editor2);
210 synthesizeKey("VK_BACK_SPACE", { });
211 is(container.innerHTML, kTestCase3,
212 "Pressing backspace key at the start of editor2 changes the content for kTestCase3");
213 reset();
215 editor1.focus();
216 moveCaretToEndOf(editor1);
217 synthesizeKey("VK_DELETE", { });
218 is(container.innerHTML, kTestCase3,
219 "Pressing delete key at the end of editor1 changes the content for kTestCase3");
220 reset();
222 /* TestCase #4:
223 * editable <div> in two adjacent table cells.
224 */
225 const kTestCase4 = "<table><tbody><tr><td><div id=\"editor1\" contenteditable=\"true\">test</div></td>" +
226 "<td><div id=\"editor2\" contenteditable=\"true\">test</div></td></tr></tbody></table>";
228 container.innerHTML = kTestCase4;
229 editor1 = document.getElementById("editor1");
230 editor2 = document.getElementById("editor2");
232 editor2.focus();
233 moveCaretToStartOf(editor2);
234 synthesizeKey("VK_BACK_SPACE", { });
235 is(container.innerHTML, kTestCase4,
236 "Pressing backspace key at the start of editor2 changes the content for kTestCase4");
237 reset();
239 editor1.focus();
240 moveCaretToEndOf(editor1);
241 synthesizeKey("VK_DELETE", { });
242 is(container.innerHTML, kTestCase4,
243 "Pressing delete key at the end of editor1 changes the content for kTestCase4");
244 reset();
246 SimpleTest.finish();
247 }
249 </script>
250 </body>
252 </html>