<!DOCTYPE html>
<html>
<head>
<script src="../../resources/js-test-pre.js"></script>
<script>
var x, y;

function offset(elem) {
    var result = {top: 0, left: 0};
    for (; elem; elem = elem.offsetParent) {
        result.left += elem.offsetLeft;
        result.top += elem.offsetTop;
    }
    return result;
}

function test() {
    var innerBox = document.getElementById('innerBox');
    x = offset(innerBox).left;
    y = offset(innerBox).top;
    shouldBe("document.elementFromPoint(x + 5, y - 5).id", "'outerBox'");
    shouldBe("document.elementFromPoint(x + 5, y + 5).id", "'innerBox'");
    shouldBe("document.elementFromPoint(x + 5, y + 95).id", "'innerBox'");
    shouldBe("document.elementFromPoint(x + 5, y + 105).id", "'outerBox'");
    shouldBe("document.elementFromPoint(x + 95, y - 5).id", "'outerBox'");
    shouldBe("document.elementFromPoint(x + 95, y + 5).id", "'innerBox'");
    shouldBe("document.elementFromPoint(x + 95, y + 95).id", "'innerBox'");
    shouldBe("document.elementFromPoint(x + 95, y + 105).id", "'outerBox'");
    shouldBe("document.elementFromPoint(x + 105, y - 5).id", "'container'");
    shouldBe("document.elementFromPoint(x + 105, y + 5).id", "'innerBox'");
    shouldBe("document.elementFromPoint(x + 105, y + 95).id", "'innerBox'");
    shouldBe("document.elementFromPoint(x + 105, y + 105).id", "'container'");
    shouldBe("document.elementFromPoint(x + 195, y - 5).id", "'container'");
    shouldBe("document.elementFromPoint(x + 195, y + 5).id", "'innerBox'");
    shouldBe("document.elementFromPoint(x + 195, y + 95).id", "'innerBox'");
    shouldBe("document.elementFromPoint(x + 195, y + 105).id", "'container'");
    isSuccessfullyParsed();
}
</script>
<style>
    #container {
        padding: 100px 150px 100px 50px;
        width: 200px; height: 200px;
        background-color: lightgray;
    }
    #outerBox {
        width: 100px; height: 100px;
        padding: 50px 0 50px 100px;
        border-radius: 10px;
        background-color: lightgreen;
    }
    #innerBox {
        width: 200px; height: 100px;
        background-color: green;
    }
</style>
</head>
<body onload="test()">
    <p>Test for <i>bug 113591</i>: <a href="https://bugs.webkit.org/show_bug.cgi?id=113591">https://bugs.webkit.org/show_bug.cgi?id=113591</a> REGRESSION (r145870): Can't get insertion point to appear in some input and textareas on wordpress</p>
    <div id="container">
        <div id="outerBox">
            <div id="innerBox"></div>
        </div>
    </div>
    <div id="console"></div>
</body>
</html>