relpos-inline-hit-testing.html (1488B)
1 <!DOCTYPE html> 2 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 3 <link rel="help" href="https://www.w3.org/TR/css-break-3/#transforms"> 4 <link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#relative-positioning"> 5 <style> 6 body { 7 margin: 8px; 8 } 9 #target { 10 position: relative; 11 left: -100px; 12 top: 100px; 13 border: 1px solid; 14 background: hotpink; 15 } 16 </style> 17 <div style="columns:4; column-gap:0; column-fill:auto; line-height:30px; width:600px; height:60px; orphans:1; widows:1;"> 18 <br><br><br> 19 <span id="target"> 20 line1<br> 21 line2<br> 22 line3<br> 23 line4<br> 24 </span> 25 </div> 26 <div id="log" style="margin-top:100px;"></div> 27 <script src="/resources/testharness.js"></script> 28 <script src="/resources/testharnessreport.js"></script> 29 <script> 30 test(()=> { assert_equals(document.elementFromPoint(58, 153), target); }, "line1"); 31 test(()=> { assert_equals(document.elementFromPoint(208, 123), target); }, "line2"); 32 test(()=> { assert_equals(document.elementFromPoint(208, 153), target); }, "line3"); 33 test(()=> { assert_equals(document.elementFromPoint(358, 123), target); }, "line4"); 34 test(()=> { assert_not_equals(document.elementFromPoint(58, 123), target); }, "Above line1"); 35 test(()=> { assert_not_equals(document.elementFromPoint(358, 153), target); }, "Below line4"); 36 test(()=> { assert_not_equals(document.elementFromPoint(158, 48), target); }, "line1 before offsetting"); 37 </script>