<!DOCTYPE html>
<html>
<head>
<style>
.editable {
border-width: 0px;
margin: 0px;
padding: 0px;
font-size: 10px;
}
</style>
<script src="../../resources/js-test.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 || caretRange < originalLength - 2) {
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>
Codebase Browser
chromium