hittest-overlapping-relative.html (1324B)
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 position: relative; 14 width: 300px; 15 margin-right: -100px; 16 background-color: rgba(0, 128, 0, 0.8); 17 } 18 19 #right { 20 width: 300px; 21 overflow: hidden; 22 white-space: nowrap; 23 background: rgba(200, 200, 200, 0.8); 24 } 25 26 </style> 27 <div id="container"> 28 <div id="left"></div> 29 <a id="right" href="#">foofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoo</a> 30 </div> 31 <div id="log"></div> 32 <script> 33 test(function(t) 34 { 35 const container = document.querySelector('#container'); 36 // Target the intersection of the two child elements. 37 // The occluded link should not be clickable. 38 const x = container.offsetLeft + 250; 39 const y = container.offsetTop + 5; 40 41 var element = document.elementFromPoint(x, y); 42 assert_equals(element.nodeName, 'DIV'); 43 assert_equals(element.id, 'left'); 44 }, "Flexboxes should perform hit testing in reverse paint order for overlapping elements: relative case (crbug.com/844505)"); 45 </script>