transform-scale-hittest.html (1109B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-scale"> 3 <link rel="help" href="http://www.w3.org/TR/cssom-view/#extensions-to-the-document-interface"> 4 <link rel="help" href="https://crbug.com/1015801"> 5 <link rel="author" title="Xiaocheng Hu" href="mailto:xiaochengh@chromium.org"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <style> 9 #normal { 10 width: 100px; 11 height: 10px; 12 position: absolute; 13 top: 0px; 14 } 15 16 #scaled { 17 width: 1px; 18 height: 1px; 19 transform: scaleX(100) scaleY(100); 20 transform-origin: 0px 0px; 21 position: absolute; 22 top: 10px; 23 z-index: 1; /* Hit test #scaled before #normal */ 24 } 25 </style> 26 <div id=normal></div> 27 <div id=scaled></div> 28 <script> 29 test(() => { 30 const result = document.elementFromPoint(50, 9); 31 assert_equals(result, document.getElementById('normal')); 32 }, 'Hit test within unscaled box'); 33 34 test(() => { 35 const result = document.elementFromPoint(50, 10); 36 assert_equals(result, document.getElementById('scaled')); 37 }, 'Hit test intersecting scaled box'); 38 </script>