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