| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| .editable { |
| border-width: 0px; |
| margin: 0px; |
| padding: 0px; |
| font-size: 10px; |
| } |
| </style> |
| <script src="../../resources/js-test-pre.js"></script> |
| <script> |
| |
| var succeed = true; |
| |
| function runTest() |
| { |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| // The 2nd parameter 22 is the last character in textarea with id "textarea_rtl". |
| testCaretRect("textarea_rtl", 22, "rtl", "horizontal"); |
| // 6 is the last character in textarea with id "textarea_ltr". |
| testCaretRect("textarea_ltr", 6, "ltr", "horizontal"); |
| // 22 is the last character in "vertical_rl" div. |
| testCaretRect("vertical_rl", 22, "rtl", "vertical"); |
| |
| if (succeed == true) |
| testPassed(''); |
| } |
| |
| function setFont(e) |
| { |
| e.style.fontFamily = "sans-serif"; |
| e.style.fontSize = 10 + "px"; |
| } |
| |
| function testCaretRect(id, characterIndex, direction, writingMode) |
| { |
| var e = document.getElementById("span_" + id); |
| setFont(e); |
| |
| var length; |
| if (writingMode == "horizontal") |
| length = e.offsetWidth; |
| else |
| length = e.offsetHeight; |
| |
| e.style.visibility = "hidden"; |
| |
| testCaretRectInTextArea(id, length, characterIndex, direction, writingMode); |
| testCaretRectInTextArea(id + "_no_wrap", length, characterIndex, direction, writingMode); |
| } |
| |
| function testCaretRectInTextArea(id, length, characterIndex, direction, writingMode) |
| { |
| e = document.getElementById(id); |
| if (e == null) |
| return; |
| |
| setFont(e); |
| |
| var originalLength = length; |
| if (id.match("_no_wrap")) |
| length = parseInt(length * 0.9); |
| |
| if (writingMode == "horizontal") |
| e.style.width = length + "px"; |
| else |
| e.style.height = length + "px"; |
| |
| e.focus(); |
| |
| if (window.textInputController) { |
| var first = caretRectForCharacter(0, writingMode); |
| var last = caretRectForCharacter(characterIndex, writingMode); |
| |
| var caretRange; |
| if (direction == "rtl") |
| caretRange = first - last; |
| else |
| caretRange = last - first; |
| caretRange = Math.abs(caretRange); |
| |
| if (caretRange != originalLength - 1) { |
| succeed = false; |
| --originalLength; |
| testFailed("test id: " + id + " (text width: " + originalLength + " != caretRange: " + caretRange + ")," + |
| " which means moving caret in the text, caret might be invisible or overlap with element."); |
| } |
| } |
| e.style.visibility = "hidden"; |
| } |
| |
| |
| function caretRectForCharacter(characterIndex, writingMode) |
| { |
| var caretRect = textInputController.firstRectForCharacterRange(characterIndex, 0); |
| if (writingMode == "horizontal") |
| return caretRect[0]; |
| return caretRect[1]; |
| } |
| </script> |
| </head> |
| |
| <body> |
| <!-- Following <div>/<span> is for width calculation --> |
| <div class="editable"><span id="span_textarea_rtl" class="editable" dir="rtl">דגלחכ גדכ לחידגכ יחעדד</span></div> |
| |
| <p>autowrap text area with dir=rtl. |
| <textarea id="textarea_rtl" style="font-size:10px;" dir="rtl">דגלחכ גדכ לחידגכ יחעדד</textarea> |
| |
| <p>nowrap text area with dir=rtl. |
| <!-- caret position overlaps with character (http://webkit.org/b/56854) --> |
| <textarea id="textarea_rtl_no_wrap" style="white-space:nowrap; font-size: 10px" dir="rtl">דגלחכ גדכ לחידגכ יחעדד</textarea> |
| |
| <!-- Following <div>/<span> is for width calculation --> |
| <div class="editable"><pre class="editable"><span id="span_textarea_ltr" class="editable">www </span></pre></div> |
| |
| <p>autowrap text area with dir=ltr. |
| <textarea id="textarea_ltr" style="font-size:10px">www </textarea> |
| |
| <!-- Following <div>/<span> is for width calculation --> |
| <div style="-webkit-writing-mode:vertical-rl;" class="editable"><span id="span_vertical_rl" class="editable">דגלחכ גדכ לחידגכ יחעדד</span></div> |
| |
| <p>vertical text. |
| <div contenteditable id="vertical_rl" style="-webkit-writing-mode:vertical-rl;" class="editable">דגלחכ גדכ לחידגכ יחעדד</div> |
| |
| <ul id="console"></ul> |
| </body> |
| |
| <script>runTest();</script> |
| </html> |
