[Async overflow scrolling] Absolute positioned element inside async overflow scroll...
[WebKit-https.git] / LayoutTests / scrollingcoordinator / scrolling-tree / absolute-inside-stacking-in-scroller.html
1 <!DOCTYPE html> <!-- webkit-test-runner [ internal:AsyncOverflowScrollingEnabled=true ] -->
2 <html>
3 <head>
4         <title>Tests that we make a compositing layer for an abspost element inside something that paints into the scroller</title>
5     <style>
6             .scroller {
7                 overflow: scroll;
8                 margin: 10px;
9                 background-color: silver;
10                 border: 1px solid black;
11                 padding: 10px;
12                 width: 200px;
13                 height: 150px;
14             }
15
16             .stacking {
17                         border: 2px solid gray;
18                         padding: 20px;
19                 opacity: 0.75;
20             }
21
22             .box {
23                 width: 100px;
24                 height: 100px;
25                         background-color: blue;
26             }
27         
28             .absolute {
29                 position: absolute;
30                 left: 100px;
31             }
32
33             .scrolling-content {
34                 height: 1000px;
35             }
36     </style>
37     <script>
38             if (window.testRunner)
39                 testRunner.dumpAsText();
40
41             window.addEventListener('load', () => {
42                 if (window.internals)
43                     document.getElementById('scrollingTree').innerText = window.internals.scrollingStateTreeAsText() + "\n";
44             }, false);
45     </script>
46 </head>
47 <body>
48     <div class="container">
49         <div class="scroller">
50             <div class="scrolling-content">
51                 <div class="stacking">
52                     <div class="absolute stationary box"></div>
53                 </div>
54             </div>
55         </div>
56     </div>
57 <pre id="scrollingTree"></pre>
58 </body>
59 </html>