Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / compositing / geometry / clipping-foreground.html
blobb15b423f219a89b02f30bceda59c434ff217e236
1 <!DOCTYPE>
2 <html>
3 <head>
4 <title>Test position of foreground layer when clipping</title>
5 <style type="text/css" media="screen">
6 .box {
7 position: relative;
8 display: inline-block;
9 margin: 60px;
10 width: 200px;
11 height: 200px;
12 border:10px solid black;
13 color: blue;
14 padding: 20px;
15 -webkit-box-sizing: border-box;
16 -webkit-box-shadow: black 0 0 10px;
17 background-color:rgba(255, 255, 255, 0.8);
18 font-size: 220%;
19 font-weight: bold;
20 transform: translateZ(0);
23 .child {
24 position: absolute;
25 border:2px solid black;
26 width: 150px;
27 height: 150px;
28 padding: 20px;
29 color: gray;
30 -webkit-box-sizing: border-box;
31 transform: translateZ(0);
34 .child > .child {
35 height: 100px;
36 width: 100px;
37 top: 80px;
38 background-color: green;
39 font-size: 50%;
42 .negative {
43 z-index: -1;
44 left: -50px;
45 top: -50px;
46 background-color: rgba(200, 100, 100, 1);
49 .positive {
50 z-index: 1;
51 right: -50px;
52 bottom: -50px;
53 background-color: rgba(200, 200, 128, 1);
56 </style>
57 </head>
58 <body>
60 <p>The layering of the boxes should not be affected by overflow:hidden.</p>
61 <div class="box">
62 Box contents
63 <div class="negative child">
64 Behind
65 <div class="child">
66 Behind behind
67 </div>
68 </div>
69 <div class="positive child">
70 In Front
71 </div>
72 </div>
74 <div class="box" style="overflow: hidden;">
75 Box contents
76 <div class="negative child">
77 Behind
78 <div class="child">
79 Behind behind
80 </div>
81 </div>
82 <div class="positive child">
83 In Front
84 </div>
85 </div>
87 </body>
88 </html>