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