﻿<!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">&#1491;&#1490;&#1500;&#1495;&#1499; &#1490;&#1491;&#1499; &#1500;&#1495;&#1497;&#1491;&#1490;&#1499; &#1497;&#1495;&#1506;&#1491;&#1491;</span></div>

<p>autowrap text area with dir=rtl.
<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>

<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">&#1491;&#1490;&#1500;&#1495;&#1499; &#1490;&#1491;&#1499; &#1500;&#1495;&#1497;&#1491;&#1490;&#1499; &#1497;&#1495;&#1506;&#1491;&#1491;</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">&#1491;&#1490;&#1500;&#1495;&#1499; &#1490;&#1491;&#1499; &#1500;&#1495;&#1497;&#1491;&#1490;&#1499; &#1497;&#1495;&#1506;&#1491;&#1491;</span></div>

<p>vertical text.
<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>

<ul id="console"></ul>
</body>

<script>runTest();</script>
</html>