layout/generic/test/test_bug756984.html

   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>