third_party/WebKit/LayoutTests/fast/forms/cursor-at-editable-content-boundary.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5 .editable {
   6     border-width: 0px;
   7     margin: 0px;
   8     padding: 0px;
   9     font-size: 10px;
  10 }
  11 </style>
  12 <script src="../../resources/js-test.js"></script>
  13 <script>
  14
  15 var succeed = true;
  16
  17 function runTest()
  18 {
  19     if (window.testRunner)
  20         testRunner.dumpAsText();
  21
  22     // The 2nd parameter 22 is the last character in textarea with id "textarea_rtl".
  23     testCaretRect("textarea_rtl", 22, "rtl", "horizontal");
  24     // 6 is the last character in textarea with id "textarea_ltr".
  25     testCaretRect("textarea_ltr", 6, "ltr", "horizontal");
  26     // 22 is the last character in "vertical_rl" div.
  27     testCaretRect("vertical_rl", 22, "rtl", "vertical");
  28
  29     if (succeed == true)
  30         testPassed('');
  31 }
  32
  33 function setFont(e)
  34 {
  35     e.style.fontFamily = "sans-serif";
  36     e.style.fontSize = 10 + "px";
  37 }
  38
  39 function testCaretRect(id, characterIndex, direction, writingMode)
  40 {
  41     var e = document.getElementById("span_" + id);
  42     setFont(e);
  43
  44     var length;
  45     if (writingMode == "horizontal")
  46         length = e.offsetWidth;
  47     else
  48         length = e.offsetHeight;
  49
  50     e.style.visibility = "hidden";
  51
  52     testCaretRectInTextArea(id, length, characterIndex, direction, writingMode);
  53     testCaretRectInTextArea(id + "_no_wrap", length, characterIndex, direction, writingMode);
  54 }
  55
  56 function testCaretRectInTextArea(id, length, characterIndex, direction, writingMode)
  57 {
  58     e = document.getElementById(id);
  59     if (e == null)
  60         return;
  61
  62     setFont(e);
  63
  64     var originalLength = length;
  65     if (id.match("_no_wrap"))
  66         length = parseInt(length * 0.9);
  67
  68     if (writingMode == "horizontal")
  69         e.style.width = length + "px";
  70     else
  71         e.style.height = length + "px";
  72
  73     e.focus();
  74
  75     if (window.textInputController) {
  76         var first = caretRectForCharacter(0, writingMode);
  77         var last = caretRectForCharacter(characterIndex, writingMode);
  78
  79         var caretRange;
  80         if (direction == "rtl")
  81             caretRange = first - last;
  82         else
  83             caretRange = last - first;
  84         caretRange = Math.abs(caretRange);
  85
  86         if (caretRange != originalLength - 1) {
  87             succeed = false;
  88             --originalLength;
  89             testFailed("test id: " + id + " (text width: " + originalLength + " != caretRange: " + caretRange + ")," +
  90 " which means moving caret in the text, caret might be invisible or overlap with element.");
  91         }
  92     }
  93     e.style.visibility = "hidden";
  94 }
  95
  96
  97 function caretRectForCharacter(characterIndex, writingMode)
  98 {
  99         var caretRect = textInputController.firstRectForCharacterRange(characterIndex, 0);
 100         if (writingMode == "horizontal")
 101             return caretRect[0];
 102         return caretRect[1];
 103 }
 104 </script>
 105 </head>
 106
 107 <body>
 108 <!-- Following <div>/<span> is for width calculation -->
 109 <div class="editable"><span id="span_textarea_rtl" class="editable" dir="rtl">&#1491;&#1490;&#1500;&#1495;&#1499; &#1490;&#1491;&#1499; &#1500;&#1495;&#1497;&#1491;&#1490;&#1499; &#1497;&#1495;&#1506;&#1491;&#1491;</span></div>
 110
 111 <p>autowrap text area with dir=rtl.
 112 <textarea id="textarea_rtl" style="font-size:10px;" dir="rtl">&#1491;&#1490;&#1500;&#1495;&#1499; &#1490;&#1491;&#1499; &#1500;&#1495;&#1497;&#1491;&#1490;&#1499; &#1497;&#1495;&#1506;&#1491;&#1491;</textarea>
 113
 114 <p>nowrap text area with dir=rtl.
 115 <!-- caret position overlaps with character (http://webkit.org/b/56854) -->
 116 <textarea id="textarea_rtl_no_wrap" style="white-space:nowrap; font-size: 10px" dir="rtl">&#1491;&#1490;&#1500;&#1495;&#1499; &#1490;&#1491;&#1499; &#1500;&#1495;&#1497;&#1491;&#1490;&#1499; &#1497;&#1495;&#1506;&#1491;&#1491;</textarea>
 117
 118 <!-- Following <div>/<span> is for width calculation -->
 119 <div class="editable"><pre class="editable"><span id="span_textarea_ltr" class="editable">www  </span></pre></div>
 120
 121 <p>autowrap text area with dir=ltr.
 122 <textarea id="textarea_ltr" style="font-size:10px">www   </textarea>
 123
 124 <!-- Following <div>/<span> is for width calculation -->
 125 <div style="-webkit-writing-mode:vertical-rl;" class="editable"><span id="span_vertical_rl" class="editable">&#1491;&#1490;&#1500;&#1495;&#1499; &#1490;&#1491;&#1499; &#1500;&#1495;&#1497;&#1491;&#1490;&#1499; &#1497;&#1495;&#1506;&#1491;&#1491;</span></div>
 126
 127 <p>vertical text.
 128 <div contenteditable id="vertical_rl" style="-webkit-writing-mode:vertical-rl;" class="editable">&#1491;&#1490;&#1500;&#1495;&#1499; &#1490;&#1491;&#1499; &#1500;&#1495;&#1497;&#1491;&#1490;&#1499; &#1497;&#1495;&#1506;&#1491;&#1491;</div>
 129
 130 <ul id="console"></ul>
 131 </body>
 132
 133 <script>runTest();</script>
 134 </html>