Some elements lag behind async overflow scrolling on palace-games.com
[WebKit-https.git] / LayoutTests / scrollingcoordinator / scrolling-tree / positioned-nodes-complex.html
1 <!DOCTYPE html>
2 <html>
3     <head>
4         <title>
5             Test scrolling tree stucture with various positioning and clipping configurations
6         </title>
7         <style>
8         .container {
9             position: relative;
10             height: 250px;
11             width: 250px;
12             transform: translateZ(0);
13             border: 1px solid black;
14             margin: 10px;
15             float: left;
16         }
17
18         .scroller {
19             margin: 10px;
20             background-color: silver;
21             border: 1px solid black;
22             padding: 10px;
23             width: 200px;
24             height: 150px;
25             overflow: scroll;
26         }
27
28         .stacking-containing {
29             position: relative;
30             z-index: 0;
31         }
32
33         .stacking {
34             opacity: 0.75;
35         }
36
37         .containing {
38             position: relative;
39         }
40
41         .box {
42             width: 100px;
43             height: 100px;
44             background-color: blue;
45         }
46
47         .absolute {
48             position: absolute;
49             left: 100px;
50         }
51
52         .composited {
53             transform: translateZ(0);
54             background-color: orange;
55         }
56
57         .scrolling-content {
58             height: 1000px;
59         }
60         </style>
61         <script>
62         if (window.testRunner)
63             testRunner.dumpAsText();
64
65         if (window.internals)
66             window.internals.settings.setAsyncOverflowScrollingEnabled(true);
67
68         function doTest() {
69             if (window.internals)
70                 document.getElementById('scrollingTree').innerText = window.internals.scrollingStateTreeAsText() + "\n";
71         }
72
73         window.addEventListener('load', doTest, false);
74         </script>
75     </head>
76     <body>
77         <div class="container">
78             <!-- containing block outside overflow, composited ancestor inside -->
79             <div class="scroller">
80                 <div class="scrolling-content">
81                     Scrolling content
82                     <div class="stacking">
83                         Stacking
84                         <div class="absolute box"></div>
85                     </div>
86                 </div>
87             </div>
88         </div>
89         <div class="container">
90             <!-- composited outside overflow, containing block inside. -->
91             <div class="scroller">
92                 <div class="scrolling-content">
93                     Scrolling content
94                     <div class="containing">
95                         Containing
96                         <div class="absolute box"></div>
97                     </div>
98                 </div>
99             </div>
100         </div>
101         <div class="container">
102             <!-- composited outside overflow, containing block outside. -->
103             <div class="scroller">
104                 <div class="scrolling-content">
105                     Scrolling content
106                     <div class="absolute box"></div>
107                 </div>
108             </div>
109         </div>
110         <div class="container">
111             <!-- containing block outside, composited ancestor outside. -->
112             <div class="containing">
113                 Containing
114                 <div class="stacking">
115                     Stacking
116                     <div class="scroller">
117                         <div class="scrolling-content">
118                             Scrolling content
119                             <div class="absolute box"></div>
120                         </div>
121                     </div>
122                 </div>
123             </div>
124         </div>
125         <div class="container">
126             <div class="scroller">
127                 <div class="scrolling-content">
128                     Scrolling content
129                     <div class="stacking">
130                         Stacking
131                         <div class="containing">
132                             Containing
133                             <div class="absolute box"></div>
134                         </div>
135                     </div>
136                 </div>
137             </div>
138         </div>
139         <div class="container">
140             <div class="scroller">
141                 <div class="scrolling-content">
142                     Scrolling content
143                     <div class="containing">
144                         Containing
145                         <div class="stacking">
146                             Stacking
147                             <div class="absolute box"></div>
148                         </div>
149                     </div>
150                 </div>
151             </div>
152         </div>
153         <pre id="scrollingTree"></pre>
154     </body>
155 </html>