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