| <html> |
| <head> |
| <style> |
| body { |
| margin: 0; |
| } |
| |
| #container { |
| width: 400px; |
| height: 400px; |
| margin: 50px; |
| border: 1px solid black; |
| -webkit-perspective: 500px; |
| } |
| |
| .box { |
| position: absolute; |
| width: 200px; |
| height: 200px; |
| background-color: gray; |
| opacity: 0.75; |
| } |
| |
| #left { |
| -webkit-transform: rotateY(-75deg); |
| left: 20px; |
| top: 100px; |
| } |
| |
| #top { |
| -webkit-transform: rotateX(75deg); |
| top: 20px; |
| left: 100px; |
| } |
| |
| #right { |
| -webkit-transform: rotateY(75deg); |
| left: 180px; |
| top: 100px; |
| } |
| |
| #bottom { |
| -webkit-transform: rotateX(-75deg); |
| top: 180px; |
| left: 100px; |
| } |
| |
| .box:hover { |
| background-color: orange; |
| } |
| </style> |
| <script src="resources/hit-test-utils.js"></script> |
| <script> |
| var hitTestData = [ |
| { 'point': [170, 250], 'target' : 'left' }, |
| { 'point': [260, 170], 'target' : 'top' }, |
| { 'point': [330, 250], 'target' : 'right' }, |
| { 'point': [260, 330], 'target' : 'bottom' }, |
| { 'point': [60, 60], 'target' : 'container' }, |
| { 'point': [160, 160], 'target' : 'container' }, |
| { 'point': [190, 190], 'target' : 'container' }, |
| { 'point': [310, 310], 'target' : 'container' }, |
| ]; |
| window.addEventListener('load', runTest, false); |
| </script> |
| </head> |
| <body> |
| |
| <div id="container"> |
| <div class="box" id="left"></div> |
| <div class="box" id="top"></div> |
| <div class="box" id="right"></div> |
| <div class="box" id="bottom"></div> |
| </div> |
| |
| <div id="results"></div> |
| |
| </body> |
| </html> |
