135 lines
4.5 KiB
HTML
135 lines
4.5 KiB
HTML
<!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>
|