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 |