<!DOCTYPE html> 
<html>
<head>
<title> Testcase for bug https://bugs.webkit.org/show_bug.cgi?id=89649 </title>
<style>
@font-face {
    font-family:ahem;
    src: url(../../resources/Ahem.ttf);
}
.editableDiv {
    overflow:auto;
    height:50px;
    width:500px;
    word-wrap:normal;
    font-family:ahem;
}
</style>
<script src="../../resources/js-test-pre.js"></script>
<script>
function runTest() {
    description('Testcase for bug <a href="http://www.webkit.org/b/89649">http://www.webkit.org/b/89649</a>. \
The test case checks if caret is drawn properly(especially scrolls properly) inside a editable container having word-wrap:normal.');

    editableContainer = document.getElementById('test');
    editableContainer.focus();
    if (window.internals)
        startCaretRect = internals.absoluteCaretBounds();

    window.getSelection().setPosition(editableContainer,0);
    if (window.testRunner)
        testRunner.execCommand('MoveToEndOfLine');

    finalCaretRect = {right:-1,left:-1};
    if (window.internals)
        finalCaretRect = internals.absoluteCaretBounds();

    caretWidth = finalCaretRect.right - finalCaretRect.left;

    debug('To manually test, move the caret to the end of the line. \nThe content must scroll for the caret to reach the end of the editable text.');
    shouldBeTrue("editableContainer.scrollLeft > 0");

    debug('<br>Final caret rect is calculated by following constraints');
    debug('1) ScrollWidth = text content width + caret width');
    debug('2) Caret rect is always within container bounding box (thus substracting the scroll left)');
    shouldBe("startCaretRect.left + editableContainer.scrollWidth - editableContainer.scrollLeft - caretWidth", "finalCaretRect.right");
    
    document.body.removeChild(editableContainer);
    isSuccessfullyParsed();
 }
</script>
</head>
<body onload="runTest();">
 <div id="test" contenteditable="true" class="editableDiv" >
  SOMEFILLERTEXTSOMEFILLERTEXTSOMEFILLERFILLERSFILLERSFILLERSFILLERSFILLERS
 </div>
 <div id="description"></div>
 <div id="console"></div>
</body>
</html>