<style>
    #target { width: 50px; height: 50px; background-color: red; margin: 10px; }
    #target:hover { background-color: green; }
</style>
<p>
    Test for <i><a href="https://bugs.webkit.org/show_bug.cgi?id=44730">https://bugs.webkit.org/show_bug.cgi?id=44730</a>
    Floats inside of multicol fail to hit test</i>.
</p>
<p>
    The red square should turn green when hovered.
</p>
<div style="-webkit-columns:2; -webkit-column-fill:auto; columns:2; column-fill:auto; margin: 100; width: 300; height: 200; outline: solid black;">
    <div>
        <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, 250);
    if (hitElement === document.getElementById("target"))
        result.innerText = "PASS";
    else
        result.innerText = "FAIL: Hit " + hitElement;
</script>