third_party/WebKit/LayoutTests/fast/multicol/hit-test-float.html

   1 <style>
   2     #target { width: 50px; height: 50px; background-color: red; margin: 10px; }
   3     #target:hover { background-color: green; }
   4 </style>
   5 <p>
   6     Test for <i><a href="https://bugs.webkit.org/show_bug.cgi?id=44730">https://bugs.webkit.org/show_bug.cgi?id=44730</a>
   7     Floats inside of multicol fail to hit test</i>.
   8 </p>
   9 <p>
  10     The red square should turn green when hovered.
  11 </p>
  12 <div style="-webkit-columns:2; columns:2; column-fill:auto; margin: 100; width: 300; height: 200; outline: solid black;">
  13     <div>
  14         <div style="height: 250px; background-color: purple;"></div>
  15         <div style="float: right; background-color: lightyellow; margin: 5px;">
  16             <div id="target"></div>
  17         </div>
  18     </div>
  19 </div>
  20 <div id="result">FAIL: Test did not run.</div>
  21 <script>
  22     if (window.testRunner)
  23         testRunner.dumpAsText();
  24
  25     var result = document.getElementById("result");
  26     var hitElement = document.elementFromPoint(370, 250);
  27     if (hitElement === document.getElementById("target"))
  28         result.innerText = "PASS";
  29     else
  30         result.innerText = "FAIL: Hit " + hitElement;
  31 </script>