hittest-overlapping-margin.html (1308B)
1 <!DOCTYPE html> 2 <link rel="author" title="Andrew Comminos" href="mailto:acomminos@fb.com" /> 3 <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#painting" /> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 #container { 8 width: 600px; 9 display: flex; 10 } 11 12 #left { 13 width: 300px; 14 overflow: hidden; 15 white-space: nowrap; 16 background: rgba(200, 200, 200, 0.8); 17 } 18 19 #right { 20 width: 300px; 21 background-color: rgba(0, 128, 0, 0.8); 22 margin-left: -100px; 23 } 24 </style> 25 <div id="container"> 26 <a id="left" href="#">foofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoo</a> 27 <div id="right"></div> 28 </div> 29 <div id="log"></div> 30 <script> 31 test(function(t) 32 { 33 const container = document.querySelector('#container'); 34 // Target the intersection of the two child elements. 35 // The occluded link should not be clickable. 36 const x = container.offsetLeft + 250; 37 const y = container.offsetTop + 5; 38 39 var element = document.elementFromPoint(x, y); 40 assert_equals(element.nodeName, 'DIV'); 41 assert_equals(element.id, 'right'); 42 }, "Flexboxes should perform hit testing in reverse paint order for overlapping elements: negative margin case (crbug.com/844505)"); 43 </script>