block-in-inline-hittest-relpos-zindex.html (1793B)
1 <!DOCTYPE html> 2 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level"> 3 <link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-document-elementfrompoint"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 section { 8 margin-bottom: 5px; 9 } 10 .target { 11 background: blue; 12 width: 100px; 13 height: 10px; 14 } 15 </style> 16 <body> 17 <section> 18 <a href="#"> 19 <div class="target"></div> 20 </a> 21 </section> 22 <section> 23 <a href="#"> 24 <div class="target" style="z-index: 1"></div> 25 </a> 26 </section> 27 <section> 28 <a href="#"> 29 <div class="target" style="z-index: -1"></div> 30 </a> 31 </section> 32 <section> 33 <a href="#"> 34 <div class="target" style="position: relative"></div> 35 </a> 36 </section> 37 <section> 38 <a href="#"> 39 <div class="target" style="position: relative; z-index: 1"></div> 40 </a> 41 </section> 42 <section> 43 <a href="#"> 44 <div class="target" style="position: relative; z-index: -1"></div> 45 </a> 46 </section> 47 <script> 48 function isAncestorOf(target, ancestor) { 49 for (; target; target = target.parentElement) { 50 if (target === ancestor) 51 return true; 52 } 53 return false; 54 } 55 56 for (const root of document.getElementsByTagName('section')) { 57 const target = root.querySelector('.target'); 58 const target_bounds = target.getBoundingClientRect(); 59 const x = target_bounds.x + target_bounds.width / 2; 60 const y = target_bounds.y + target_bounds.height / 2; 61 const result = document.elementFromPoint(x, y); 62 const a = root.querySelector('a'); 63 test(() => { 64 // For the `<a>` link to work, the `result` must be `a` or its descendant. 65 assert_true(isAncestorOf(result, a)); 66 }, target.style.cssText); 67 } 68 </script> 69 </body>