<
html>
<
head>
<
title>Test for backspace key and delete key shouldn
't remove another editing host's text</
title>
<
script src=
"/tests/SimpleTest/SimpleTest.js"></
script>
<
script 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 =
"editor1\" contenteditable=\"true\">editor1
" +
"editor2\" contenteditable=\"true\">editor2
" +
"editor3\
" contenteditable=\"true\
">editor3
" +
"editor4\" contenteditable=\"true\">editor4
" +
"non-editable text" +
"editor5\" contenteditable=\"true\">editor5
";
const kTestCase1_editor3_deleteAtStart =
"editor1\" contenteditable=\"true\">editor1
" +
"editor2\" contenteditable=\"true\">editor2
" +
"editor3\" contenteditable=\"true\">ditor3
" +
"editor4\" contenteditable=\"true\">editor4
" +
"non-editable text" +
"editor5\" contenteditable=\"true\">editor5
";
const kTestCase1_editor3_backspaceAtEnd =
"editor1\" contenteditable=\"true\">editor1
" +
"editor2\" contenteditable=\"true\">editor2
" +
"editor3\
" contenteditable=\"true\
">editor
" +
"editor4\" contenteditable=\"true\">editor4
" +
"non-editable text" +
"editor5\" contenteditable=\"true\">editor5
";
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(
"KEY_Backspace");
is(container.innerHTML, kTestCase1,
"Pressing backspace key at start of editor2 changes the content");
reset();
editor3.focus();
moveCaretToStartOf(editor3);
synthesizeKey(
"KEY_Backspace");
is(container.innerHTML, kTestCase1,
"Pressing backspace key at start of editor3 changes the content");
reset();
editor4.focus();
moveCaretToStartOf(editor4);
synthesizeKey(
"KEY_Backspace");
is(container.innerHTML, kTestCase1,
"Pressing backspace key at start of editor4 changes the content");
reset();
editor5.focus();
moveCaretToStartOf(editor5);
synthesizeKey(
"KEY_Backspace");
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(
"KEY_Delete");
is(container.innerHTML, kTestCase1,
"Pressing delete key at end of editor1 changes the content");
reset();
editor2.focus();
moveCaretToEndOf(editor2);
synthesizeKey(
"KEY_Delete");
is(container.innerHTML, kTestCase1,
"Pressing delete key at end of editor2 changes the content");
reset();
editor3.focus();
moveCaretToEndOf(editor3);
synthesizeKey(
"KEY_Delete");
is(container.innerHTML, kTestCase1,
"Pressing delete key at end of editor3 changes the content");
reset();
editor4.focus();
moveCaretToEndOf(editor4);
synthesizeKey(
"KEY_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
* FIXME: Chrome does not unwrap the <
div>.
* - pressing backspace key at end should remove the first character
* and the adjacent blocks should not be changed.
*/
editor3.focus();
moveCaretToStartOf(editor3);
synthesizeKey(
"KEY_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();
editor3.focus();
moveCaretToEndOf(editor3);
synthesizeKey(
"KEY_Backspace");
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();
/* TestCase #2:
* two adjacent editable <
span> in a
table cell.
*/
const kTestCase2 =
"editor1\" contenteditable=\"true\">test" +
"editor2\" contenteditable=\"true\">test |
";
container.innerHTML = kTestCase2;
editor1 = document.getElementById(
"editor1");
editor2 = document.getElementById(
"editor2");
editor2.focus();
moveCaretToStartOf(editor2);
synthesizeKey(
"KEY_Backspace");
is(container.innerHTML, kTestCase2,
"Pressing backspace key at the start of editor2 changes the content for kTestCase2");
reset();
editor1.focus();
moveCaretToEndOf(editor1);
synthesizeKey(
"KEY_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 =
"| editor1\" contenteditable=\"true\">test | " +
"editor2\" contenteditable=\"true\">test |
";
container.innerHTML = kTestCase3;
editor1 = document.getElementById(
"editor1");
editor2 = document.getElementById(
"editor2");
editor2.focus();
moveCaretToStartOf(editor2);
synthesizeKey(
"KEY_Backspace");
is(container.innerHTML, kTestCase3,
"Pressing backspace key at the start of editor2 changes the content for kTestCase3");
reset();
editor1.focus();
moveCaretToEndOf(editor1);
synthesizeKey(
"KEY_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 =
"editor1\" contenteditable=\"true\">test | " +
"editor2\" contenteditable=\"true\">test |
";
container.innerHTML = kTestCase4;
editor1 = document.getElementById(
"editor1");
editor2 = document.getElementById(
"editor2");
editor2.focus();
moveCaretToStartOf(editor2);
synthesizeKey(
"KEY_Backspace");
is(container.innerHTML, kTestCase4,
"Pressing backspace key at the start of editor2 changes the content for kTestCase4");
reset();
editor1.focus();
moveCaretToEndOf(editor1);
synthesizeKey(
"KEY_Delete");
is(container.innerHTML, kTestCase4,
"Pressing delete key at the end of editor1 changes the content for kTestCase4");
reset();
SimpleTest.finish();
}
</
script>
</
body>
</
html>