Implement backing-sharing in compositing layers, allowing overlap layers to paint...
[WebKit-https.git] / LayoutTests / scrollingcoordinator / scrolling-tree / nested-absolute-in-absolute-overflow.html
1 <!DOCTYPE html> <!-- webkit-test-runner [ internal:AsyncOverflowScrollingEnabled=true ] -->
2 <html>
3 <head>
4     <title>Nested absolutes move with the overflow but are not stacking descendants: need two 'move' nodes</title>
5     <style>
6         .scrollcontent {
7             height: 500px;
8         }
9         .scroller {
10             position:absolute;
11             margin: 20px;
12             overflow: scroll;
13             height: 300px;
14             width: 300px;
15             border: 2px solid black;
16         }
17     
18         .absolute {
19             position:absolute;
20             left: 50px;
21             top: 50px;
22             width: 100px;
23             height: 100px;
24             background: gray;
25             border: 2px solid green;
26         }
27     
28         .inner {
29             left:25px;
30             top:25px;
31             width: 300px;
32         }
33
34         .scrollcontent {
35             height: 500px;
36             background-image: repeating-linear-gradient(white, silver 200px);
37         }
38         
39         .sharing-preventer {
40             transform: translateZ(0);
41             margin: 10px;
42             width: 10px;
43             height: 10px;
44         }
45     </style>
46     <script>
47         if (window.testRunner)
48             testRunner.dumpAsText();
49
50         window.addEventListener('load', () => {
51             if (window.internals)
52                 document.getElementById('tree').innerText = internals.scrollingStateTreeAsText();
53         }, false);
54     </script>
55 </head>
56 <body>
57     <div class="scroller">
58         <div class="sharing-preventer"></div>
59         <div class="absolute">abs
60             <div class="sharing-preventer"></div>
61             <div class="inner absolute">abs</div>
62         </div>
63         <div class="scrollcontent"></div>
64     </div>
65 <pre id="tree"></pre>
66 </body>
67 </html>