| OLD | NEW |
| 1 <html> | 1 <html> |
| 2 <head> | 2 <head> |
| 3 <title>Hit test overlapping 3d elements</title> | 3 <title>Hit test overlapping 3d elements</title> |
| 4 <script src="point-mapping-helpers.js" type="text/javascript" charset="utf-8">
</script> | 4 <script src="point-mapping-helpers.js" type="text/javascript" charset="utf-8">
</script> |
| 5 | 5 |
| 6 <script type="text/javascript" charset="utf-8"> | 6 <script type="text/javascript" charset="utf-8"> |
| 7 | 7 |
| 8 function test() | 8 function test() |
| 9 { | 9 { |
| 10 dispatchEvent(285, 50, 'box2', 198, 2); | 10 dispatchEvent(285, 50, 'box2', 198, 2); |
| (...skipping 45 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 56 | 56 |
| 57 .transformed { | 57 .transformed { |
| 58 position: absolute; | 58 position: absolute; |
| 59 top: 20px; | 59 top: 20px; |
| 60 left: 30px; | 60 left: 30px; |
| 61 height: 200px; | 61 height: 200px; |
| 62 width: 200px; | 62 width: 200px; |
| 63 border: 1px solid black; | 63 border: 1px solid black; |
| 64 background-color: #AAA; | 64 background-color: #AAA; |
| 65 -webkit-box-sizing: border-box; | 65 -webkit-box-sizing: border-box; |
| 66 -webkit-transform: translateZ(50px); | 66 transform: translateZ(50px); |
| 67 } | 67 } |
| 68 | 68 |
| 69 #overlay { | 69 #overlay { |
| 70 position: absolute; | 70 position: absolute; |
| 71 height: 300px; | 71 height: 300px; |
| 72 width: 150px; | 72 width: 150px; |
| 73 background-color: rgba(0, 128, 0, 0.3); | 73 background-color: rgba(0, 128, 0, 0.3); |
| 74 -webkit-transform: translateZ(100px); | 74 transform: translateZ(100px); |
| 75 } | 75 } |
| 76 | 76 |
| 77 .inner { | 77 .inner { |
| 78 position: relative; | 78 position: relative; |
| 79 background-color: blue; | 79 background-color: blue; |
| 80 height: 100px; | 80 height: 100px; |
| 81 width: 100px; | 81 width: 100px; |
| 82 margin: 50px; | 82 margin: 50px; |
| 83 } | 83 } |
| 84 | 84 |
| (...skipping 23 matching lines...) Expand all Loading... |
| 108 </div> | 108 </div> |
| 109 </div> | 109 </div> |
| 110 <div id="overlay"></div> | 110 <div id="overlay"></div> |
| 111 </div> | 111 </div> |
| 112 <p>The green overlay is translated in Z by 100px, so should hit test in front re
lative to the blue box.</p> | 112 <p>The green overlay is translated in Z by 100px, so should hit test in front re
lative to the blue box.</p> |
| 113 | 113 |
| 114 <div id="mousepos"></div> | 114 <div id="mousepos"></div> |
| 115 | 115 |
| 116 </body> | 116 </body> |
| 117 </html> | 117 </html> |
| OLD | NEW |