<style>
    #target { width: 50px; height: 50px; background-color: green; margin: 10px; }
</style>
<p>
    Test for hit-testing of floats inside CSS Regions.
</p>
<div style="position:relative; margin: 100px; width: 300px; height: 200px; outline: solid black;">
    <div style="position:absolute;left:0;top:0; -webkit-flow-from: flow; width:150px;height:200px;"></div>
    <div style="position:absolute;left:150px;top:0; -webkit-flow-from: flow; width:150px;height:200px"></div>
    <div style="-webkit-flow-into: flow">
        <div style="height: 250px; background-color: purple;"></div>
        <div style="float: right; background-color: lightyellow; margin: 5px;">
            <div id="target"></div>
        </div>
    </div>
</div>
<div id="result">FAIL: Test did not run.</div>
<script>
    if (window.testRunner)
        testRunner.dumpAsText();

    var result = document.getElementById("result");
    var hitElement = document.elementFromPoint(370, 230);
    if (hitElement === document.getElementById("target"))
        result.innerText = "PASS";
    else
        result.innerText = "FAIL: Hit " + hitElement;
</script>