<!-- 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>