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