| <!DOCTYPE html> |
| <link rel="author" title="Andrew Comminos" href="mailto:acomminos@fb.com" /> |
| <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#painting" /> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <style> |
| #container { |
| width: 600px; |
| display: flex; |
| } |
| |
| #left { |
| position: relative; |
| width: 300px; |
| margin-right: -100px; |
| background-color: rgba(0, 128, 0, 0.8); |
| } |
| |
| #right { |
| width: 300px; |
| overflow: hidden; |
| white-space: nowrap; |
| background: rgba(200, 200, 200, 0.8); |
| } |
| |
| </style> |
| <div id="container"> |
| <div id="left"></div> |
| <a id="right" href="#">foofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoo</a> |
| </div> |
| <div id="log"></div> |
| <script> |
| test(function(t) |
| { |
| const container = document.querySelector('#container'); |
| // Target the intersection of the two child elements. |
| // The occluded link should not be clickable. |
| const x = container.offsetLeft + 250; |
| const y = container.offsetTop + 5; |
| |
| var element = document.elementFromPoint(x, y); |
| assert_equals(element.nodeName, 'DIV'); |
| assert_equals(element.id, 'left'); |
| }, "Flexboxes should perform hit testing in reverse paint order for overlapping elements: relative case (crbug.com/844505)"); |
| </script> |