OLD | NEW |
1 <!DOCTYPE> | 1 <!DOCTYPE> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <title>Test position of foreground layer when clipping</title> | 4 <title>Test position of foreground layer when clipping</title> |
5 <style type="text/css" media="screen"> | 5 <style type="text/css" media="screen"> |
6 .box { | 6 .box { |
7 position: relative; | 7 position: relative; |
8 display: inline-block; | 8 display: inline-block; |
9 margin: 60px; | 9 margin: 60px; |
10 width: 200px; | 10 width: 200px; |
(...skipping 39 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
50 z-index: 1; | 50 z-index: 1; |
51 right: -50px; | 51 right: -50px; |
52 bottom: -50px; | 52 bottom: -50px; |
53 background-color: rgba(200, 200, 128, 1); | 53 background-color: rgba(200, 200, 128, 1); |
54 } | 54 } |
55 | 55 |
56 </style> | 56 </style> |
57 </head> | 57 </head> |
58 <body> | 58 <body> |
59 | 59 |
60 <p>The layering and positions of the boxes should not be affected by oveflow:hid
den.</p> | 60 <p>The layering of the boxes should not be affected by overflow:hidden.</p> |
61 <div class="box"> | 61 <div class="box"> |
62 Box contents | 62 Box contents |
63 <div class="negative child"> | 63 <div class="negative child"> |
64 Behind | 64 Behind |
65 <div class="child"> | 65 <div class="child"> |
66 Behind behind | 66 Behind behind |
67 </div> | 67 </div> |
68 </div> | 68 </div> |
69 <div class="positive child"> | 69 <div class="positive child"> |
70 In Front | 70 In Front |
71 </div> | 71 </div> |
72 </div> | 72 </div> |
73 | 73 |
74 <div class="box" style="overflow: hidden;"> | 74 <div class="box" style="overflow: hidden;"> |
75 Box contents | 75 Box contents |
76 <div class="negative child"> | 76 <div class="negative child"> |
77 Behind | 77 Behind |
78 <div class="child"> | 78 <div class="child"> |
79 Behind behind | 79 Behind behind |
80 </div> | 80 </div> |
81 </div> | 81 </div> |
82 <div class="positive child"> | 82 <div class="positive child"> |
83 In Front | 83 In Front |
84 </div> | 84 </div> |
85 </div> | 85 </div> |
86 | 86 |
87 </body> | 87 </body> |
88 </html> | 88 </html> |
OLD | NEW |