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