hit-test-transformed.html (2531B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://www.w3.org/TR/css-break-3/#transforms"> 3 <style> 4 body { margin: 0; } 5 *:hover { background: lime !important; } 6 </style> 7 <div id="multicol" style="columns:4; column-gap:0; column-fill:auto; width:400px; height:100px; background: yellow"> 8 <div id="before" style="height: 50px; background: gray"></div> 9 <div id="transform" style="transform: translateY(20px)"> 10 <div id="target1" style="height: 100px; background: green"></div> 11 <div id="target2" style="height: 200px; background: blue"></div> 12 </div> 13 <div id="after" style="height: 50px; background: gray"></div> 14 </div> 15 <div id="log" style="margin-top:100px;"></div> 16 <script src="/resources/testharness.js"></script> 17 <script src="/resources/testharnessreport.js"></script> 18 <script> 19 test(()=> { assert_equals(document.elementFromPoint(50, 40), before); }, "before"); 20 test(()=> { assert_equals(document.elementFromPoint(50, 60), multicol); }, "between before and transform"); 21 test(()=> { assert_equals(document.elementFromPoint(50, 80), target1); }, "target1"); 22 test(()=> { assert_equals(document.elementFromPoint(50, 110), target1); }, "target1 overflow"); 23 test(()=> { assert_equals(document.elementFromPoint(150, 10), multicol); }, "top gap in column 2"); 24 test(()=> { assert_equals(document.elementFromPoint(150, 30), target1); }, "target1 in column 2 top"); 25 test(()=> { assert_equals(document.elementFromPoint(150, 60), target1); }, "target1 in column 2 bottom"); 26 test(()=> { assert_equals(document.elementFromPoint(150, 80), target2); }, "target2 in column 2"); 27 test(()=> { assert_equals(document.elementFromPoint(150, 110), target2); }, "target2 in column 2 overflow"); 28 test(()=> { assert_equals(document.elementFromPoint(250, 10), multicol); }, "top gap in column 3"); 29 test(()=> { assert_equals(document.elementFromPoint(250, 30), target2); }, "target2 in column 3 top"); 30 test(()=> { assert_equals(document.elementFromPoint(250, 110), target2); }, "target2 in column 3 bottom"); 31 test(()=> { assert_equals(document.elementFromPoint(350, 10), multicol); }, "top gap in column 4"); 32 test(()=> { assert_equals(document.elementFromPoint(350, 30), target2); }, "target2 in column 4 top"); 33 test(()=> { assert_equals(document.elementFromPoint(350, 60), target2); }, "target2 in column 4 bottom"); 34 test(()=> { assert_equals(document.elementFromPoint(350, 80), after); }, "after"); 35 test(()=> { assert_equals(document.elementFromPoint(350, 110), document.documentElement); }, "below"); 36 </script>