Element is displayed behind a composited layer when clipping is used on a previous...
[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         var layersElement = document.getElementById('layers');
43         // Do not include any text in the layers output, otherwise we need expected results for each platform.
44         layersElement.style.display = "none";
45         layersElement.innerText = window.internals.layerTreeAsText(document);
46         layersElement.style.display = "block";
47         testRunner.notifyDone();
48       }
49     }
50     window.addEventListener('load', doTest, false);
51   </script>
52 </head>
53 <body>
54
55 <!-- Test overflow clipping of composited elements in various configurations. -->
56 <div class="container">
57   <div class="intermediate">
58     <div class="box">
59     </div>
60   </div>
61 </div>
62
63 <div class="container" style="left: 200px;">
64   <div class="intermediate" style="position: absolute">
65     <div class="box">
66     </div>
67   </div>
68 </div>
69
70 <div class="container" style="z-index: 0; top: 200px;">
71   <div class="intermediate">
72     <div class="box">
73     </div>
74   </div>
75 </div>
76
77 <div class="container" style="z-index: 0; top: 200px; left: 200px;">
78   <div class="intermediate" style="position: absolute; z-index: 0;">
79     <div class="box">
80     </div>
81   </div>
82 </div>
83
84 <pre id="layers">
85   In DRT, layer tree goes here.
86 </pre>
87
88 </body>
89 </html>