Use background color for GraphicsLayers when applicable
[WebKit-https.git] / LayoutTests / compositing / overflow / ancestor-overflow.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2    "http://www.w3.org/TR/html4/loose.dtd">
3
4 <html lang="en">
5 <head>
6   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
7   <title>Overflow Test</title>
8   <style type="text/css" media="screen">
9     .container {
10       display: inline-block;
11       margin: 20px;
12       width: 120px;
13       height: 120px;
14       padding: 10px;
15       border: 1px solid black;
16       overflow: hidden;
17     }
18     
19     .intermediate {
20       width: 100px;
21       height: 100px;
22       padding: 10px;
23       border: 1px solid blue;
24     }
25     
26     .box {
27       width: 100px;
28       height: 150px;
29       background-color: gray;
30       -webkit-transform: translateZ(0);
31     }
32   </style>
33 </head>
34 <body>
35
36 <p>Test overflow clipping of composited elements in various configurations.</p>
37 <div class="container">
38   <div class="intermediate">
39     <div class="box">
40     </div>
41   </div>
42 </div>
43
44 <div class="container">
45   <div class="intermediate" style="position: absolute">
46     <div class="box">
47     </div>
48   </div>
49 </div>
50
51 <div class="container" style="position: relative">
52   <div class="intermediate" style="position: absolute">
53     <div class="box">
54     </div>
55   </div>
56 </div>
57
58 <br>
59
60 <div class="container" style="z-index: 0">
61   <div class="intermediate">
62     <div class="box">
63     </div>
64   </div>
65 </div>
66
67 <div class="container" style="z-index: 0">
68   <div class="intermediate" style="position: absolute; z-index: 0;">
69     <div class="box">
70     </div>
71   </div>
72 </div>
73
74 <div class="container" style="position: relative; z-index: 0">
75   <div class="intermediate" style="position: absolute;">
76     <div class="box">
77     </div>
78   </div>
79 </div>
80
81 </body>
82 </html>