firefox/editor/libeditor/tests/test_nsITableEditor_deleteTableCellContents.html

<!DOCTYPE>
<html>
<head>
  <title>Test for nsITableEditor.deleteTableCellContents()</title>
  <script src="/tests/SimpleTest/SimpleTest.js"></script>
  <link rel="stylesheet" href="/tests/SimpleTest/test.css">
</head>
<body>
<div id="display">
</div>
<div id="content" contenteditable>out of table<table><tr><td>default content</td></tr></table></div>
<pre id="test">
</pre>

<script class="testbody" type="application/javascript">
"use strict";

SimpleTest.waitForExplicitFinish();
SimpleTest.waitForFocus(() => {
  let editor = document.getElementById("content");
  let selection = document.getSelection();
  let selectionRanges = [];

  function checkInputEvent(aEvent, aDescription) {
    ok(aEvent instanceof InputEvent,
       `"${aEvent.type}" event should be dispatched with InputEvent interface ${aDescription}`);
    is(aEvent.cancelable, aEvent.type === "beforeinput",
       `"${aEvent.type}" event should ${aEvent.type === "beforeinput" ? "be" : "be never"} cancelable ${aDescription}`);
    is(aEvent.bubbles, true,
       `"${aEvent.type}" event should always bubble ${aDescription}`);
    is(aEvent.inputType, "deleteContent",
       `inputType of "${aEvent.type}" event should be "deleteContent" ${aDescription}`);
    is(aEvent.data, null,
       `data of "${aEvent.type}" event should be null ${aDescription}`);
    is(aEvent.dataTransfer, null,
       `dataTransfer of "${aEvent.type}" event should be null ${aDescription}`);
    let targetRanges = aEvent.getTargetRanges();
    if (aEvent.type === "beforeinput") {
      is(targetRanges.length, selectionRanges.length,
         `getTargetRanges() of "beforeinput" event should return selection ranges ${aDescription}`);
      if (targetRanges.length === selectionRanges.length) {
        for (let i = 0; i < selectionRanges.length; i++) {
          is(targetRanges[i].startContainer, selectionRanges[i].startContainer,
             `startContainer of getTargetRanges()[${i}] of "beforeinput" event does not match ${aDescription}`);
          is(targetRanges[i].startOffset, selectionRanges[i].startOffset,
             `startOffset of getTargetRanges()[${i}] of "beforeinput" event does not match ${aDescription}`);
          is(targetRanges[i].endContainer, selectionRanges[i].endContainer,
             `endContainer of getTargetRanges()[${i}] of "beforeinput" event does not match ${aDescription}`);
          is(targetRanges[i].endOffset, selectionRanges[i].endOffset,
             `endOffset of getTargetRanges()[${i}] of "beforeinput" event does not match ${aDescription}`);
        }
      }
    } else {
      is(targetRanges.length, 0,
         `getTargetRanges() of "${aEvent.type}" event should return empty array ${aDescription}`);
    }
  }

  let beforeInputEvents = [];
  let inputEvents = [];
  function onBeforeInput(aEvent) {
    beforeInputEvents.push(aEvent);
    selectionRanges = [];
    for (let i = 0; i < selection.rangeCount; i++) {
      let range = selection.getRangeAt(i);
      selectionRanges.push({startContainer: range.startContainer, startOffset: range.startOffset,
                            endContainer: range.endContainer, endOffset: range.endOffset});
    }
  }
  function onInput(aEvent) {
    inputEvents.push(aEvent);
  }
  editor.addEventListener("beforeinput", onBeforeInput);
  editor.addEventListener("input", onInput);

  selection.collapse(editor.firstChild, 0);
  beforeInputEvents = [];
  inputEvents = [];
  getTableEditor().deleteTableCellContents();
  is(editor.innerHTML, "out of table<table><tbody><tr><td>default content</td></tr></tbody></table>",
     "nsITableEditor.deleteTableCellContents() should do nothing if selection is not in <table>");
  // If there were specific inputType value for this API, we should dispatch cancelable "beforeinput", though.
  is(beforeInputEvents.length, 1,
     '"beforeinput" event should be fired when a call of nsITableEditor.deleteTableCellContents() even though it will do nothing');
  checkInputEvent(beforeInputEvents[0], "when selection is collapsed outside table element");
  is(inputEvents.length, 0,
     'No "input" event should be fired when a call of nsITableEditor.deleteTableCellContents() does nothing');

  selection.removeAllRanges();
  try {
    beforeInputEvents = [];
    inputEvents = [];
    getTableEditor().deleteTableCellContents();
    ok(false, "getTableEditor().deleteTableCellContents() without selection ranges should throw exception");
  } catch (e) {
    ok(true, "getTableEditor().deleteTableCellContents() without selection ranges should throw exception");
    is(beforeInputEvents.length, 0,
       'No "beforeinput" event should be fired when nsITableEditor.deleteTableCellContents() causes exception due to no selection range');
    is(inputEvents.length, 0,
       'No "input" event should be fired when nsITableEditor.deleteTableCellContents() causes exception due to no selection range');
  }

  selection.removeAllRanges();
  editor.innerHTML = "<table>" +
                       '<tr><td id="select">cell1-1</td><td>cell1-2</td></tr>' +
                       "<tr><td>cell2-1</td><td>cell2-2</td></tr>" +
                     "</table>";
  editor.focus();
  beforeInputEvents = [];
  inputEvents = [];
  let range = document.createRange();
  range.selectNode(document.getElementById("select"));
  selection.addRange(range);
  getTableEditor().deleteTableCellContents();
  is(editor.innerHTML, "<table><tbody>" +
                         '<tr><td id="select"><br></td><td>cell1-2</td></tr>' +
                         "<tr><td>cell2-1</td><td>cell2-2</td></tr>" +
                       "</tbody></table>",
     "nsITableEditor.deleteTableCellContents() should replace the selected cell's text with <br> element");
  is(beforeInputEvents.length, 1,
     'Only one "beforeinput" event should be fired when all text in a cell is selected');
  checkInputEvent(beforeInputEvents[0], "when all text in a cell is selected");
  is(inputEvents.length, 1,
     'Only one "input" event should be fired when all text in a cell is selected');
  checkInputEvent(inputEvents[0], "when all text in a cell is selected");

  selection.removeAllRanges();
  editor.innerHTML = "<table>" +
                       '<tr><td id="select"><ul><li>list1</li></ul></td><td>cell1-2</td></tr>' +
                       "<tr><td>cell2-1</td><td>cell2-2</td></tr>" +
                     "</table>";
  editor.focus();
  beforeInputEvents = [];
  inputEvents = [];
  range = document.createRange();
  range.selectNode(document.getElementById("select"));
  selection.addRange(range);
  getTableEditor().deleteTableCellContents();
  is(editor.innerHTML, "<table><tbody>" +
                         '<tr><td id="select"><br></td><td>cell1-2</td></tr>' +
                         "<tr><td>cell2-1</td><td>cell2-2</td></tr>" +
                       "</tbody></table>",
     "nsITableEditor.deleteTableCellContents() should replace the selected cell's <ul> element with <br> element");
  is(beforeInputEvents.length, 1,
     'Only one "beforeinput" event should be fired when <ul> element in a cell is selected');
  checkInputEvent(beforeInputEvents[0], "when <ul> element in a cell is selected");
  is(inputEvents.length, 1,
     'Only one "input" event should be fired when <ul> element in a cell is selected');
  checkInputEvent(inputEvents[0], "when <ul> element in a cell is selected");

  selection.removeAllRanges();
  editor.innerHTML = "<table>" +
                       '<tr><td id="select1">cell1-1</td><td>cell1-2</td></tr>' +
                       '<tr><td id="select2">cell2-1</td><td>cell2-2</td></tr>' +
                     "</table>";
  editor.focus();
  beforeInputEvents = [];
  inputEvents = [];
  range = document.createRange();
  range.selectNode(document.getElementById("select1"));
  selection.addRange(range);
  range = document.createRange();
  range.selectNode(document.getElementById("select2"));
  selection.addRange(range);
  getTableEditor().deleteTableCellContents();
  is(editor.innerHTML, "<table><tbody>" +
                         '<tr><td id="select1"><br></td><td>cell1-2</td></tr>' +
                         '<tr><td id="select2"><br></td><td>cell2-2</td></tr>' +
                       "</tbody></table>",
     "nsITableEditor.deleteTableCellContents() should replace the selected 2 cells' text with <br> element");
  is(beforeInputEvents.length, 1,
     'Only one "beforeinput" event should be fired when 2 cell elements are selected');
  checkInputEvent(beforeInputEvents[0], "when 2 cell elements are selected");
  is(inputEvents.length, 1,
     'Only one "input" event should be fired when 2 cell elements are selected');
  checkInputEvent(inputEvents[0], "when 2 cell elements are selected");

  selection.removeAllRanges();
  editor.innerHTML = "<table>" +
                       '<tr><td id="select1">cell1-1</td><td id="select2">cell1-2</td></tr>' +
                       '<tr><td id="select3">cell2-1</td><td id="select4">cell2-2</td></tr>' +
                     "</table>";
  editor.focus();
  beforeInputEvents = [];
  inputEvents = [];
  range = document.createRange();
  range.selectNode(document.getElementById("select1"));
  selection.addRange(range);
  range = document.createRange();
  range.selectNode(document.getElementById("select2"));
  selection.addRange(range);
  range = document.createRange();
  range.selectNode(document.getElementById("select3"));
  selection.addRange(range);
  range = document.createRange();
  range.selectNode(document.getElementById("select4"));
  selection.addRange(range);
  getTableEditor().deleteTableCellContents();
  is(editor.innerHTML, "<table><tbody>" +
                         '<tr><td id="select1"><br></td><td id="select2"><br></td></tr>' +
                         '<tr><td id="select3"><br></td><td id="select4"><br></td></tr>' +
                       "</tbody></table>",
     "nsITableEditor.deleteTableCellContents() should replace the selected 4 cells' text with <br> element");
  is(beforeInputEvents.length, 1,
     'Only one "beforeinput" event should be fired when 4 cell elements are selected');
  checkInputEvent(beforeInputEvents[0], "when 4 cell elements are selected");
  is(inputEvents.length, 1,
     'Only one "input" event should be fired when 4 cell elements are selected');
  checkInputEvent(inputEvents[0], "when 4 cell elements are selected");

  selection.removeAllRanges();
  editor.innerHTML = "<table>" +
                       '<tr><td id="select" rowspan="2">cell1-1</td><td>cell1-2</td></tr>' +
                       "<tr><td>cell2-2</td></tr>" +
                     "</table>";
  editor.focus();
  beforeInputEvents = [];
  inputEvents = [];
  range = document.createRange();
  range.selectNode(document.getElementById("select"));
  selection.addRange(range);
  getTableEditor().deleteTableCellContents();
  is(editor.innerHTML, "<table><tbody>" +
                         '<tr><td id="select" rowspan="2"><br></td><td>cell1-2</td></tr>' +
                         "<tr><td>cell2-2</td></tr>" +
                       "</tbody></table>",
     "nsITableEditor.deleteTableCellContents() should replace the selected cell's text with <br> element (even if the cell is row-spanning)");
  is(beforeInputEvents.length, 1,
     'Only one "beforeinput" event should be fired when a cell element are selected (even if the cell is row-spanning)');
  checkInputEvent(beforeInputEvents[0], "when a cell element are selected (even if the cell is row-spanning)");
  is(inputEvents.length, 1,
     'Only one "input" event should be fired when a cell element are selected (even if the cell is row-spanning)');
  checkInputEvent(inputEvents[0], "when a cell element are selected (even if the cell is row-spanning)");

  selection.removeAllRanges();
  editor.innerHTML = "<table>" +
                       '<tr><td id="select" colspan="2">cell1-1</td></tr>' +
                       "<tr><td>cell2-1</td><td>cell2-2</td></tr>" +
                     "</table>";
  editor.focus();
  beforeInputEvents = [];
  inputEvents = [];
  range = document.createRange();
  range.selectNode(document.getElementById("select"));
  selection.addRange(range);
  getTableEditor().deleteTableCellContents();
  is(editor.innerHTML, "<table><tbody>" +
                          '<tr><td id="select" colspan="2"><br></td></tr>' +
                          "<tr><td>cell2-1</td><td>cell2-2</td></tr>" +
                        "</tbody></table>",
     "nsITableEditor.deleteTableCellContents() should replace the selected cell's text with <br> element (even if the cell is column-spanning)");
  is(beforeInputEvents.length, 1,
     'Only one "beforeinput" event should be fired when a cell element are selected (even if the cell is column-spanning)');
  checkInputEvent(beforeInputEvents[0], "when a cell element are selected (even if the cell is column-spanning)");
  is(inputEvents.length, 1,
     'Only one "input" event should be fired when a cell element are selected (even if the cell is column-spanning)');
  checkInputEvent(inputEvents[0], "when a cell element are selected (even if the cell is column-spanning)");

  selection.removeAllRanges();
  editor.innerHTML = "<table>" +
                       '<tr><td id="select">cell1-1</td><td>cell1-2</td></tr>' +
                       "<tr><td>cell2-1</td><td>cell2-2</td></tr>" +
                     "</table>";
  editor.focus();
  beforeInputEvents = [];
  inputEvents = [];
  selection.setBaseAndExtent(document.getElementById("select").firstChild, 0,
                             document.getElementById("select").firstChild, 0);
  getTableEditor().deleteTableCellContents();
  is(editor.innerHTML, "<table><tbody>" +
                         '<tr><td id="select"><br></td><td>cell1-2</td></tr>' +
                         "<tr><td>cell2-1</td><td>cell2-2</td></tr>" +
                       "</tbody></table>",
     "nsITableEditor.deleteTableCellContents() should replace a cell's text with <br> element when the cell contains selection range");
  is(beforeInputEvents.length, 1,
     'Only one "beforeinput" event should be fired when the cell contains selection range');
  checkInputEvent(beforeInputEvents[0], "when the cell contains selection range");
  is(inputEvents.length, 1,
     'Only one "input" event should be fired when the cell contains selection range');
  checkInputEvent(inputEvents[0], "when the cell contains selection range");

  editor.removeEventListener("beforeinput", onBeforeInput);
  editor.removeEventListener("input", onInput);

  SimpleTest.finish();
});

function getTableEditor() {
  var editingSession = SpecialPowers.wrap(window).docShell.editingSession;
  return editingSession.getEditorForWindow(window).QueryInterface(SpecialPowers.Ci.nsITableEditor);
}

</script>
</body>

</html>