<!DOCTYPE html>
<style>body { margin: 0 }</style>
<div>
<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 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>