a95edc87a3feccbf8ff168018c3ef1dd1944e533
[WebKit-https.git] / LayoutTests / compositing / shared-backing / overflow-scroll / nested-absolute-with-clipping-in-stacking-overflow.html
1 <!DOCTYPE html> <!-- webkit-test-runner [ internal:AsyncOverflowScrollingEnabled=true ] -->
2 <html>
3 <head>
4     <style>
5         .scroller {
6             margin: 20px;
7             width: 300px;
8             height: 300px;
9             overflow: auto;
10             border: 2px solid black;
11             opacity: 0.8;
12         }
13
14         .absolute {
15             position: absolute;
16             width: 100px;
17             height: 100px;
18             top: 100px;
19             left: 50px;
20             padding: 20px;
21             background-color: silver;
22         }
23         
24         .clipping {
25             overflow: hidden;
26         }
27
28         .inner {
29             top: 50px;
30             width: 100px;
31             height: 100px;
32             background-color: blue;
33         }
34
35         .spacer {
36             height: 500px;
37             background-image: repeating-linear-gradient(white, silver 200px);
38         }
39     </style>
40     <script>
41         if (window.testRunner)
42             testRunner.dumpAsText();
43
44         window.addEventListener('load', () => {
45             if (window.internals)
46                 document.getElementById('layers').textContent = internals.layerTreeAsText(document);
47         }, false);
48     </script>
49 </head>
50 <body>
51     <div class="scroller">
52         <div class="clipping absolute">
53             <div class="inner absolute"></div>
54         </div>
55         <div class="spacer"></div>
56     </div>
57 <pre id="layers"></pre>
58 </body>
59 </html>
60