1d74f6eabd259845ed741592f4e1aa0373015fa5
[WebKit-https.git] / LayoutTests / scrollingcoordinator / scrolling-tree / positioned-nodes-complex.html
1 <!DOCTYPE html> <!-- webkit-test-runner [ internal:AsyncOverflowScrollingEnabled=true ] -->
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             transform: translateZ(0);
51         }
52
53         .composited {
54             transform: translateZ(0);
55             background-color: orange;
56         }
57
58         .scrolling-content {
59             height: 1000px;
60         }
61
62         .sharing-preventer {
63             transform: translateZ(0);
64             margin: 10px;
65             width: 10px;
66             height: 10px;
67         }
68         </style>
69         <script>
70         if (window.testRunner)
71             testRunner.dumpAsText();
72
73         function doTest() {
74             if (window.internals)
75                 document.getElementById('scrollingTree').innerText = window.internals.scrollingStateTreeAsText() + "\n";
76         }
77
78         window.addEventListener('load', doTest, false);
79         </script>
80     </head>
81     <body>
82         <div class="container">
83             <!-- containing block outside overflow, composited ancestor inside -->
84             <div class="scroller">
85                 <div class="scrolling-content">
86                     Scrolling content
87                     <div class="sharing-preventer"></div>
88                     <div class="stacking">
89                         Stacking
90                         <div class="sharing-preventer"></div>
91                         <div class="absolute box"></div>
92                     </div>
93                 </div>
94             </div>
95         </div>
96         <div class="container">
97             <!-- composited outside overflow, containing block inside. -->
98             <div class="scroller">
99                 <div class="scrolling-content">
100                     Scrolling content
101                     <div class="sharing-preventer"></div>
102                     <div class="containing">
103                         Containing
104                         <div class="sharing-preventer"></div>
105                         <div class="absolute box"></div>
106                     </div>
107                 </div>
108             </div>
109         </div>
110         <div class="container">
111             <!-- composited outside overflow, containing block outside. -->
112             <div class="scroller">
113                 <div class="scrolling-content">
114                     Scrolling content
115                     <div class="sharing-preventer"></div>
116                     <div class="absolute box"></div>
117                 </div>
118             </div>
119         </div>
120         <div class="container">
121             <!-- containing block outside, composited ancestor outside. -->
122             <div class="containing">
123                 Containing
124                 <div class="stacking">
125                     Stacking
126                     <div class="scroller">
127                         <div class="scrolling-content">
128                             Scrolling content
129                             <div class="sharing-preventer"></div>
130                             <div class="absolute box"></div>
131                         </div>
132                     </div>
133                 </div>
134             </div>
135         </div>
136         <div class="container">
137             <div class="scroller">
138                 <div class="scrolling-content">
139                     Scrolling content
140                     <div class="sharing-preventer"></div>
141                     <div class="stacking">
142                         Stacking
143                         <div class="containing">
144                             Containing
145                             <div class="sharing-preventer"></div>
146                             <div class="absolute box"></div>
147                         </div>
148                     </div>
149                 </div>
150             </div>
151         </div>
152         <div class="container">
153             <div class="scroller">
154                 <div class="scrolling-content">
155                     Scrolling content
156                     <div class="sharing-preventer"></div>
157                     <div class="containing">
158                         Containing
159                         <div class="stacking">
160                             Stacking
161                             <div class="sharing-preventer"></div>
162                             <div class="absolute box"></div>
163                         </div>
164                     </div>
165                 </div>
166             </div>
167         </div>
168         <pre id="scrollingTree"></pre>
169     </body>
170 </html>