editing/inserting/caret-position.html

<html>
<head>
<script src=../editing.js language="JavaScript" type="text/JavaScript" ></script>
<script>

function log(str) {
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(str));
    var console = document.getElementById("console");
    console.appendChild(li);
}

function assertEqual(test_name, actual, expected)
{
    if (actual != expected) {
        log("==================================");
        log("FAILED: " + test_name);
        log("actual: " + actual);
        log("expected: " + expected);
    }
}
function testCaretPosition(elementId, caretPosition)
{
    e = document.getElementById(elementId, caretPosition);
    e.focus();
    if (window.textInputController) {
        var caretRect = textInputController.firstRectForCharacterRange(0, 0);
        assertEqual(elementId, caretRect[0], caretPosition);
    }  
}

function runTest()
{
    if (window.testRunner)
        testRunner.dumpAsText();
    var e = document.getElementById("right-align-div");
    e.focus();
    selectAllCommand();
    typeCharacterCommand();
    if (window.textInputController) {
        var caretRect = textInputController.firstRectForCharacterRange(1, 0);
        assertEqual("right-align-div", caretRect[0], 208);
    }

    testCaretPosition("rtl-div", 208);
    testCaretPosition("0-right-padding-rtl-textarea", 206);
    testCaretPosition("ltr-div", 9);
    testCaretPosition("ltr-textarea", 10);
    testCaretPosition("no-wrapping-right-align-div", 208);
    testCaretPosition("no-wrapping-rtl-div", 208);
    testCaretPosition("no-wrapping-0-right-padding-rtl-textarea", 206);
    testCaretPosition("no-wrapping-ltr-div", 9);
    testCaretPosition("no-wrapping-ltr-textarea", 10);
}

</script>
</head>
<body>
<br>
Right aligned div.
<br>
<div CONTENTEDITABLE id="right-align-div" style="text-align: right; width:200px; border: solid thin;"></div> 
<br>
RTL div.
<br>
<div CONTENTEDITABLE id="rtl-div" style="direction: rtl; width:200px; border: solid thin; ">a</div> 
<br>
0px right padding RTL textarea.
<br>
<textarea id="0-right-padding-rtl-textarea" style="direction:rtl; padding: 1px 0px 1px 1px; width:200px">a</textarea>
<br>
LTR div and textarea.
<br>
<div CONTENTEDITABLE id="ltr-div" style="width:200px; border: solid thin; ">a</div> 
<br>
<textarea id="ltr-textarea" style="padding: 1px 0px 1px 1px; width:200px">a</textarea>
<br>
NO WRAPPING
<br>
No wrapping right aligned div.
<br>
<div CONTENTEDITABLE id="no-wrapping-right-align-div" style="white-space:nowrap; text-align: right; width:200px; border: solid thin;"></div> 
<br>
No wrapping RTL div.
<br>
<div CONTENTEDITABLE id="no-wrapping-rtl-div" style="white-space:nowrap; direction: rtl; width:200px; border: solid thin; ">a</div> 
<br>
No wrapping 0px right padding RTL textarea.
<br>
<textarea id="no-wrapping-0-right-padding-rtl-textarea" style="white-space:nowrap; direction:rtl; padding: 1px 0px 1px 1px; width:200px">a</textarea>
<br>
No wrapping LTR div and textarea.
<br>
<div CONTENTEDITABLE id="no-wrapping-ltr-div" style="white-space:nowrap; width:200px; border: solid thin; ">a</div> 
<br>
<textarea id="no-wrapping-ltr-textarea" style="white-space:nowrap; padding: 1px 0px 1px 1px; width:200px">a</textarea>
<br>
<ul id="console"></ul>
</body>
<script> runTest(); </script>
</html>