elementFromPoint-subpixel.html (1522B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSSOM View - extensions to the Document interface</title> 5 <link rel="author" title="Xiaocheng Hu" href="mailto:xiaochengh@chromium.org"> 6 <link rel="help" href="http://www.w3.org/TR/cssom-view/#extensions-to-the-document-interface"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <style> 10 .container { 11 display: flex; 12 width: 500px; 13 height: 100px; 14 } 15 16 .map { 17 flex: 1 1 auto; 18 position: relative; 19 } 20 21 .box { 22 flex: 0 0 auto; 23 } 24 25 .child { 26 width: 183.66px; 27 } 28 </style> 29 </head> 30 <body> 31 <div class="container"> 32 <div class="map"></div> 33 <div class="box" id="box"> 34 <div class="child"></div> 35 </div> 36 </div> 37 38 <script> 39 const box = document.getElementById('box'); 40 const rect = box.getBoundingClientRect(); 41 42 test(() => { 43 assert_equals(document.elementFromPoint(rect.x, rect.y), box); 44 }, 'Hit test top left corner of box'); 45 46 test(() => { 47 assert_equals(document.elementFromPoint(rect.x + rect.width - 1, rect.y), box); 48 }, 'Hit test top right corner of box'); 49 50 test(() => { 51 assert_equals(document.elementFromPoint(rect.x, rect.y + rect.height - 1), box); 52 }, 'Hit test bottom left corner of box'); 53 54 test(() => { 55 assert_equals(document.elementFromPoint(rect.x + rect.width - 1, rect.y + rect.height - 1), box); 56 }, 'Hit test lower left corner of box'); 57 </script> 58 </body> 59 </html>