overflow-clip-hit-testing.html (1524B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>Overflow: clip hit testing doesn't include overflow: clip</title> 4 <link rel="help" href="https://www.w3.org/TR/css-overflow-3/#valdef-overflow-clip"> 5 <link rel="author" title="Scott Violet" href="mailto:sky@chromium.org"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <style> 9 .parent { 10 width: 100px; 11 height: 100px; 12 flex: none; 13 } 14 15 .child1, .child2 { 16 width: 100px; 17 height: 100px; 18 flex: none; 19 } 20 21 .child1 { 22 background-color: green; 23 } 24 25 .child2 { 26 background-color: red; 27 } 28 </style> 29 <div class="parent" style="display: flex; overflow-x: visible; overflow-y: clip"> 30 <div id="c1" class="child1"></div> 31 <div id="hit1" class="child2"></div> 32 </div> 33 <div class="parent" style="overflow-x: clip; overflow-y: visible"> 34 <div id="c2" class="child1"></div> 35 <div id="hit2" class="child2"></div> 36 </div> 37 38 <script> 39 test(() => { 40 var c1Bounds = document.getElementById("c1").getBoundingClientRect(); 41 var hitElement = document.elementFromPoint(c1Bounds.x + 150, 42 c1Bounds.y + 50); 43 assert_equals(hitElement.id, "hit1"); 44 45 var c2Bounds = document.getElementById("c2").getBoundingClientRect(); 46 hitElement = document.elementFromPoint(c2Bounds.x + 50, 47 c2Bounds.y + 150); 48 assert_equals(hitElement.id, "hit2"); 49 }, "Ensure elements in overflow:visible are returned from elementFromPoint"); 50 </script>