| <html> |
| <head> |
| <style> |
| body { |
| margin: 0; |
| } |
| |
| #canvas { |
| width: 200px; |
| height: 200px; |
| position: relative; |
| background-color: silver; |
| transform: translateZ(0px); |
| } |
| |
| #container { |
| left: 0px; |
| top: 0px; |
| z-index: 1; |
| border: 2px solid green; |
| transform: translateZ(0px); |
| } |
| |
| .box { |
| position: absolute; |
| height: 100px; |
| width: 100px; |
| } |
| |
| #target { |
| left: 50px; |
| top: 50px; |
| background-color: blue; |
| cursor: pointer; |
| } |
| |
| .box:hover { |
| background-color: orange !important; |
| } |
| #results { |
| margin: 10px; |
| } |
| </style> |
| <script src="resources/hit-test-utils.js"></script> |
| <script> |
| const hitTestData = [ |
| { 'point': [48, 48], 'target' : 'container' }, |
| { 'point': [75, 75], 'target' : 'target' }, |
| { 'point': [100, 100], 'target' : 'target' }, |
| { 'point': [125, 125], 'target' : 'target' }, |
| ]; |
| window.addEventListener('load', runTest, false); |
| </script> |
| </head> |
| <body> |
| <div id="canvas"> |
| <div id="container" class="box"> |
| <div id="target" class="box"> |
| </div> |
| </div> |
| </div> |
| <div id="results"></div> |
| </body> |
| </html> |
