caret-in-div-containing-empty-block.html

<!DOCTYPE html>
<html>
<head>
<style>
#textDiv, #horizontalDiv, #verticalDiv{
    height: 200px;
    width: 200px;
    border: 1px solid black;
}
#verticalDiv {
    -webkit-writing-mode: vertical-rl;
}
</style>
<script src="../../resources/js-test.js"></script>
<script>
function runTest() {
    description('Testcase for bug <a href="https://bugs.webkit.org/show_bug.cgi?id=108053">108053</a>: Caret is not displayed when trying to focus inside a contenteditable element containing an empty block.\nTo manually verify the issue, click inside the three boxes. A caret should be displayed for each of them.');

    if (window.internals) {
        var textDiv = document.getElementById('textDiv');
        textDiv.focus();
        textCaretRect = internals.absoluteCaretBounds(document);

        var horizontalDiv = document.getElementById('horizontalDiv');
        horizontalDiv.focus();
        horizontalCaretRect = internals.absoluteCaretBounds(document);

        var verticalDiv = document.getElementById('verticalDiv');
        verticalDiv.focus();
        verticalCaretRect = internals.absoluteCaretBounds(document);
        
        shouldBe("horizontalCaretRect.top", "textCaretRect.top");
        shouldBe("horizontalCaretRect.width", "textCaretRect.width");
        shouldBe("horizontalCaretRect.height", "textCaretRect.height");
        shouldBe("verticalCaretRect.top", "textCaretRect.left");
        shouldBe("verticalCaretRect.width", "textCaretRect.height");
        shouldBe("verticalCaretRect.height", "textCaretRect.width");

        isSuccessfullyParsed();
        
        textDiv.style.display = 'none';
        horizontalDiv.style.display = 'none';
        verticalDiv.style.display = 'none';
    }
}
</script>
</head>
<body onload="runTest();">
<div id="textDiv" contenteditable="true" style="float: left;">Some text.<p></p></div>
<div id="horizontalDiv" contenteditable="true" style="float: left;"><p></p></div>
<div id="verticalDiv" contenteditable="true"><p></p></div>
<div id="description"></div>
<div id="console"></div>
</body>
</html>
chromium/third_party/blink/web_tests/editing/selection/caret-in-div-containing-empty-block.html
