diff options
Diffstat (limited to 'layout/generic/test/test_bug756984.html')
| -rw-r--r-- | layout/generic/test/test_bug756984.html | 138 |
1 files changed, 138 insertions, 0 deletions
diff --git a/layout/generic/test/test_bug756984.html b/layout/generic/test/test_bug756984.html new file mode 100644 index 0000000000..a478074db7 --- /dev/null +++ b/layout/generic/test/test_bug756984.html @@ -0,0 +1,138 @@ +<!-- + Important: needs to be in quirks mode for the test to work. + If not in quirks mode, the down and up arrow don't position as expected. +--> +<html> +<!-- +https://bugzilla.mozilla.org/show_bug.cgi?id=756984 +--> +<head> + <meta charset="utf-8"> + <title>Test for Bug 756984</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> +<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=756984">Mozilla Bug 756984</a> +<p id="display"></p> +<div id="content" style="display: none"> +</div> + +<div id="div1">123<br>45678<br></div> +<div id="div2"><font face="Arial">123</font><br><i>45678</i><br></div> +<div id="div3"><font face="Courier"><i><strong>123</strong></i></font><br><i>45678</i><br></div> +<div id="div4"><br>45678<br></div> +<div id="div5" contenteditable=true spellcheck=false>1234567890<br>abc<br>defghijklmno<br>end</div> +<div id="div6" contenteditable=true spellcheck=false><font face="Arial">1234567890</font><br><i>abc</i><br><font color="red">defghijklmno</font><br>end</div> +<div id="div7" contenteditable=true spellcheck=false><font face="Courier"><i><strong>1234567890</strong></i></font><br><i>abc</i><br><font color="red"><b>defghijklmno</b></font><br>end</div> + +<pre id="test"> + + <script type="application/javascript"> + + /** Test for Bug 756984 **/ + /* + * We test that clicking beyond the end of a line terminated with <br> selects the preceding text, if any. + * In a contenteditable div, we also test that getting to the end of a line via the "end" key or by using + * the left-arrow key from the beginning of the following line selects the text preceding the <br>. + */ + + SimpleTest.waitForExplicitFinish(); + + SimpleTest.waitForFocus(function() { + + var sel = window.getSelection(); + var i, theDiv, selRange; + + for (i = 1; i <= 3; i++) { + // click beyond the first line (100px to the left and 2px down), expect text + theDiv = document.getElementById("div" + i.toString()); + theDiv.focus(); + sel.collapse(theDiv, 0); + synthesizeMouse(theDiv, 100, 2, {}); + selRange = sel.getRangeAt(0); + is(selRange.endContainer.nodeName, "#text", "selection should be in text node"); + is(selRange.endOffset, 3, "offset should be 3"); + } + + // click beyond the first line (100px to the left and 2px down), expect DIV. + // This is the previous behaviour which hasn't changed since the line is empty. + // If the processing were wrong, the selection would end up in some other non-empty line. + theDiv = document.getElementById("div4"); + theDiv.focus(); + sel.collapse(theDiv, 0); + synthesizeMouse(theDiv, 100, 2, {}); + selRange = sel.getRangeAt(0); + is(selRange.endContainer.nodeName, "DIV", "selection should be in DIV"); + is(selRange.endOffset, 0, "offset should be 0"); + + // Now we do a more complex test, this time with an editable div. + // We have four lines: + // 1234567890<br> + // abc<br> + // defghijklmno<br> <!-- Note: 12 characters long. --> + // end + + for (i = 5; i <= 7; i++) { + // We do these steps: + // 1) Click behind the first line, add "X". + theDiv = document.getElementById("div" + i.toString()); + theDiv.focus(); + var originalHTML = theDiv.innerHTML; + sel.collapse(theDiv, 0); + synthesizeMouse(theDiv, 100, 2, {}); + + selRange = sel.getRangeAt(0); + is(selRange.endContainer.nodeName, "#text", "selection should be in text node (1)"); + is(selRange.endOffset, 10, "offset should be 10"); + sendString("X"); + + // 2) Down arrow to the end of the second line, add "Y". + synthesizeKey("KEY_ArrowDown"); + selRange = sel.getRangeAt(0); + is(selRange.endContainer.nodeName, "#text", "selection should be in text node (2)"); + is(selRange.endOffset, 3, "offset should be 3"); + sendString("Y"); + + // 3) Right arrow and end key to the end of the third line, add "Z". + synthesizeKey("KEY_ArrowRight"); + if (navigator.platform.indexOf("Win") == 0) { + synthesizeKey("KEY_End"); + } else { + // End key doesn't work as expected on Mac and Linux. + sel.modify("move", "right", "lineboundary"); + } + selRange = sel.getRangeAt(0); + is(selRange.endContainer.nodeName, "#text", "selection should be in text node (3)"); + is(selRange.endOffset, 12, "offset should be 12"); + sendString("Z"); + + // 4) Up arrow to the end of the second line, add "T". + synthesizeKey("KEY_ArrowUp"); + selRange = sel.getRangeAt(0); + is(selRange.endContainer.nodeName, "#text", "selection should be in text node (4)"); + is(selRange.endOffset, 4, "offset should be 4"); + sendString("T"); + + // 5) Left arrow six times to the end of the first line, add "A". + synthesizeKey("KEY_ArrowLeft", {repeat: 6}); + selRange = sel.getRangeAt(0); + is(selRange.endContainer.nodeName, "#text", "selection should be in text node (5)"); + is(selRange.endOffset, 11, "offset should be 11"); + sendString("A"); + + // Check the resulting HTML. First prepare what we expect. + originalHTML = originalHTML.replace(/1234567890/, "1234567890XA"); + originalHTML = originalHTML.replace(/abc/, "abcYT"); + originalHTML = originalHTML.replace(/defghijklmno/, "defghijklmnoZ"); + var newHTML = theDiv.innerHTML; + is(newHTML, originalHTML, "unexpected HTML"); + } + SimpleTest.finish(); + }); + </script> + +</pre> +</body> +</html> |