<!DOCTYPE html>
<style>
#shadow
{
    overflow: hidden;
    position: absolute;
    box-shadow: 0 0 50px #000;
    height: 100px;
    width: 100px;
}
#content
{
    display: block;
    height: 200px;
    width: 200px;
    background: rgba(0,255,0,0.3);
}
</style>
<script src="../../resources/js-test.js"></script>
<script>
if (window.testRunner)
    testRunner.dumpAsText();

function click(x, y)
{
    if (window.eventSender) {
        eventSender.mouseMoveTo(x, y);
        eventSender.mouseDown();
        eventSender.mouseUp();
    }
}

function test(name, fn)
{
    debug("<br>" + name);
    fn();
}

description("This test checks that div block should not get events on clicking the shadow outside div block.");

function runTests()
{

    test("Focus should remain in the textarea", function() {
        var textarea = document.getElementById("content");
        var rect = textarea.getBoundingClientRect();
        click(rect.left + 5, rect.top + 5);
        shouldBeEqualToString("document.activeElement.tagName", "TEXTAREA");
    });

    // Click on the shadow at right of the div block. 
    test("Focus should move to the body", function() {
        var shadow = document.getElementById("shadow");
        var rect = shadow.getBoundingClientRect();
        var x = rect.left + shadow.offsetWidth + 5;
        var y = rect.top + 5;
        click(x, y);
        shouldBeEqualToString("document.activeElement.tagName", "BODY");
    });

    // Focus on the textarea to prepare for the next test.
    test("Focus should remain in the textarea", function() {
        var textarea = document.getElementById("content");
        var rect = textarea.getBoundingClientRect();
        click(rect.left + 5, rect.top + 5);
        shouldBeEqualToString("document.activeElement.tagName", "TEXTAREA");
    });

    // Click on the shadow at bottom of the div block. 
    test("Focus should move to the body", function() {
        var shadow = document.getElementById("shadow");
        var rect = shadow.getBoundingClientRect();
        var x = rect.left + 5;
        var y = rect.top + shadow.offsetHeight + 5;
        click(x, y);
        shouldBeEqualToString("document.activeElement.tagName", "BODY");
    });

}
</script>

<body onload="runTests();">
<div id="shadow">
    <textarea id="content"></textarea>
</div>
</body>