overlapping-floats-paint-hittest-order-1.html

<!DOCTYPE html>
<style>body { margin: 0 }</style>
<div style="float: left; width: 100%; background-color: yellow">
  <div style="margin-left: 200px">
    <div>Blah blah blah.</div>
    <div>Blah blah blah.</div>
  </div>
</div>
<div>
  <div style="float: left; width: 150px; margin-left: -100%; background-color: green">
    <div><a id="link1" onclick="clicked(event)" href="#">Link1</a></div>
    <div><a id="link2" onclick="clicked(event)" href="#">Link2</a></div>
    <div><a id="link3" onclick="clicked(event)" href="#">Link3</a></div>
    <div><a id="link4" onclick="clicked(event)" href="#">Link4</a></div>
  </div>
</div>
<div style="clear: both">
Tests paint and hit-testing order of overlapping float objects using negative margin.
Passes if the green layer (containing 4 links) is full visible and all of the links can be clicked.
</div>
<div id="result"></div>
<script>
function clicked(event)
{
  event.target.clicked = true;
  event.preventDefault();
}

if (window.eventSender) {
  var failed = false;
  for (var i = 1; i <= 4; ++i) {
    var link = document.getElementById('link' + i);
    eventSender.mouseMoveTo(link.offsetLeft + 10, link.offsetTop + 5);
    eventSender.mouseDown();
    eventSender.mouseUp();
    if (!link.clicked) {
      failed = true;
      break;
    }
  }
  if (!failed)
    document.getElementById('result').textContent = 'PASS';
}
</script>
chromium/third_party/blink/web_tests/fast/block/float/overlapping-floats-paint-hittest-order-1.html
