Implement backing-sharing in compositing layers, allowing overlap layers to paint...
[WebKit-https.git] / LayoutTests / compositing / shared-backing / overflow-scroll / shared-layer-nested-relative-stacking.html
1 <!DOCTYPE html> <!-- webkit-test-runner [ internal:AsyncOverflowScrollingEnabled=true ] -->
2 <html>
3 <head>
4     <style>
5         .container {
6             position: relative;
7             width: 200px;
8             height: 200px;
9             margin: 30px;
10             border: 1px solid black;
11         }
12         
13         .box {
14             width: 100px;
15             height: 100px;
16             background-color: blue;
17             margin: 10px;
18         }
19         
20         .trigger {
21             position: absolute;
22             left: 20px;
23             top: 10px;
24             width: 50px;
25             height: 50px;
26             transform: translateZ(0);
27             background-color: gray;
28         }
29         
30         .relative {
31             position: relative;
32             top: 150px;
33             left: 150px;
34             z-index: 2;
35         }
36         
37         .interposer {
38             position: absolute;
39             left: 150px;
40             top: 150px;
41             background-color: orange;
42         }
43     </style>
44     <script>
45         if (window.testRunner)
46             testRunner.dumpAsText();
47
48         window.addEventListener('load', () => {
49             if (window.internals)
50                 document.getElementById('layers').textContent = internals.layerTreeAsText(document);
51         }, false);
52     </script>
53 </head>
54 <body>
55     <div class="trigger"></div>
56     <div class="container">
57         <div class="relative box"></div>
58     </div>
59     <div class="interposer box"></div>
60 <pre id="layers"></pre>
61 </body>
62 </html>