<!DOCTYPE html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<style>
#left {
    float: left;
    width: 500px;
    background: rgba(200, 200, 200, 0.8);
    margin-right: -100px;
}
#left:hover {
    background: rgb(200, 200, 200);
}
#right {
    float: right;
    width: 400px;
    background-color: rgba(0, 128, 0, 0.8);
    padding-bottom: 1px;
}
#right:hover {
    background: rgb(0, 128, 0);
}
</style>
<div style="width: 800px;">
    <div id="left">foo</div>
    <div id="right">bar</div>
    <div style="height:0px; width:0px; clear:left;"></div>
</div>
<div id="log"></div>
<script>
test(function(t)
{
    var rightElement = document.getElementById("right");
    var x = rightElement.offsetLeft + 10;
    var y = rightElement.offsetTop + rightElement.offsetHeight / 2;

    var element = document.elementFromPoint(x, y);
    assert_equals(element.nodeName, 'DIV');
    assert_equals(element.id, 'right');
}, "elementFromPoint should return the topmost floating element when two floats overlap");
</script>