OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <style type="text/css"> | 4 <style type="text/css"> |
5 .box { | 5 .box { |
6 position: relative; | 6 position: relative; |
7 display: inline-block; | 7 display: inline-block; |
8 margin: 30px; | 8 margin: 30px; |
9 width: 200px; | 9 width: 200px; |
10 height: 200px; | 10 height: 200px; |
11 -webkit-transform: translateZ(0); | 11 transform: translateZ(0); |
12 } | 12 } |
13 | 13 |
14 .main { | 14 .main { |
15 border: 40px solid black; | 15 border: 40px solid black; |
16 box-shadow: black 0 0 20px; /* Makes compositing layer larger */ | 16 box-shadow: black 0 0 20px; /* Makes compositing layer larger */ |
17 background-color: red; | 17 background-color: red; |
18 } | 18 } |
19 | 19 |
20 .child { | 20 .child { |
21 position: absolute; | 21 position: absolute; |
22 width: 150px; | 22 width: 150px; |
23 height: 150px; | 23 height: 150px; |
24 padding: 20px; | 24 padding: 20px; |
25 -webkit-transform: translateZ(1px); | 25 transform: translateZ(1px); |
26 } | 26 } |
27 | 27 |
28 .negative { | 28 .negative { |
29 z-index: -1; | 29 z-index: -1; |
30 top: 0; | 30 top: 0; |
31 left: 0; | 31 left: 0; |
32 height: 10px; | 32 height: 10px; |
33 width: 10px; | 33 width: 10px; |
34 } | 34 } |
35 | 35 |
(...skipping 41 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
77 </div> | 77 </div> |
78 | 78 |
79 <div class="main box" style="overflow: hidden;"> | 79 <div class="main box" style="overflow: hidden;"> |
80 <img> | 80 <img> |
81 <div class="negative child"></div> | 81 <div class="negative child"></div> |
82 </div> | 82 </div> |
83 | 83 |
84 <pre id="layer-tree"></pre> | 84 <pre id="layer-tree"></pre> |
85 </body> | 85 </body> |
86 </html> | 86 </html> |
OLD | NEW |