gecko/editor/libeditor/tests/test_bug414526.html

<html>
<head>
  <title>Test for backspace key and delete key shouldn't remove another editing host's text</title>
  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
  <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
</head>
<body>
<div id="display"></div>
<div id="content" style="display: none">

</div>
<pre id="test">
</pre>

<script class="testbody" type="application/javascript">

SimpleTest.waitForExplicitFinish();
SimpleTest.waitForFocus(runTests);

function runTests()
{

  var container = document.getElementById("display");

  function reset()
  {
    document.execCommand("Undo", false, null);
  }

  var selection = window.getSelection();
  function moveCaretToStartOf(aEditor)
  {
    selection.selectAllChildren(aEditor);
    selection.collapseToStart();
  }

  function moveCaretToEndOf(aEditor)
  {
    selection.selectAllChildren(aEditor);
    selection.collapseToEnd();
  }

  /* TestCase #1
   */
  const kTestCase1 =
    "<p id=\"editor1\" contenteditable=\"true\">editor1</p>" +
    "<p id=\"editor2\" contenteditable=\"true\">editor2</p>" +
    "<div id=\"editor3\" contenteditable=\"true\"><div>editor3</div></div>" +
    "<p id=\"editor4\" contenteditable=\"true\">editor4</p>" +
    "non-editable text" +
    "<p id=\"editor5\" contenteditable=\"true\">editor5</p>";

  const kTestCase1_editor3_deleteAtStart =
    "<p id=\"editor1\" contenteditable=\"true\">editor1</p>" +
    "<p id=\"editor2\" contenteditable=\"true\">editor2</p>" +
    "<div id=\"editor3\" contenteditable=\"true\"><div>ditor3</div></div>" +
    "<p id=\"editor4\" contenteditable=\"true\">editor4</p>" +
    "non-editable text" +
    "<p id=\"editor5\" contenteditable=\"true\">editor5</p>";

  const kTestCase1_editor3_backspaceAtEnd =
    "<p id=\"editor1\" contenteditable=\"true\">editor1</p>" +
    "<p id=\"editor2\" contenteditable=\"true\">editor2</p>" +
    "<div id=\"editor3\" contenteditable=\"true\"><div>editor</div></div>" +
    "<p id=\"editor4\" contenteditable=\"true\">editor4</p>" +
    "non-editable text" +
    "<p id=\"editor5\" contenteditable=\"true\">editor5</p>";

  container.innerHTML = kTestCase1;

  var editor1 = document.getElementById("editor1");
  var editor2 = document.getElementById("editor2");
  var editor3 = document.getElementById("editor3");
  var editor4 = document.getElementById("editor4");
  var editor5 = document.getElementById("editor5");

  /* TestCase #1:
   * pressing backspace key at start should not change the content.
   */
  editor2.focus();
  moveCaretToStartOf(editor2);
  synthesizeKey("VK_BACK_SPACE", { });
  is(container.innerHTML, kTestCase1,
     "Pressing backspace key at start of editor2 changes the content");
  reset();

  editor3.focus();
  moveCaretToStartOf(editor3);
  synthesizeKey("VK_BACK_SPACE", { });
  is(container.innerHTML, kTestCase1,
     "Pressing backspace key at start of editor3 changes the content");
  reset();

  editor4.focus();
  moveCaretToStartOf(editor4);
  synthesizeKey("VK_BACK_SPACE", { });
  is(container.innerHTML, kTestCase1,
     "Pressing backspace key at start of editor4 changes the content");
  reset();

  editor5.focus();
  moveCaretToStartOf(editor5);
  synthesizeKey("VK_BACK_SPACE", { });
  is(container.innerHTML, kTestCase1,
     "Pressing backspace key at start of editor5 changes the content");
  reset();

  /* TestCase #1:
   * pressing delete key at end should not change the content.
   */
  editor1.focus();
  moveCaretToEndOf(editor1);
  synthesizeKey("VK_DELETE", { });
  is(container.innerHTML, kTestCase1,
     "Pressing delete key at end of editor1 changes the content");
  reset();

  editor2.focus();
  moveCaretToEndOf(editor2);
  synthesizeKey("VK_DELETE", { });
  is(container.innerHTML, kTestCase1,
     "Pressing delete key at end of editor2 changes the content");
  reset();

  editor3.focus();
  moveCaretToEndOf(editor3);
  synthesizeKey("VK_DELETE", { });
  // Because of a bug in nsFrameSelection::CharacterExtendForDelete, pressing Delete
  // here puts the selection in the text node inside editor3's inner div, which
  // causes us to delete the contents of that text node.  This situation shouldn't
  // happen by the normal caret navigation functions that the user can invoke, so
  // we can fix it later.
  todo_is(container.innerHTML, kTestCase1,
          "Pressing delete key at end of editor3 changes the content");
  reset();

  editor4.focus();
  moveCaretToEndOf(editor4);
  synthesizeKey("VK_DELETE", { });
  is(container.innerHTML, kTestCase1,
     "Pressing delete key at end of editor4 changes the content");
  reset();

  /* TestCase #1: cases when the caret is not on text node.
   *   - pressing delete key at start should remove the first character
   *   - pressing backspace key at end should remove the first character
   * and the adjacent blocks should not be changed.
   */
  editor3.focus();
  moveCaretToStartOf(editor3);
  synthesizeKey("VK_DELETE", { });
  is(container.innerHTML, kTestCase1_editor3_deleteAtStart,
     "Pressing delete key at start of editor3 changes adjacent elements"
     + " and/or does not remove the first character.");
  reset();

  // Backspace doesn't work here yet.
  editor3.focus();
  moveCaretToEndOf(editor3);
  synthesizeKey("VK_BACK_SPACE", { });
  todo_is(container.innerHTML, kTestCase1_editor3_backspaceAtEnd,
          "Pressing backspace key at end of editor3 changes adjacent elements"
          + " and/or does not remove the last character.");
  reset();
  //  We can still check that adjacent elements are not affected.
  editor3.focus();
  moveCaretToEndOf(editor3);
  synthesizeKey("VK_BACK_SPACE", { });
  is(container.innerHTML, kTestCase1,
     "Pressing backspace key at end of editor3 changes the content");
  reset();

  /* TestCase #2:
   * two adjacent editable <span> in a table cell.
   */
  const kTestCase2 = "<table><tbody><tr><td><span id=\"editor1\" contenteditable=\"true\">test</span>" +
    "<span id=\"editor2\" contenteditable=\"true\">test</span></td></tr></tbody></table>";

  container.innerHTML = kTestCase2;
  editor1 = document.getElementById("editor1");
  editor2 = document.getElementById("editor2");

  editor2.focus();
  moveCaretToStartOf(editor2);
  synthesizeKey("VK_BACK_SPACE", { });
  is(container.innerHTML, kTestCase2,
     "Pressing backspace key at the start of editor2 changes the content for kTestCase2");
  reset();

  editor1.focus();
  moveCaretToEndOf(editor1);
  synthesizeKey("VK_DELETE", { });
  is(container.innerHTML, kTestCase2,
     "Pressing delete key at the end of editor1 changes the content for kTestCase2");
  reset();

  /* TestCase #3:
   * editable <span> in two adjacent table cells.
   */
  const kTestCase3 = "<table><tbody><tr><td><span id=\"editor1\" contenteditable=\"true\">test</span></td>" +
    "<td><span id=\"editor2\" contenteditable=\"true\">test</span></td></tr></tbody></table>";

  container.innerHTML = kTestCase3;
  editor1 = document.getElementById("editor1");
  editor2 = document.getElementById("editor2");

  editor2.focus();
  moveCaretToStartOf(editor2);
  synthesizeKey("VK_BACK_SPACE", { });
  is(container.innerHTML, kTestCase3,
     "Pressing backspace key at the start of editor2 changes the content for kTestCase3");
  reset();

  editor1.focus();
  moveCaretToEndOf(editor1);
  synthesizeKey("VK_DELETE", { });
  is(container.innerHTML, kTestCase3,
     "Pressing delete key at the end of editor1 changes the content for kTestCase3");
  reset();

  /* TestCase #4:
   * editable <div> in two adjacent table cells.
   */
  const kTestCase4 = "<table><tbody><tr><td><div id=\"editor1\" contenteditable=\"true\">test</div></td>" +
    "<td><div id=\"editor2\" contenteditable=\"true\">test</div></td></tr></tbody></table>";

  container.innerHTML = kTestCase4;
  editor1 = document.getElementById("editor1");
  editor2 = document.getElementById("editor2");

  editor2.focus();
  moveCaretToStartOf(editor2);
  synthesizeKey("VK_BACK_SPACE", { });
  is(container.innerHTML, kTestCase4,
     "Pressing backspace key at the start of editor2 changes the content for kTestCase4");
  reset();

  editor1.focus();
  moveCaretToEndOf(editor1);
  synthesizeKey("VK_DELETE", { });
  is(container.innerHTML, kTestCase4,
     "Pressing delete key at the end of editor1 changes the content for kTestCase4");
  reset();

  SimpleTest.finish();
}

</script>
</body>

</html>