|
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"> |
|
11 |
|
12 </div> |
|
13 <pre id="test"> |
|
14 </pre> |
|
15 |
|
16 <script class="testbody" type="application/javascript"> |
|
17 |
|
18 SimpleTest.waitForExplicitFinish(); |
|
19 SimpleTest.waitForFocus(runTests); |
|
20 |
|
21 function runTests() |
|
22 { |
|
23 |
|
24 var container = document.getElementById("display"); |
|
25 |
|
26 function reset() |
|
27 { |
|
28 document.execCommand("Undo", false, null); |
|
29 } |
|
30 |
|
31 var selection = window.getSelection(); |
|
32 function moveCaretToStartOf(aEditor) |
|
33 { |
|
34 selection.selectAllChildren(aEditor); |
|
35 selection.collapseToStart(); |
|
36 } |
|
37 |
|
38 function moveCaretToEndOf(aEditor) |
|
39 { |
|
40 selection.selectAllChildren(aEditor); |
|
41 selection.collapseToEnd(); |
|
42 } |
|
43 |
|
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>"; |
|
53 |
|
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>"; |
|
61 |
|
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>"; |
|
69 |
|
70 container.innerHTML = kTestCase1; |
|
71 |
|
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"); |
|
77 |
|
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(); |
|
87 |
|
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(); |
|
94 |
|
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(); |
|
101 |
|
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(); |
|
108 |
|
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(); |
|
118 |
|
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(); |
|
125 |
|
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(); |
|
137 |
|
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(); |
|
144 |
|
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(); |
|
157 |
|
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(); |
|
173 |
|
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>"; |
|
179 |
|
180 container.innerHTML = kTestCase2; |
|
181 editor1 = document.getElementById("editor1"); |
|
182 editor2 = document.getElementById("editor2"); |
|
183 |
|
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(); |
|
190 |
|
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(); |
|
197 |
|
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>"; |
|
203 |
|
204 container.innerHTML = kTestCase3; |
|
205 editor1 = document.getElementById("editor1"); |
|
206 editor2 = document.getElementById("editor2"); |
|
207 |
|
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(); |
|
214 |
|
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(); |
|
221 |
|
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>"; |
|
227 |
|
228 container.innerHTML = kTestCase4; |
|
229 editor1 = document.getElementById("editor1"); |
|
230 editor2 = document.getElementById("editor2"); |
|
231 |
|
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(); |
|
238 |
|
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(); |
|
245 |
|
246 SimpleTest.finish(); |
|
247 } |
|
248 |
|
249 </script> |
|
250 </body> |
|
251 |
|
252 </html> |