editor/libeditor/html/tests/test_bug414526.html

Thu, 22 Jan 2015 13:21:57 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Thu, 22 Jan 2015 13:21:57 +0100
branch
TOR_BUG_9701
changeset 15
b8a032363ba2
permissions
-rw-r--r--

Incorporate requested changes from Mozilla in review:
https://bugzilla.mozilla.org/show_bug.cgi?id=1123480#c6

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

mercurial