editor/libeditor/tests/test_bug414526.html

   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\"><div>ditor3</div></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    *   - pressing backspace key at end should remove the first character
 138    * and the adjacent blocks should not be changed.
 139    */
 140   editor3.focus();
 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.");
 146   reset();
 147
 148   editor3.focus();
 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.");
 154   reset();
 155
 156   /* TestCase #2:
 157    * two adjacent editable <span> in a table cell.
 158    */
 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>";
 161
 162   container.innerHTML = kTestCase2;
 163   editor1 = document.getElementById("editor1");
 164   editor2 = document.getElementById("editor2");
 165
 166   editor2.focus();
 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");
 171   reset();
 172
 173   editor1.focus();
 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");
 178   reset();
 179
 180   /* TestCase #3:
 181    * editable <span> in two adjacent table cells.
 182    */
 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>";
 185
 186   container.innerHTML = kTestCase3;
 187   editor1 = document.getElementById("editor1");
 188   editor2 = document.getElementById("editor2");
 189
 190   editor2.focus();
 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");
 195   reset();
 196
 197   editor1.focus();
 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");
 202   reset();
 203
 204   /* TestCase #4:
 205    * editable <div> in two adjacent table cells.
 206    */
 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>";
 209
 210   container.innerHTML = kTestCase4;
 211   editor1 = document.getElementById("editor1");
 212   editor2 = document.getElementById("editor2");
 213
 214   editor2.focus();
 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");
 219   reset();
 220
 221   editor1.focus();
 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");
 226   reset();
 227
 228   SimpleTest.finish();
 229 }
 230
 231 </script>
 232 </body>
 233
 234 </html>