test_bug756984.html (5582B)
1 <!-- 2 Important: needs to be in quirks mode for the test to work. 3 If not in quirks mode, the down and up arrow don't position as expected. 4 --> 5 <html> 6 <!-- 7 https://bugzilla.mozilla.org/show_bug.cgi?id=756984 8 --> 9 <head> 10 <meta charset="utf-8"> 11 <title>Test for Bug 756984</title> 12 <script src="/tests/SimpleTest/SimpleTest.js"></script> 13 <script src="/tests/SimpleTest/EventUtils.js"></script> 14 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 15 </head> 16 <body> 17 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=756984">Mozilla Bug 756984</a> 18 <p id="display"></p> 19 <div id="content" style="display: none"> 20 </div> 21 22 <div id="div1">123<br>45678<br></div> 23 <div id="div2"><font face="Arial">123</font><br><i>45678</i><br></div> 24 <div id="div3"><font face="Courier"><i><strong>123</strong></i></font><br><i>45678</i><br></div> 25 <div id="div4"><br>45678<br></div> 26 <div id="div5" contenteditable=true spellcheck=false>1234567890<br>abc<br>defghijklmno<br>end</div> 27 <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> 28 <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> 29 30 <pre id="test"> 31 32 <script type="application/javascript"> 33 34 /** Test for Bug 756984 */ 35 /* 36 * We test that clicking beyond the end of a line terminated with <br> selects the preceding text, if any. 37 * In a contenteditable div, we also test that getting to the end of a line via the "end" key or by using 38 * the left-arrow key from the beginning of the following line selects the text preceding the <br>. 39 */ 40 41 SimpleTest.waitForExplicitFinish(); 42 43 SimpleTest.waitForFocus(function() { 44 45 var sel = window.getSelection(); 46 var i, theDiv, selRange; 47 48 for (i = 1; i <= 3; i++) { 49 // click beyond the first line (100px to the left and 2px down), expect text 50 theDiv = document.getElementById("div" + i.toString()); 51 theDiv.focus(); 52 sel.collapse(theDiv, 0); 53 synthesizeMouse(theDiv, 100, 2, {}); 54 selRange = sel.getRangeAt(0); 55 is(selRange.endContainer.nodeName, "#text", "selection should be in text node"); 56 is(selRange.endOffset, 3, "offset should be 3"); 57 } 58 59 // click beyond the first line (100px to the left and 2px down), expect DIV. 60 // This is the previous behaviour which hasn't changed since the line is empty. 61 // If the processing were wrong, the selection would end up in some other non-empty line. 62 theDiv = document.getElementById("div4"); 63 theDiv.focus(); 64 sel.collapse(theDiv, 0); 65 synthesizeMouse(theDiv, 100, 2, {}); 66 selRange = sel.getRangeAt(0); 67 is(selRange.endContainer.nodeName, "DIV", "selection should be in DIV"); 68 is(selRange.endOffset, 0, "offset should be 0"); 69 70 // Now we do a more complex test, this time with an editable div. 71 // We have four lines: 72 // 1234567890<br> 73 // abc<br> 74 // defghijklmno<br> <!-- Note: 12 characters long. --> 75 // end 76 77 for (i = 5; i <= 7; i++) { 78 // We do these steps: 79 // 1) Click behind the first line, add "X". 80 theDiv = document.getElementById("div" + i.toString()); 81 theDiv.focus(); 82 var originalHTML = theDiv.innerHTML; 83 sel.collapse(theDiv, 0); 84 synthesizeMouse(theDiv, 100, 2, {}); 85 86 selRange = sel.getRangeAt(0); 87 is(selRange.endContainer.nodeName, "#text", "selection should be in text node (1)"); 88 is(selRange.endOffset, 10, "offset should be 10"); 89 sendString("X"); 90 91 // 2) Down arrow to the end of the second line, add "Y". 92 synthesizeKey("KEY_ArrowDown"); 93 selRange = sel.getRangeAt(0); 94 is(selRange.endContainer.nodeName, "#text", "selection should be in text node (2)"); 95 is(selRange.endOffset, 3, "offset should be 3"); 96 sendString("Y"); 97 98 // 3) Right arrow and end key to the end of the third line, add "Z". 99 synthesizeKey("KEY_ArrowRight"); 100 if (navigator.platform.indexOf("Win") == 0) { 101 synthesizeKey("KEY_End"); 102 } else { 103 // End key doesn't work as expected on Mac and Linux. 104 sel.modify("move", "right", "lineboundary"); 105 } 106 selRange = sel.getRangeAt(0); 107 is(selRange.endContainer.nodeName, "#text", "selection should be in text node (3)"); 108 is(selRange.endOffset, 12, "offset should be 12"); 109 sendString("Z"); 110 111 // 4) Up arrow to the end of the second line, add "T". 112 synthesizeKey("KEY_ArrowUp"); 113 selRange = sel.getRangeAt(0); 114 is(selRange.endContainer.nodeName, "#text", "selection should be in text node (4)"); 115 is(selRange.endOffset, 4, "offset should be 4"); 116 sendString("T"); 117 118 // 5) Left arrow six times to the end of the first line, add "A". 119 synthesizeKey("KEY_ArrowLeft", {repeat: 6}); 120 selRange = sel.getRangeAt(0); 121 is(selRange.endContainer.nodeName, "#text", "selection should be in text node (5)"); 122 is(selRange.endOffset, 11, "offset should be 11"); 123 sendString("A"); 124 125 // Check the resulting HTML. First prepare what we expect. 126 originalHTML = originalHTML.replace(/1234567890/, "1234567890XA"); 127 originalHTML = originalHTML.replace(/abc/, "abcYT"); 128 originalHTML = originalHTML.replace(/defghijklmno/, "defghijklmnoZ"); 129 var newHTML = theDiv.innerHTML; 130 is(newHTML, originalHTML, "unexpected HTML"); 131 } 132 SimpleTest.finish(); 133 }); 134 </script> 135 136 </pre> 137 </body> 138 </html>