<!doctype html>
<html>
<head>
<script src="../resources/js-test.js"></script>
<style>
span {
    background-color: lightgray;
    border-radius: 2em;
    padding: 1em;
    line-height: 4em;
}

label {
    padding: 2em;
    background-color: lightgreen;
    border-radius: 2em;
}

div {
    margin: 2em;
}
</style>
</head>
<body>
<div>
<span id="A">
Two lines with <br/>a hard line break.
</span>
</div>
<div>
<span id="B">B<label id="C">C</label></span>
</div>
<div>
<span id="D" style="padding: 2em;">D<label id="E" style="padding: 1em;">E</label></span>
</div>
<div id="console"></div>
</body>
<script>
description('If this test passes, area outside border radius is body element.');

var rects = document.getElementById('A').getClientRects();
var elementInTopLeftCorner = document.elementFromPoint(rects[0].left, rects[0].top);
shouldBeEqualToString('elementInTopLeftCorner.nodeName', 'DIV');
elementInTopLeftCorner = document.elementFromPoint(rects[1].left, rects[1].top);
shouldBeEqualToString('elementInTopLeftCorner.nodeName', 'SPAN');

var rect = document.getElementById('B').getBoundingClientRect();
elementInTopLeftCorner = document.elementFromPoint(rect.left, rect.top);
shouldBeEqualToString('elementInTopLeftCorner.nodeName', 'DIV');

rect = document.getElementById('C').getBoundingClientRect();
elementInTopLeftCorner = document.elementFromPoint(rect.left, rect.top);
shouldBeEqualToString('elementInTopLeftCorner.nodeName', 'BODY');

rect = document.getElementById('D').getBoundingClientRect();
elementInTopLeftCorner = document.elementFromPoint(rect.left, rect.top);
shouldBeEqualToString('elementInTopLeftCorner.nodeName', 'BODY');

rect = document.getElementById('E').getBoundingClientRect();
elementInTopLeftCorner = document.elementFromPoint(rect.left, rect.top);
shouldBeEqualToString('elementInTopLeftCorner.nodeName', 'SPAN');
</script>
</html>