Move parseFontFaceDescriptor to CSSPropertyParser.cpp
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / transforms / 3d / hit-testing / overlapping-layers-hit-test.html
blobb3d7789a2ab2db7d21f4fe0b63c58a08feb78c13
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 .container {
6 position: absolute;
7 height: 200px;
8 width:200px;
9 background-color: gray;
12 .nopreserve {
13 top: 0;
14 left: 0;
17 .preserve {
18 top: 250px;
19 left: 0;
20 transform-style: preserve-3d;
23 .box {
24 width: 100%;
25 position: absolute;
26 height: 100%;
27 top: 0;
30 .red {
31 background-color: red;
32 transform: perspective( 600px ) rotateY( 45deg );
35 .blue {
36 background-color: blue;
37 transform: perspective( 600px ) rotateY( -45deg );
40 /* target1 contain points with negative z-offsets */
41 #target {
42 position: relative;
43 height: 160px;
44 width: 160px;
45 margin: 20px;
46 background-color: #DDD;
47 transform: rotate3d(0, 1, 0, -45deg);
48 transform-origin: right;
51 #description {
52 margin-top: 460px;
54 </style>
55 <script src="resources/hit-test-utils.js"></script>
56 <script>
57 const hitTestData = [
59 { 'point': [10, 100], 'target' : 'container-nopreserve' },
60 { 'point': [20, 100], 'target' : 'target2' },
61 { 'point': [80, 100], 'target' : 'target1' },
62 { 'point': [100, 100], 'target' : 'target1' },
63 { 'point': [120, 100], 'target' : 'target1' },
64 { 'point': [180, 100], 'target' : 'target1' },
65 { 'point': [190, 100], 'target' : 'container-nopreserve' },
67 { 'point': [10, 250], 'target' : 'container-preserve' },
68 { 'point': [20, 250], 'target' : 'target4' },
69 { 'point': [80, 250], 'target' : 'target4' },
70 { 'point': [100, 250], 'target' : 'target4' },
71 { 'point': [120, 250], 'target' : 'target3' },
72 { 'point': [180, 250], 'target' : 'target3' },
73 { 'point': [190, 250], 'target' : 'container-preserve' },
76 window.addEventListener('load', runTest, false);
77 </script>
78 </head>
79 <body>
81 <div id="container-nopreserve" class="container nopreserve">
82 <div id="target2" class="box red">
83 </div>
84 <div id="target1" class="box blue">
85 </div>
86 </div>
88 <div id="container-preserve" class="container preserve">
89 <div id="target3" class="box blue">
90 </div>
91 <div id="target4" class="box red">
92 </div>
93 </div>
95 <p id="description">Checks that hit testing is correct when two layers with negative z-offset overlap</p>
97 <div id="results"></div>
99 </body>
100 </html>