block-in-inline-hittest-margin.html (898B)
1 <!DOCTYPE html> 2 <!DOCTYPE html> 3 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level"> 4 <link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-document-elementfrompoint"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 .target { 9 background: blue; 10 width: 100px; 11 height: 100px; 12 margin: 100px; 13 } 14 </style> 15 <body> 16 <a href="#"> 17 <div class="target"></div> 18 </a> 19 <script> 20 const root = document.body; 21 const target = root.querySelector('.target'); 22 const target_bounds = target.getBoundingClientRect(); 23 const x = target_bounds.x - 20; // "-20" for the margin area. 24 const y = target_bounds.y + target_bounds.height / 2; 25 const result = document.elementFromPoint(x, y); 26 const a = root.querySelector('a'); 27 test(() => { 28 assert_equals(result, a); 29 }, target.style.cssText); 30 </script> 31 </body>