OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 | 2 |
3 <html> | 3 <html> |
4 <head> | 4 <head> |
5 <style type="text/css" media="screen"> | 5 <style type="text/css" media="screen"> |
6 html, body { | 6 html, body { |
7 overflow: hidden; | 7 overflow: hidden; |
8 margin: 0; | 8 margin: 0; |
9 } | 9 } |
10 | 10 |
11 .container { | 11 .container { |
12 position: absolute; | 12 position: absolute; |
13 width: 100px; | 13 width: 100px; |
14 height: 100px; | 14 height: 100px; |
15 padding: 20px; | 15 padding: 20px; |
16 z-index: 0; | 16 z-index: 0; |
17 border: 1px solid black; | 17 border: 1px solid black; |
18 } | 18 } |
19 | 19 |
20 .compositing { | 20 .compositing { |
21 position: absolute; | 21 position: absolute; |
22 top: 21px; | 22 top: 21px; |
23 left: 21px; | 23 left: 21px; |
24 width: 100px; | 24 width: 100px; |
25 height: 100px; | 25 height: 100px; |
26 -webkit-transform: translateZ(0); | 26 transform: translateZ(0); |
27 } | 27 } |
28 | 28 |
29 .test { | 29 .test { |
30 position: relative; | 30 position: relative; |
31 width: 100px; | 31 width: 100px; |
32 height: 100px; | 32 height: 100px; |
33 background-color: green; | 33 background-color: green; |
34 } | 34 } |
35 | 35 |
36 .indicator { | 36 .indicator { |
(...skipping 37 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
74 <!-- Tests with absolute positioning between the compositing layer and the ele
ment with overflow. --> | 74 <!-- Tests with absolute positioning between the compositing layer and the ele
ment with overflow. --> |
75 <!-- You should see a green square. --> | 75 <!-- You should see a green square. --> |
76 <div class="container"> | 76 <div class="container"> |
77 <div class="test"> | 77 <div class="test"> |
78 </div> | 78 </div> |
79 </div> | 79 </div> |
80 <pre id="layers">Layer tree goes here in DRT</pre> | 80 <pre id="layers">Layer tree goes here in DRT</pre> |
81 </body> | 81 </body> |
82 </html> | 82 </html> |
83 | 83 |
OLD | NEW |