<html>
<head>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>

function testLtrCaretPosition(elementId, caretPosition) {
  test(() => {
    assert_own_property(window, 'textInputController');
    e = document.getElementById(elementId);
    e.focus();
    var caretRect = textInputController.firstRectForCharacterRange(0, 0);
    assert_equals(caretRect[0], caretPosition);
  }, `${elementId} ${caretPosition}`);
}

function testRtlCaretPosition(elementId, caretPosition) {
  test(() => {
    assert_own_property(window, 'textInputController');
    e = document.getElementById(elementId);
    e.focus();
    // Asserts the visual location of the text's right edge, whose logical
    // offset differs with the bidi caret affinity flag.
    var caretOffset = internals.runtimeFlags.bidiCaretAffinityEnabled ? 1 : 0;
    var caretRect = textInputController.firstRectForCharacterRange(caretOffset, 0);
    assert_equals(caretRect[0], caretPosition);
  }, `${elementId} ${caretPosition}`);
}

function runTest() {
  test(() => {
    assert_own_property(window, 'textInputController');
    var e = document.getElementById("right-align-div");
    e.focus();
    document.execCommand('selectAll');
    document.execCommand('insertText', false, 'x');
    var caretRect = textInputController.firstRectForCharacterRange(1, 0);
    assert_equals(caretRect[0], 208);
  }, 'right-align-div 208 after typing');

  testRtlCaretPosition("rtl-div", 208);
  testRtlCaretPosition("0-right-padding-rtl-textarea", 206);
  testLtrCaretPosition("ltr-div", 9);
  testLtrCaretPosition("ltr-textarea", 10);
  testLtrCaretPosition("no-wrapping-right-align-div", 208);
  testRtlCaretPosition("no-wrapping-rtl-div", 208);
  testRtlCaretPosition("no-wrapping-0-right-padding-rtl-textarea", 206);
  testLtrCaretPosition("no-wrapping-ltr-div", 9);
  testLtrCaretPosition("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>