<!DOCTYPE html> 
<html>
<head>
<style>
.editableDiv {
    height: 200px;
    width: 200px;
    border: 1px solid black;
    -webkit-writing-mode: vertical-rl;
    font-family: ahem;
}
</style>
<script src="../../resources/js-test-pre.js"></script>
<script>
function runTest() {
    description('Testcase for bug <a href="https://bugs.webkit.org/show_bug.cgi?id=102359">102359</a>: Caret is painted horizontally in vertical writing mode when there are no visible text.');

    /* Caret rect for the empty container. */
    document.getElementById('emptyDiv').focus();
    if (window.internals)
        emptyDivCaretRect = internals.absoluteCaretBounds();
        
    /* Caret rect for am empty line. */
    document.getElementById('emptyLineDiv').focus();
    if (window.internals)
        emptyLineCaretRect = internals.absoluteCaretBounds();
        
    /* Caret rect for the container with some text. */
    document.getElementById('textDiv').focus();
    if (window.internals)
        textDivCaretRect = internals.absoluteCaretBounds();
        
    debug("The carets on the empty editable boxes should have the same orientation as that on the editable box containing some text. We thus compare the width and the height of the caret rects for verification. Width and height for all the three caret rects should be the same for the test to pass.")
    
    if (window.internals) {
        shouldBe("emptyDivCaretRect.width", "textDivCaretRect.width");
        shouldBe("emptyDivCaretRect.height", "textDivCaretRect.height");
        shouldBe("emptyLineCaretRect.width", "textDivCaretRect.width");
        shouldBe("emptyLineCaretRect.height", "textDivCaretRect.height");        
    }
    
    debug("To verify the test manually on the browser, compare the orientation of the carets in all the boxes; it should be the same for all three.");
   
    isSuccessfullyParsed();
}
</script>
</head>
<body onload="runTest();">
<div style="float: left;" contenteditable="true" class="editableDiv" id="emptyDiv"></div>
<div style="float: left;" contenteditable="true" class="editableDiv" id="emptyLineDiv"><div><br></div></div>
<div contenteditable="true" class="editableDiv" id="textDiv">this is some vertical text</div>
<div id="description"></div>
<div id="console"></div>
</body>
</html>