test_bug414526.html (7732B)
1 <html> 2 <head> 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"/> 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 var container = document.getElementById("display"); 23 24 function reset() { 25 document.execCommand("Undo", false, null); 26 } 27 28 var selection = window.getSelection(); 29 function moveCaretToStartOf(aEditor) { 30 selection.selectAllChildren(aEditor); 31 selection.collapseToStart(); 32 } 33 34 function moveCaretToEndOf(aEditor) { 35 selection.selectAllChildren(aEditor); 36 selection.collapseToEnd(); 37 } 38 39 /* TestCase #1 40 */ 41 const kTestCase1 = 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>" + 46 "non-editable text" + 47 "<p id=\"editor5\" contenteditable=\"true\">editor5</p>"; 48 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\">ditor3</div>" + 53 "<p id=\"editor4\" contenteditable=\"true\">editor4</p>" + 54 "non-editable text" + 55 "<p id=\"editor5\" contenteditable=\"true\">editor5</p>"; 56 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>" + 62 "non-editable text" + 63 "<p id=\"editor5\" contenteditable=\"true\">editor5</p>"; 64 65 container.innerHTML = kTestCase1; 66 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"); 72 73 /* TestCase #1: 74 * pressing backspace key at start should not change the content. 75 */ 76 editor2.focus(); 77 moveCaretToStartOf(editor2); 78 synthesizeKey("KEY_Backspace"); 79 is(container.innerHTML, kTestCase1, 80 "Pressing backspace key at start of editor2 changes the content"); 81 reset(); 82 83 editor3.focus(); 84 moveCaretToStartOf(editor3); 85 synthesizeKey("KEY_Backspace"); 86 is(container.innerHTML, kTestCase1, 87 "Pressing backspace key at start of editor3 changes the content"); 88 reset(); 89 90 editor4.focus(); 91 moveCaretToStartOf(editor4); 92 synthesizeKey("KEY_Backspace"); 93 is(container.innerHTML, kTestCase1, 94 "Pressing backspace key at start of editor4 changes the content"); 95 reset(); 96 97 editor5.focus(); 98 moveCaretToStartOf(editor5); 99 synthesizeKey("KEY_Backspace"); 100 is(container.innerHTML, kTestCase1, 101 "Pressing backspace key at start of editor5 changes the content"); 102 reset(); 103 104 /* TestCase #1: 105 * pressing delete key at end should not change the content. 106 */ 107 editor1.focus(); 108 moveCaretToEndOf(editor1); 109 synthesizeKey("KEY_Delete"); 110 is(container.innerHTML, kTestCase1, 111 "Pressing delete key at end of editor1 changes the content"); 112 reset(); 113 114 editor2.focus(); 115 moveCaretToEndOf(editor2); 116 synthesizeKey("KEY_Delete"); 117 is(container.innerHTML, kTestCase1, 118 "Pressing delete key at end of editor2 changes the content"); 119 reset(); 120 121 editor3.focus(); 122 moveCaretToEndOf(editor3); 123 synthesizeKey("KEY_Delete"); 124 is(container.innerHTML, kTestCase1, 125 "Pressing delete key at end of editor3 changes the content"); 126 reset(); 127 128 editor4.focus(); 129 moveCaretToEndOf(editor4); 130 synthesizeKey("KEY_Delete"); 131 is(container.innerHTML, kTestCase1, 132 "Pressing delete key at end of editor4 changes the content"); 133 reset(); 134 135 /* TestCase #1: cases when the caret is not on text node. 136 * - pressing delete key at start should remove the first character 137 * FIXME: Chrome does not unwrap the <div>. 138 * - pressing backspace key at end should remove the first character 139 * and the adjacent blocks should not be changed. 140 */ 141 editor3.focus(); 142 moveCaretToStartOf(editor3); 143 synthesizeKey("KEY_Delete"); 144 is(container.innerHTML, kTestCase1_editor3_deleteAtStart, 145 "Pressing delete key at start of editor3 changes adjacent elements" 146 + " and/or does not remove the first character."); 147 reset(); 148 149 editor3.focus(); 150 moveCaretToEndOf(editor3); 151 synthesizeKey("KEY_Backspace"); 152 is(container.innerHTML, kTestCase1_editor3_backspaceAtEnd, 153 "Pressing backspace key at end of editor3 changes adjacent elements" 154 + " and/or does not remove the last character."); 155 reset(); 156 157 /* TestCase #2: 158 * two adjacent editable <span> in a table cell. 159 */ 160 const kTestCase2 = "<table><tbody><tr><td><span id=\"editor1\" contenteditable=\"true\">test</span>" + 161 "<span id=\"editor2\" contenteditable=\"true\">test</span></td></tr></tbody></table>"; 162 163 container.innerHTML = kTestCase2; 164 editor1 = document.getElementById("editor1"); 165 editor2 = document.getElementById("editor2"); 166 167 editor2.focus(); 168 moveCaretToStartOf(editor2); 169 synthesizeKey("KEY_Backspace"); 170 is(container.innerHTML, kTestCase2, 171 "Pressing backspace key at the start of editor2 changes the content for kTestCase2"); 172 reset(); 173 174 editor1.focus(); 175 moveCaretToEndOf(editor1); 176 synthesizeKey("KEY_Delete"); 177 is(container.innerHTML, kTestCase2, 178 "Pressing delete key at the end of editor1 changes the content for kTestCase2"); 179 reset(); 180 181 /* TestCase #3: 182 * editable <span> in two adjacent table cells. 183 */ 184 const kTestCase3 = "<table><tbody><tr><td><span id=\"editor1\" contenteditable=\"true\">test</span></td>" + 185 "<td><span id=\"editor2\" contenteditable=\"true\">test</span></td></tr></tbody></table>"; 186 187 container.innerHTML = kTestCase3; 188 editor1 = document.getElementById("editor1"); 189 editor2 = document.getElementById("editor2"); 190 191 editor2.focus(); 192 moveCaretToStartOf(editor2); 193 synthesizeKey("KEY_Backspace"); 194 is(container.innerHTML, kTestCase3, 195 "Pressing backspace key at the start of editor2 changes the content for kTestCase3"); 196 reset(); 197 198 editor1.focus(); 199 moveCaretToEndOf(editor1); 200 synthesizeKey("KEY_Delete"); 201 is(container.innerHTML, kTestCase3, 202 "Pressing delete key at the end of editor1 changes the content for kTestCase3"); 203 reset(); 204 205 /* TestCase #4: 206 * editable <div> in two adjacent table cells. 207 */ 208 const kTestCase4 = "<table><tbody><tr><td><div id=\"editor1\" contenteditable=\"true\">test</div></td>" + 209 "<td><div id=\"editor2\" contenteditable=\"true\">test</div></td></tr></tbody></table>"; 210 211 container.innerHTML = kTestCase4; 212 editor1 = document.getElementById("editor1"); 213 editor2 = document.getElementById("editor2"); 214 215 editor2.focus(); 216 moveCaretToStartOf(editor2); 217 synthesizeKey("KEY_Backspace"); 218 is(container.innerHTML, kTestCase4, 219 "Pressing backspace key at the start of editor2 changes the content for kTestCase4"); 220 reset(); 221 222 editor1.focus(); 223 moveCaretToEndOf(editor1); 224 synthesizeKey("KEY_Delete"); 225 is(container.innerHTML, kTestCase4, 226 "Pressing delete key at the end of editor1 changes the content for kTestCase4"); 227 reset(); 228 229 SimpleTest.finish(); 230 } 231 232 </script> 233 </body> 234 235 </html>