<!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>