9fd5cb5c29354dc87a2ddf5e3b37accbf0d9af34
[WebKit-https.git] / LayoutTests / compositing / overflow / clip-descendents.html
1 <!DOCTYPE html>
2
3 <html>
4 <head>
5   <style type="text/css" media="screen">
6     .container {
7       position: absolute;
8       margin: 20px;
9       width: 120px;
10       height: 120px;
11       padding: 10px;
12       border: 1px solid black;
13       clip: rect(10px, 80px, 80px, 20px);
14     }
15     
16     .intermediate {
17       width: 100px;
18       height: 100px;
19       padding: 10px;
20       border: 1px solid blue;
21     }
22     
23     .box {
24       width: 100px;
25       height: 150px;
26       background-color: gray;
27       -webkit-transform: translateZ(1px);
28     }
29     
30     pre {
31       margin-top: 360px;
32     }
33   </style>
34   <script type="text/javascript" charset="utf-8">
35     if (window.testRunner) {
36       testRunner.dumpAsText();
37       testRunner.waitUntilDone();
38     }
39       
40     function doTest() {
41       if (window.testRunner) {
42         document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
43         testRunner.notifyDone();
44       }
45     }
46     window.addEventListener('load', doTest, false);
47   </script>
48 </head>
49 <body>
50
51 <p>Test overflow clipping of composited elements in various configurations.</p>
52 <div class="container">
53   <div class="intermediate">
54     <div class="box">
55     </div>
56   </div>
57 </div>
58
59 <div class="container" style="left: 200px;">
60   <div class="intermediate" style="position: absolute">
61     <div class="box">
62     </div>
63   </div>
64 </div>
65
66 <div class="container" style="z-index: 0; top: 200px;">
67   <div class="intermediate">
68     <div class="box">
69     </div>
70   </div>
71 </div>
72
73 <div class="container" style="z-index: 0; top: 200px; left: 200px;">
74   <div class="intermediate" style="position: absolute; z-index: 0;">
75     <div class="box">
76     </div>
77   </div>
78 </div>
79
80 <pre id="layers">
81   In DRT, layer tree goes here.
82 </pre>
83
84 </body>
85 </html>