Implement backing-sharing in compositing layers, allowing overlap layers to paint...
[WebKit-https.git] / LayoutTests / compositing / shared-backing / overflow-scroll / relative-in-clipping-in-scroller-in-clipping.html
1 <!DOCTYPE html> <!-- webkit-test-runner [ internal:AsyncOverflowScrollingEnabled=true ] -->
2 <html>
3 <head>
4     <style>
5         .container {
6             width: 300px;
7             height: 300px;
8             border: 2px solid gray;
9             margin: 20px;
10             padding: 10px;
11             overflow-y: hidden;
12         }
13         
14         .scroller {
15             overflow-x: auto;
16             width: 100%;
17             height: 100%;
18             border: 2px solid black;
19             box-sizing: border-box;
20         }
21         
22         .clipping {
23             overflow: hidden;
24             width: 200px;
25             border: 2px solid black;
26             margin: 50px 10px;
27             padding: 10px;
28         }
29         
30         .relative {
31             position: relative;
32             padding: 10px;
33             border: 2px solid orange;
34         }
35         
36         .spacer {
37             height: 300px;
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="container">
52         <div class="scroller">
53             <div class="clipping">
54                 <div class="relative">
55                     Text
56                 </div>
57             </div>
58             <div class="spacer"></div>
59         </div>
60     </div>
61 <pre id="layers"></pre>
62 </body>
63 </html>