<!
DOCTYPE>
<
html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=1257363
-->
<
head>
<
title>Test for Bug 1257363</
title>
<
script src=
"/tests/SimpleTest/SimpleTest.js"></
script>
<
link rel=
"stylesheet" href=
"/tests/SimpleTest/test.css">
<
script src=
"/tests/SimpleTest/EventUtils.js"></
script>
</
head>
<
body>
<
div id=
"display">
</
div>
<
div id=
"backspaceCSS" contenteditable><p
style=
"color:red;">12345</p>67</
div>
<
div id=
"backspace" contenteditable><p><
font color=
"red">12345</
font></p>67</
div>
<
div id=
"deleteCSS" contenteditable><p
style=
"color:red;">x</p></
div>
<
div id=
"delete" contenteditable><p><
font color=
"red">y</
font></p></
div>
<
pre id=
"test">
</
pre>
<
script class=
"testbody" type=
"application/javascript">
/** Test for Bug 1257363 **/
SimpleTest.waitForExplicitFinish();
SimpleTest.waitForFocus(function() {
// ***** Backspace test *****
var div = document.getElementById(
"backspaceCSS");
div.focus();
synthesizeMouse(
div, 100, 2, {}); /* click behind and down */
var sel = window.getSelection();
var selRange = sel.getRangeAt(0);
is(selRange.endContainer.nodeName,
"#text",
"selection should be at the end of text node");
is(selRange.endOffset, 5,
"offset should be 5");
// Return and backspace should take us to where we started.
synthesizeKey(
"KEY_Enter");
synthesizeKey(
"KEY_Backspace");
selRange = sel.getRangeAt(0);
is(selRange.endContainer.nodeName,
"#text",
"selection should be at the end of text node");
is(selRange.endOffset, 5,
"offset should be 5");
// Add an
"a" to the end of the paragraph.
sendString(
"a");
// Return and forward delete should take us to the following line.
synthesizeKey(
"KEY_Enter");
synthesizeKey(
"KEY_Delete");
// Add a
"b" to the start.
sendString(
"b");
is(
div.innerHTML,
"color:red;\">12345a
b67",
"unexpected HTML");
// Let
's repeat the whole thing, but a font tag instead of CSS.
// The behaviour is different since the
font is carried over.
div = document.getElementById(
"backspace");
div.focus();
synthesizeMouse(
div, 100, 2, {}); /* click behind and down */
sel = window.getSelection();
selRange = sel.getRangeAt(0);
is(selRange.endContainer.nodeName,
"#text",
"selection should be at the end of text node");
is(selRange.endOffset, 5,
"offset should be 5");
// Return and backspace should take us to where we started.
synthesizeKey(
"KEY_Enter");
synthesizeKey(
"KEY_Backspace");
selRange = sel.getRangeAt(0);
is(selRange.endContainer.nodeName,
"#text",
"selection should be at the end of text node");
is(selRange.endOffset, 5,
"offset should be 5");
// Add an
"a" to the end of the paragraph.
sendString(
"a");
// Return and forward delete should take us to the following line.
synthesizeKey(
"KEY_Enter");
synthesizeKey(
"KEY_Delete");
// Add a
"b" to the start.
sendString(
"b");
// Here we get a somewhat ugly result since the red sticks.
is(
div.innerHTML,
"red\">12345a
#ff0000\">b67",
"unexpected HTML");
// ***** Delete test *****
div = document.getElementById(
"deleteCSS");
div.focus();
synthesizeMouse(
div, 100, 2, {}); /* click behind and down */
sel = window.getSelection();
selRange = sel.getRangeAt(0);
is(selRange.endContainer.nodeName,
"#text",
"selection should be at the end of text node");
is(selRange.endOffset, 1,
"offset should be 1");
// left, enter should create a new empty paragraph before
// but leave the selection at the start of the existing paragraph.
synthesizeKey(
"KEY_ArrowLeft");
synthesizeKey(
"KEY_Enter");
selRange = sel.getRangeAt(0);
is(selRange.endContainer.nodeName,
"#text",
"selection should be at the start of text node");
is(selRange.endOffset, 0,
"offset should be 0");
is(selRange.endContainer.nodeValue,
"x",
"we should be in the text node with the x");
// Now moving up into the new empty paragraph.
synthesizeKey(
"KEY_ArrowUp");
selRange = sel.getRangeAt(0);
is(selRange.endContainer.nodeName,
"P",
"selection should be the new empty paragraph");
is(selRange.endOffset, 0,
"offset should be 0");
// Forward delete should now take us to where we started.
synthesizeKey(
"KEY_Delete");
selRange = sel.getRangeAt(0);
is(selRange.endContainer.nodeName,
"#text",
"selection should be at the start of text node");
is(selRange.endOffset, 0,
"offset should be 0");
// Add an
"a" to the start of the paragraph.
sendString(
"a");
is(
div.innerHTML,
"color:red;\">ax
",
"unexpected HTML");
// Let
's repeat the whole thing, but a font tag instead of CSS.
div = document.getElementById(
"delete");
div.focus();
synthesizeMouse(
div, 100, 2, {}); /* click behind and down */
sel = window.getSelection();
selRange = sel.getRangeAt(0);
is(selRange.endContainer.nodeName,
"#text",
"selection should be at the end of text node");
is(selRange.endOffset, 1,
"offset should be 1");
// left, enter should create a new empty paragraph before
// but leave the selection at the start of the existing paragraph.
synthesizeKey(
"KEY_ArrowLeft");
synthesizeKey(
"KEY_Enter");
selRange = sel.getRangeAt(0);
is(selRange.endContainer.nodeName,
"#text",
"selection should be at the start of text node");
is(selRange.endOffset, 0,
"offset should be 0");
is(selRange.endContainer.nodeValue,
"y",
"we should be in the text node with the y");
// Now moving up into the new empty paragraph.
synthesizeKey(
"KEY_ArrowUp");
selRange = sel.getRangeAt(0);
is(selRange.endContainer.nodeName,
"FONT",
"selection should be the font tag");
is(selRange.endOffset, 0,
"offset should be 0");
is(selRange.endContainer.parentNode.nodeName,
"P",
"the parent of the font should be a paragraph");
// Forward delete should now take us to where we started.
synthesizeKey(
"KEY_Delete");
selRange = sel.getRangeAt(0);
is(selRange.endContainer.nodeName,
"#text",
"selection should be at the start of text node");
is(selRange.endOffset, 0,
"offset should be 0");
// Add an
"a" to the start of the paragraph.
sendString(
"a");
is(
div.innerHTML,
"red\">ay
",
"unexpected HTML");
SimpleTest.finish();
});
</
script>
</
body>
</
html>
