blob: 1d74f6eabd259845ed741592f4e1aa0373015fa5 [file] [log] [blame]
simon.fraser@apple.comcc69cdd2019-03-21 23:55:39 +00001<!DOCTYPE html> <!-- webkit-test-runner [ internal:AsyncOverflowScrollingEnabled=true ] -->
simon.fraser@apple.com37711f62019-03-20 16:44:49 +00002<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;
simon.fraser@apple.com9b76bfb2019-05-10 05:18:02 +000050 transform: translateZ(0);
simon.fraser@apple.com37711f62019-03-20 16:44:49 +000051 }
52
53 .composited {
54 transform: translateZ(0);
55 background-color: orange;
56 }
57
58 .scrolling-content {
59 height: 1000px;
60 }
simon.fraser@apple.com9b76bfb2019-05-10 05:18:02 +000061
62 .sharing-preventer {
63 transform: translateZ(0);
64 margin: 10px;
65 width: 10px;
66 height: 10px;
67 }
simon.fraser@apple.com37711f62019-03-20 16:44:49 +000068 </style>
69 <script>
70 if (window.testRunner)
71 testRunner.dumpAsText();
72
simon.fraser@apple.com37711f62019-03-20 16:44:49 +000073 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
simon.fraser@apple.com9b76bfb2019-05-10 05:18:02 +000087 <div class="sharing-preventer"></div>
simon.fraser@apple.com37711f62019-03-20 16:44:49 +000088 <div class="stacking">
89 Stacking
simon.fraser@apple.com9b76bfb2019-05-10 05:18:02 +000090 <div class="sharing-preventer"></div>
simon.fraser@apple.com37711f62019-03-20 16:44:49 +000091 <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
simon.fraser@apple.com9b76bfb2019-05-10 05:18:02 +0000101 <div class="sharing-preventer"></div>
simon.fraser@apple.com37711f62019-03-20 16:44:49 +0000102 <div class="containing">
103 Containing
simon.fraser@apple.com9b76bfb2019-05-10 05:18:02 +0000104 <div class="sharing-preventer"></div>
simon.fraser@apple.com37711f62019-03-20 16:44:49 +0000105 <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
simon.fraser@apple.com9b76bfb2019-05-10 05:18:02 +0000115 <div class="sharing-preventer"></div>
simon.fraser@apple.com37711f62019-03-20 16:44:49 +0000116 <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
simon.fraser@apple.com9b76bfb2019-05-10 05:18:02 +0000129 <div class="sharing-preventer"></div>
simon.fraser@apple.com37711f62019-03-20 16:44:49 +0000130 <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
simon.fraser@apple.com9b76bfb2019-05-10 05:18:02 +0000140 <div class="sharing-preventer"></div>
simon.fraser@apple.com37711f62019-03-20 16:44:49 +0000141 <div class="stacking">
142 Stacking
143 <div class="containing">
144 Containing
simon.fraser@apple.com9b76bfb2019-05-10 05:18:02 +0000145 <div class="sharing-preventer"></div>
simon.fraser@apple.com37711f62019-03-20 16:44:49 +0000146 <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
simon.fraser@apple.com9b76bfb2019-05-10 05:18:02 +0000156 <div class="sharing-preventer"></div>
simon.fraser@apple.com37711f62019-03-20 16:44:49 +0000157 <div class="containing">
158 Containing
159 <div class="stacking">
160 Stacking
simon.fraser@apple.com9b76bfb2019-05-10 05:18:02 +0000161 <div class="sharing-preventer"></div>
simon.fraser@apple.com37711f62019-03-20 16:44:49 +0000162 <div class="absolute box"></div>
163 </div>
164 </div>
165 </div>
166 </div>
167 </div>
168 <pre id="scrollingTree"></pre>
169 </body>
170</html>