OLD | NEW |
---|---|
(Empty) | |
1 <!DOCTYPE html> | |
2 <html> | |
3 <head> | |
4 <style type="text/css"> | |
5 .container | |
6 { | |
7 position: absolute; | |
8 height: 200px; | |
9 width:200px; | |
10 background-color: gray; | |
11 } | |
12 | |
13 .nopreserve { | |
14 top: 0; | |
15 left: 0; | |
16 } | |
17 | |
18 .preserve { | |
19 top: 250px; | |
20 left: 0; | |
21 -webkit-transform-style: preserve-3d; | |
22 -moz-transform-style: preserve-3d; | |
23 } | |
Julien - ping for review
2014/01/10 13:59:54
The test is inconsistent. If you want to make it w
| |
24 | |
25 .box { | |
26 width: 100%; | |
27 position: absolute; | |
28 height: 100%; | |
29 top: 0; | |
30 } | |
31 | |
32 .red { | |
Julien - ping for review
2014/01/10 13:59:54
Weird indentation on this line.
| |
33 background-color: red; | |
34 -webkit-transform: perspective( 600px ) rotateY( 45deg ); | |
35 -moz-transform: perspective( 600px ) rotateY( 45deg ); | |
36 transform: perspective( 600px ) rotateY( 45deg ); | |
37 } | |
38 | |
39 .blue { | |
Julien - ping for review
2014/01/10 13:59:54
Same comment.
| |
40 background-color: blue; | |
41 -webkit-transform: perspective( 600px ) rotateY( -45deg ); | |
42 -moz-transform: perspective( 600px ) rotateY( -45deg ); | |
43 transform: perspective( 600px ) rotateY( -45deg ); | |
44 } | |
45 | |
46 /* target1 contain points with negative z-offsets */ | |
47 #target | |
48 { | |
49 position: relative; | |
50 height: 160px; | |
51 width: 160px; | |
52 margin: 20px; | |
53 background-color: #DDD; | |
54 -webkit-transform: rotate3d(0, 1, 0, -45deg); | |
55 -webkit-transform-origin: right; | |
56 } | |
57 | |
58 | |
59 #description { | |
60 margin-top: 460px; | |
61 } | |
62 </style> | |
63 <script src="resources/hit-test-utils.js"></script> | |
64 <script> | |
65 const hitTestData = [ | |
66 | |
67 { 'point': [10, 100], 'target' : 'container-nopreserve' }, | |
68 { 'point': [20, 100], 'target' : 'target2' }, | |
69 { 'point': [80, 100], 'target' : 'target1' }, | |
70 { 'point': [100, 100], 'target' : 'target1' }, | |
71 { 'point': [120, 100], 'target' : 'target1' }, | |
72 { 'point': [180, 100], 'target' : 'target1' }, | |
73 { 'point': [190, 100], 'target' : 'container-nopreserve' }, | |
74 | |
75 { 'point': [10, 250], 'target' : 'container-preserve' }, | |
76 { 'point': [20, 250], 'target' : 'target4' }, | |
77 { 'point': [80, 250], 'target' : 'target4' }, | |
78 { 'point': [100, 250], 'target' : 'target4' }, | |
79 { 'point': [120, 250], 'target' : 'target3' }, | |
80 { 'point': [180, 250], 'target' : 'target3' }, | |
81 { 'point': [190, 250], 'target' : 'container-preserve' }, | |
82 | |
83 ]; | |
84 window.addEventListener('load', runTest, false); | |
85 </script> | |
86 </head> | |
87 <body> | |
88 | |
89 <div id="container-nopreserve" class="container nopreserve"> | |
90 <div id="target2" class="box red"> | |
91 </div> | |
92 <div id="target1" class="box blue"> | |
93 </div> | |
94 </div> | |
95 | |
96 <div id="container-preserve" class="container preserve"> | |
97 <div id="target3" class="box blue"> | |
98 </div> | |
99 <div id="target4" class="box red"> | |
100 </div> | |
101 </div> | |
102 | |
103 <p id="description">Checks that hit testing is correct when two layers with ne gative z-offset overlap</p> | |
104 | |
105 <div id="results"></div> | |
106 | |
107 </body> | |
108 </html> | |
OLD | NEW |