hittest-overlapping-order.html (1327B)
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 order: 0; 18 } 19 20 #right { 21 width: 300px; 22 background-color: rgba(0, 128, 0, 0.8); 23 margin-left: -100px; 24 order: 1; 25 } 26 </style> 27 <div id="container"> 28 <div id="right"></div> 29 <a id="left" 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, 'right'); 44 }, "Flexboxes should perform hit testing in reverse paint order for overlapping elements: flex order case (crbug.com/844505)"); 45 </script>