Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- Manifest: editor/libeditor/tests/mochitest.toml
<!DOCTYPE>
<html>
<head>
<title>Test for nsITableEditor.insertTableRow()</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, false,
`"${aEvent.type}" event should be never cancelable ${aDescription}`);
is(aEvent.bubbles, true,
`"${aEvent.type}" event should always bubble ${aDescription}`);
is(aEvent.inputType, "",
`inputType of "${aEvent.type}" event should be empty string ${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);
beforeInputEvents = [];
inputEvents = [];
selection.collapse(editor.firstChild, 0);
getTableEditor().insertTableRow(1, false);
is(editor.innerHTML, "out of table<table><tbody><tr><td>default content</td></tr></tbody></table>",
"nsITableEditor.insertTableRow(1, false) should do nothing if selection is not in <table>");
is(beforeInputEvents.length, 1,
'"beforeinput" event should be fired when a call of nsITableEditor.insertTableRow(1, false) even though it will do nothing');
checkInputEvent(beforeInputEvents[0], "when selection is collapsed outside of table element (nsITableEditor.insertTableRow(1, false))");
is(inputEvents.length, 0,
'No "input" event should be fired when a call of nsITableEditor.insertTableRow(1, false) does nothing');
beforeInputEvents = [];
inputEvents = [];
getTableEditor().insertTableRow(1, true);
is(editor.innerHTML, "out of table<table><tbody><tr><td>default content</td></tr></tbody></table>",
"nsITableEditor.insertTableRow(1, true) should do nothing if selection is not in <table>");
is(beforeInputEvents.length, 1,
'"beforeinput" event should be fired when a call of nsITableEditor.insertTableRow(1, true) even though it will do nothing');
checkInputEvent(beforeInputEvents[0], "when selection is collapsed outside of table element (nsITableEditor.insertTableRow(1, true))");
is(inputEvents.length, 0,
'No "input" event should be fired when a call of nsITableEditor.insertTableRow(1, true) does nothing');
selection.removeAllRanges();
try {
beforeInputEvents = [];
inputEvents = [];
getTableEditor().insertTableRow(1, false);
ok(false, "getTableEditor().insertTableRow(1, false) without selection ranges should throw exception");
} catch (e) {
ok(true, "getTableEditor().insertTableRow(1, false) without selection ranges should throw exception");
is(beforeInputEvents.length, 0,
'No "beforeinput" event should be fired when nsITableEditor.insertTableRow(1, false) causes exception due to no selection range');
is(inputEvents.length, 0,
'No "input" event should be fired when nsITableEditor.insertTableRow(1, false) causes exception due to no selection range');
}
try {
beforeInputEvents = [];
inputEvents = [];
getTableEditor().insertTableRow(1, true);
ok(false, "getTableEditor().insertTableRow(1, true) without selection ranges should throw exception");
} catch (e) {
ok(true, "getTableEditor().insertTableRow(1, true) without selection ranges should throw exception");
is(beforeInputEvents.length, 0,
'No "beforeinput" event should be fired when nsITableEditor.insertTableRow(1, true) causes exception due to no selection range');
is(inputEvents.length, 0,
'No "input" event should be fired when nsITableEditor.insertTableRow(1, true) causes exception due to no selection range');
}
selection.removeAllRanges();
editor.innerHTML = "<table>" +
"<tr><td>cell1-1</td><td>cell1-2</td></tr>" +
'<tr><td id="select">cell2-1</td><td>cell2-2</td></tr>' +
"<tr><td>cell3-1</td><td>cell3-2</td></tr>" +
"</table>";
editor.focus();
beforeInputEvents = [];
inputEvents = [];
selection.setBaseAndExtent(document.getElementById("select").firstChild, 0,
document.getElementById("select").firstChild, 0);
getTableEditor().insertTableRow(1, false);
is(editor.innerHTML, "<table><tbody>" +
"<tr><td>cell1-1</td><td>cell1-2</td></tr>" +
'<tr><td valign="top"><br></td><td valign="top"><br></td></tr>' +
'<tr><td id="select">cell2-1</td><td>cell2-2</td></tr>' +
"<tr><td>cell3-1</td><td>cell3-2</td></tr>" +
"</tbody></table>",
"nsITableEditor.insertTableRow(1, false) should insert a row above the second row");
is(beforeInputEvents.length, 1,
'Only one "beforeinput" event should be fired when selection is collapsed in a cell in second row (before)');
checkInputEvent(beforeInputEvents[0], "when selection is collapsed in a cell in second row (before)");
is(inputEvents.length, 1,
'Only one "input" event should be fired when selection is collapsed in a cell in second row (before)');
checkInputEvent(inputEvents[0], "when selection is collapsed in a cell in second row (before)");
selection.removeAllRanges();
editor.innerHTML = "<table>" +
"<tr><td>cell1-1</td><td>cell1-2</td></tr>" +
'<tr><td id="select">cell2-1</td><td>cell2-2</td></tr>' +
"<tr><td>cell3-1</td><td>cell3-2</td></tr>" +
"</table>";
editor.focus();
beforeInputEvents = [];
inputEvents = [];
selection.setBaseAndExtent(document.getElementById("select").firstChild, 0,
document.getElementById("select").firstChild, 0);
getTableEditor().insertTableRow(1, true);
is(editor.innerHTML, "<table><tbody>" +
"<tr><td>cell1-1</td><td>cell1-2</td></tr>" +
'<tr><td id="select">cell2-1</td><td>cell2-2</td></tr>' +
'<tr><td valign="top"><br></td><td valign="top"><br></td></tr>' +
"<tr><td>cell3-1</td><td>cell3-2</td></tr>" +
"</tbody></table>",
"nsITableEditor.insertTableRow(1, true) should insert a row below the second row");
is(beforeInputEvents.length, 1,
'Only one "beforeinput" event should be fired when selection is collapsed in a cell in second row (after)');
checkInputEvent(beforeInputEvents[0], "when selection is collapsed in a cell in second row (after)");
is(inputEvents.length, 1,
'Only one "input" event should be fired when selection is collapsed in a cell in second row (after)');
checkInputEvent(inputEvents[0], "when selection is collapsed in a cell in second row (after)");
selection.removeAllRanges();
editor.innerHTML = "<table>" +
'<tr><td>cell1-1</td><td rowspan="2">cell1-2</td></tr>' +
'<tr><td id="select">cell2-1</td></tr>' +
"<tr><td>cell3-1</td><td>cell3-2</td></tr>" +
"</table>";
editor.focus();
beforeInputEvents = [];
inputEvents = [];
selection.setBaseAndExtent(document.getElementById("select").firstChild, 0,
document.getElementById("select").firstChild, 0);
getTableEditor().insertTableRow(1, false);
is(editor.innerHTML, "<table><tbody>" +
'<tr><td>cell1-1</td><td rowspan="3">cell1-2</td></tr>' +
'<tr><td valign="top"><br></td></tr>' +
'<tr><td id="select">cell2-1</td></tr>' +
"<tr><td>cell3-1</td><td>cell3-2</td></tr>" +
"</tbody></table>",
"nsITableEditor.insertTableRow(1, false) should insert a row above the second row and rowspan in the first row should be increased");
is(beforeInputEvents.length, 1,
'Only one "beforeinput" event should be fired when selection is collapsed in a cell in second row which has row-spanned cell (before)');
checkInputEvent(beforeInputEvents[0], "when selection is collapsed in a cell in second row which has row-spanned cell (before)");
is(inputEvents.length, 1,
'Only one "input" event should be fired when selection is collapsed in a cell in second row which has row-spanned cell (before)');
checkInputEvent(inputEvents[0], "when selection is collapsed in a cell in second row which has row-spanned cell (before)");
selection.removeAllRanges();
editor.innerHTML = "<table>" +
'<tr><td>cell1-1</td><td rowspan="3">cell1-2</td></tr>' +
'<tr><td id="select">cell2-1</td></tr>' +
"<tr><td>cell3-1</td></tr>" +
"</table>";
editor.focus();
beforeInputEvents = [];
inputEvents = [];
selection.setBaseAndExtent(document.getElementById("select").firstChild, 0,
document.getElementById("select").firstChild, 0);
getTableEditor().insertTableRow(1, true);
is(editor.innerHTML, "<table><tbody>" +
'<tr><td>cell1-1</td><td rowspan="4">cell1-2</td></tr>' +
'<tr><td id="select">cell2-1</td></tr>' +
'<tr><td valign="top"><br></td></tr>' +
"<tr><td>cell3-1</td></tr>" +
"</tbody></table>",
"nsITableEditor.insertTableRow(1, true) should insert a row below the second row and rowspan in the first row should be increased");
is(beforeInputEvents.length, 1,
'Only one "beforeinput" event should be fired when selection is collapsed in a cell in second row which has row-spanned cell (after)');
checkInputEvent(beforeInputEvents[0], "when selection is collapsed in a cell in second row which has row-spanned cell (after)");
is(inputEvents.length, 1,
'Only one "input" event should be fired when selection is collapsed in a cell in second row which has row-spanned cell (after)');
checkInputEvent(inputEvents[0], "when selection is collapsed in a cell in second row which has row-spanned cell (after)");
selection.removeAllRanges();
editor.innerHTML = "<table>" +
'<tr><td>cell1-1</td><td id="select" rowspan="2">cell1-2</td></tr>' +
"<tr><td>cell2-1</td></tr>" +
"<tr><td>cell3-1</td><td>cell3-2</td></tr>" +
"</table>";
editor.focus();
beforeInputEvents = [];
inputEvents = [];
selection.setBaseAndExtent(document.getElementById("select").firstChild, 0,
document.getElementById("select").firstChild, 1);
getTableEditor().insertTableRow(2, false);
is(editor.innerHTML, "<table><tbody>" +
'<tr><td valign="top"><br></td><td valign="top"><br></td></tr>' +
'<tr><td valign="top"><br></td><td valign="top"><br></td></tr>' +
'<tr><td>cell1-1</td><td id="select" rowspan="2">cell1-2</td></tr>' +
"<tr><td>cell2-1</td></tr>" +
"<tr><td>cell3-1</td><td>cell3-2</td></tr>" +
"</tbody></table>",
"nsITableEditor.insertTableRow(2, false) should insert 2 rows above the first row");
is(beforeInputEvents.length, 1,
'Only one "beforeinput" event should be fired when selection is collapsed in a cell which is row-spanning (before)');
checkInputEvent(beforeInputEvents[0], "when selection is collapsed in a cell which is row-spanning (before)");
is(inputEvents.length, 1,
'Only one "input" event should be fired when selection is collapsed in a cell which is row-spanning (before)');
checkInputEvent(inputEvents[0], "when selection is collapsed in a cell which is row-spanning (before)");
selection.removeAllRanges();
editor.innerHTML = "<table>" +
'<tr><td>cell1-1</td><td id="select" rowspan="2">cell1-2</td></tr>' +
"<tr><td>cell2-1</td></tr>" +
"<tr><td>cell3-1</td><td>cell3-2</td></tr>" +
"</table>";
editor.focus();
beforeInputEvents = [];
inputEvents = [];
selection.setBaseAndExtent(document.getElementById("select").firstChild, 0,
document.getElementById("select").firstChild, 1);
getTableEditor().insertTableRow(2, true);
is(editor.innerHTML, "<table><tbody>" +
'<tr><td>cell1-1</td><td id="select" rowspan="2">cell1-2</td></tr>' +
"<tr><td>cell2-1</td></tr>" +
'<tr><td valign="top"><br></td><td valign="top"><br></td></tr>' +
'<tr><td valign="top"><br></td><td valign="top"><br></td></tr>' +
"<tr><td>cell3-1</td><td>cell3-2</td></tr>" +
"</tbody></table>",
"nsITableEditor.insertTableRow(2, false) should insert 2 rows below the second row (i.e., below the bottom row of the row-spanning cell");
is(beforeInputEvents.length, 1,
'Only one "beforeinput" event should be fired when selection is collapsed in a cell which is row-spanning (after)');
checkInputEvent(beforeInputEvents[0], "when selection is collapsed in a cell which is row-spanning (after)");
is(inputEvents.length, 1,
'Only one "input" event should be fired when selection is collapsed in a cell which is row-spanning (after)');
checkInputEvent(inputEvents[0], "when selection is collapsed in a cell which is row-spanning (after)");
(function testInsertBeforeRowFollowingTextNode() {
selection.removeAllRanges();
editor.innerHTML =
"<table>" +
"<tr><td>cell1-1</td><td>cell1-2</td></tr>\n" +
'<tr><td id="select">cell2-1</td><td>cell2-2</td></tr>\n' +
"<tr><td>cell3-1</td><td>cell3-2</td></tr>" +
"</table>";
editor.focus();
beforeInputEvents = [];
inputEvents = [];
selection.setBaseAndExtent(
document.getElementById("select").firstChild,
0,
document.getElementById("select").firstChild,
0
);
getTableEditor().insertTableRow(1, false);
is(
editor.innerHTML,
"<table><tbody>" +
"<tr><td>cell1-1</td><td>cell1-2</td></tr>\n" +
'<tr><td valign="top"><br></td><td valign="top"><br></td></tr>' +
'<tr><td id="select">cell2-1</td><td>cell2-2</td></tr>\n' +
"<tr><td>cell3-1</td><td>cell3-2</td></tr>" +
"</tbody></table>",
"testInsertBeforeRowFollowingTextNode: nsITableEditor.insertTableRow(1, false) should insert a row above the second row");
is(
beforeInputEvents.length,
1,
'testInsertBeforeRowFollowingTextNode: Only one "beforeinput" event should be fired'
);
checkInputEvent(
beforeInputEvents[0],
"when selection is collapsed in a cell whose row follows a text node (testInsertBeforeRowFollowingTextNode)"
);
is(
inputEvents.length,
1,
'testInsertBeforeRowFollowingTextNode: Only one "input" event should be fired'
);
checkInputEvent(
inputEvents[0],
"when selection is collapsed in a cell whose row follows a text node (testInsertBeforeRowFollowingTextNode)"
);
})();
(function testInsertAfterRowFollowedTextNode() {
selection.removeAllRanges();
editor.innerHTML =
"<table>" +
"<tr><td>cell1-1</td><td>cell1-2</td></tr>\n" +
'<tr><td id="select">cell2-1</td><td>cell2-2</td></tr>\n' +
"<tr><td>cell3-1</td><td>cell3-2</td></tr>" +
"</table>";
editor.focus();
beforeInputEvents = [];
inputEvents = [];
selection.setBaseAndExtent(
document.getElementById("select").firstChild,
0,
document.getElementById("select").firstChild,
0
);
getTableEditor().insertTableRow(1, true);
is(
editor.innerHTML,
"<table><tbody>" +
"<tr><td>cell1-1</td><td>cell1-2</td></tr>\n" +
'<tr><td id="select">cell2-1</td><td>cell2-2</td></tr>' +
'<tr><td valign="top"><br></td><td valign="top"><br></td></tr>\n' +
"<tr><td>cell3-1</td><td>cell3-2</td></tr>" +
"</tbody></table>",
"testInsertAfterRowFollowedTextNode: nsITableEditor.insertTableRow(1, true) should insert a row above the second row");
is(
beforeInputEvents.length,
1,
'testInsertAfterRowFollowedTextNode: Only one "beforeinput" event should be fired'
);
checkInputEvent(
beforeInputEvents[0],
"when selection is collapsed in a cell whose row follows a text node (testInsertAfterRowFollowedTextNode)"
);
is(
inputEvents.length,
1,
'testInsertAfterRowFollowedTextNode: Only one "input" event should be fired'
);
checkInputEvent(
inputEvents[0],
"when selection is collapsed in a cell whose row follows a text node (testInsertAfterRowFollowedTextNode)"
);
})();
(function testInsertAfterLastRow() {
selection.removeAllRanges();
editor.innerHTML =
"<table>" +
"<tr><td>cell1-1</td><td>cell1-2</td></tr>" +
'<tr><td id="select">cell2-1</td><td>cell2-2</td></tr>' +
"</table>";
editor.focus();
beforeInputEvents = [];
inputEvents = [];
selection.collapse(document.getElementById("select").firstChild, 0);
getTableEditor().insertTableRow(1, true);
is(
editor.innerHTML,
"<table><tbody>" +
"<tr><td>cell1-1</td><td>cell1-2</td></tr>" +
'<tr><td id="select">cell2-1</td><td>cell2-2</td></tr>' +
'<tr><td valign="top"><br></td><td valign="top"><br></td></tr>' +
"</tbody></table>",
"testInsertAfterLastRow: nsITableEditor.insertTableRow(1, true) should insert a row after the last row"
);
is(
beforeInputEvents.length,
1,
'testInsertAfterLastRow: Only one "beforeinput" event should be fired'
);
checkInputEvent(
beforeInputEvents[0],
"when selection is collapsed in a cell whose row follows a text node (testInsertAfterLastRow)"
);
is(
inputEvents.length,
1,
'testInsertAfterLastRow: Only one "input" event should be fired'
);
checkInputEvent(
inputEvents[0],
"when selection is collapsed in a cell whose row follows a text node (testInsertAfterLastRow)"
);
})();
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>