<!DOCTYPE html>
<html>
<head>
<script src="../../resources/js-test.js"></script>
<script src="../../resources/ui-helper.js"></script>
<script src="resources/hit-test-utilities.js"></script>
<style>
#test-container {
    position: absolute;
    top: 100px;
    left: 100px;
    border: 1px solid black;
    width: 200px;
    height: 200px;
}
</style>
</head>
<body>
<div id="test-container">
    <textarea style="width: 200px; height: 200px">Hello</textarea>
</div>
<script>
window.jsTestIsAsync = true;

if (window.testRunner)
    testRunner.dumpAsText();

if (window.internals)
    internals.settings.setEditableRegionEnabled(true);

async function runTest()
{
    if (!window.testRunner) {
        testFailed("Must be run in WebKitTestRunner.");
        return;
    }

    let testContainer = document.getElementById("test-container");
    let textarea = document.querySelector("textarea");
    // Textarea is positioned relative to test-container. So, use container's offsets.
    await shouldHaveEditableElementsInRect(testContainer.offsetLeft, testContainer.offsetTop + 100, 50, 50);

    document.body.removeChild(testContainer);
    finishJSTest();
}

description("Tests that the &lt;textarea&gt; is hit even though the rect is over an empty portion of it.");
runTest();
</script>
</body>
</html>