OLD | NEW |
1 The gray div is a composited fixed-position element, and the cyan/lime elements
should be squashed together on top. When scrolling, paragraphs may pop in-and-ou
t of the squashing layer when they change overlapping status with respect to the
composited layer underneath. | 1 The gray div is a composited fixed-position element, and the cyan/lime elements
should be squashed together on top. When scrolling, paragraphs may pop in-and-ou
t of the squashing layer when they change overlapping status with respect to the
composited layer underneath. |
2 | 2 |
3 This scenario tests (1) that content repaints correctly as layers pop in and out
of squashing, and (2) that the positioning of the squashing layer remains corre
ct (i.e. scrolls properly) when the squashing layer is on top of a fixed-positio
n composited layer. | 3 This scenario tests (1) that content repaints correctly as layers pop in and out
of squashing, and (2) that the positioning of the squashing layer remains corre
ct (i.e. scrolls properly) when the squashing layer is on top of a fixed-positio
n composited layer. |
4 | 4 |
5 CASE 1, original layer tree: | 5 CASE 1, original layer tree: |
6 { | 6 { |
| 7 "name": "Content Root Layer", |
7 "bounds": [785, 1400], | 8 "bounds": [785, 1400], |
8 "children": [ | 9 "children": [ |
9 { | 10 { |
| 11 "name": "LayoutView #document", |
10 "bounds": [785, 1400], | 12 "bounds": [785, 1400], |
11 "contentsOpaque": true, | 13 "contentsOpaque": true, |
12 "drawsContent": true, | 14 "drawsContent": true, |
13 "children": [ | 15 "children": [ |
14 { | 16 { |
| 17 "name": "LayoutBlockFlow (positioned) DIV class='composited background
'", |
15 "position": [100, 150], | 18 "position": [100, 150], |
16 "bounds": [300, 300], | 19 "bounds": [300, 300], |
17 "contentsOpaque": true, | 20 "contentsOpaque": true, |
18 "drawsContent": true, | 21 "drawsContent": true, |
19 "backgroundColor": "#D3D3D3" | 22 "backgroundColor": "#D3D3D3" |
20 }, | 23 }, |
21 { | 24 { |
| 25 "name": "Squashing Containment Layer", |
22 "shouldFlattenTransform": false, | 26 "shouldFlattenTransform": false, |
23 "children": [ | 27 "children": [ |
24 { | 28 { |
| 29 "name": "LayoutBlockFlow (relative positioned) DIV id='paragraph-b
' class='overlapping lime'", |
25 "position": [0, 100], | 30 "position": [0, 100], |
26 "bounds": [200, 100], | 31 "bounds": [200, 100], |
27 "contentsOpaque": true, | 32 "contentsOpaque": true, |
28 "drawsContent": true, | 33 "drawsContent": true, |
29 "backgroundColor": "#00FF00" | 34 "backgroundColor": "#00FF00" |
30 }, | 35 }, |
31 { | 36 { |
| 37 "name": "Squashing Layer (first squashed layer: LayoutBlockFlow (r
elative positioned) DIV id='paragraph-c' class='overlapping cyan')", |
32 "position": [0, 200], | 38 "position": [0, 200], |
33 "bounds": [200, 300], | 39 "bounds": [200, 300], |
34 "drawsContent": true | 40 "drawsContent": true |
35 } | 41 } |
36 ] | 42 ] |
37 } | 43 } |
38 ] | 44 ] |
39 } | 45 } |
40 ] | 46 ] |
41 } | 47 } |
42 CASE 2, scrolling y to 80, new layers will be squashed, so things repaint: | 48 CASE 2, scrolling y to 80, new layers will be squashed, so things repaint: |
43 { | 49 { |
| 50 "name": "Content Root Layer", |
44 "bounds": [785, 1400], | 51 "bounds": [785, 1400], |
45 "children": [ | 52 "children": [ |
46 { | 53 { |
| 54 "name": "LayoutView #document", |
47 "bounds": [785, 1400], | 55 "bounds": [785, 1400], |
48 "contentsOpaque": true, | 56 "contentsOpaque": true, |
49 "drawsContent": true, | 57 "drawsContent": true, |
50 "paintInvalidations": [ | 58 "paintInvalidations": [ |
51 { | 59 { |
52 "object": "LayoutBlockFlow (relative positioned) DIV id='paragraph-f'
class='overlapping lime'", | 60 "object": "LayoutBlockFlow (relative positioned) DIV id='paragraph-f'
class='overlapping lime'", |
53 "rect": [0, 500, 200, 100], | 61 "rect": [0, 500, 200, 100], |
54 "reason": "subtree" | 62 "reason": "subtree" |
55 }, | 63 }, |
56 { | 64 { |
(...skipping 12 matching lines...) Expand all Loading... |
69 "reason": "subtree" | 77 "reason": "subtree" |
70 }, | 78 }, |
71 { | 79 { |
72 "object": "LayoutBlockFlow (relative positioned) DIV id='paragraph-c'
class='overlapping cyan'", | 80 "object": "LayoutBlockFlow (relative positioned) DIV id='paragraph-c'
class='overlapping cyan'", |
73 "rect": [0, 0, 200, 100], | 81 "rect": [0, 0, 200, 100], |
74 "reason": "subtree" | 82 "reason": "subtree" |
75 } | 83 } |
76 ], | 84 ], |
77 "children": [ | 85 "children": [ |
78 { | 86 { |
| 87 "name": "LayoutBlockFlow (positioned) DIV class='composited background
'", |
79 "position": [100, 230], | 88 "position": [100, 230], |
80 "bounds": [300, 300], | 89 "bounds": [300, 300], |
81 "contentsOpaque": true, | 90 "contentsOpaque": true, |
82 "drawsContent": true, | 91 "drawsContent": true, |
83 "backgroundColor": "#D3D3D3" | 92 "backgroundColor": "#D3D3D3" |
84 }, | 93 }, |
85 { | 94 { |
| 95 "name": "Squashing Containment Layer", |
86 "shouldFlattenTransform": false, | 96 "shouldFlattenTransform": false, |
87 "children": [ | 97 "children": [ |
88 { | 98 { |
| 99 "name": "LayoutBlockFlow (relative positioned) DIV id='paragraph-c
' class='overlapping cyan'", |
89 "position": [0, 200], | 100 "position": [0, 200], |
90 "bounds": [200, 100], | 101 "bounds": [200, 100], |
91 "contentsOpaque": true, | 102 "contentsOpaque": true, |
92 "drawsContent": true, | 103 "drawsContent": true, |
93 "backgroundColor": "#00FFFF", | 104 "backgroundColor": "#00FFFF", |
94 "paintInvalidations": [ | 105 "paintInvalidations": [ |
95 { | 106 { |
96 "object": "LayoutBlockFlow (relative positioned) DIV id='parag
raph-c' class='overlapping cyan'", | 107 "object": "LayoutBlockFlow (relative positioned) DIV id='parag
raph-c' class='overlapping cyan'", |
97 "rect": [0, 0, 200, 100], | 108 "rect": [0, 0, 200, 100], |
98 "reason": "compositing update" | 109 "reason": "compositing update" |
99 } | 110 } |
100 ] | 111 ] |
101 }, | 112 }, |
102 { | 113 { |
| 114 "name": "Squashing Layer (first squashed layer: LayoutBlockFlow (r
elative positioned) DIV id='paragraph-d' class='overlapping lime')", |
103 "position": [0, 300], | 115 "position": [0, 300], |
104 "bounds": [200, 300], | 116 "bounds": [200, 300], |
105 "drawsContent": true, | 117 "drawsContent": true, |
106 "paintInvalidations": [ | 118 "paintInvalidations": [ |
107 { | 119 { |
108 "object": "LayoutBlockFlow (relative positioned) DIV id='parag
raph-f' class='overlapping lime'", | 120 "object": "LayoutBlockFlow (relative positioned) DIV id='parag
raph-f' class='overlapping lime'", |
109 "rect": [0, 200, 200, 100], | 121 "rect": [0, 200, 200, 100], |
110 "reason": "compositing update" | 122 "reason": "compositing update" |
111 }, | 123 }, |
112 { | 124 { |
113 "object": "LayoutBlockFlow (relative positioned) DIV id='parag
raph-e' class='overlapping cyan'", | 125 "object": "LayoutBlockFlow (relative positioned) DIV id='parag
raph-e' class='overlapping cyan'", |
114 "rect": [0, 100, 200, 100], | 126 "rect": [0, 100, 200, 100], |
115 "reason": "compositing update" | 127 "reason": "compositing update" |
116 }, | 128 }, |
117 { | 129 { |
118 "object": "LayoutBlockFlow (relative positioned) DIV id='parag
raph-d' class='overlapping lime'", | 130 "object": "LayoutBlockFlow (relative positioned) DIV id='parag
raph-d' class='overlapping lime'", |
119 "rect": [0, 0, 200, 100], | 131 "rect": [0, 0, 200, 100], |
120 "reason": "compositing update" | 132 "reason": "compositing update" |
121 } | 133 } |
122 ] | 134 ] |
123 } | 135 } |
124 ] | 136 ] |
125 } | 137 } |
126 ] | 138 ] |
127 } | 139 } |
| 140 ], |
| 141 "objectPaintInvalidations": [ |
| 142 { |
| 143 "object": "LayoutBlockFlow (relative positioned) DIV id='paragraph-c' clas
s='overlapping cyan'", |
| 144 "reason": "subtree" |
| 145 }, |
| 146 { |
| 147 "object": "LayoutBlockFlow (relative positioned) DIV id='paragraph-d' clas
s='overlapping lime'", |
| 148 "reason": "subtree" |
| 149 }, |
| 150 { |
| 151 "object": "LayoutBlockFlow (relative positioned) DIV id='paragraph-e' clas
s='overlapping cyan'", |
| 152 "reason": "subtree" |
| 153 }, |
| 154 { |
| 155 "object": "LayoutBlockFlow (relative positioned) DIV id='paragraph-f' clas
s='overlapping lime'", |
| 156 "reason": "subtree" |
| 157 }, |
| 158 { |
| 159 "object": "LayoutBlockFlow (relative positioned) DIV id='paragraph-b' clas
s='overlapping lime'", |
| 160 "reason": "compositing update" |
| 161 }, |
| 162 { |
| 163 "object": "LayoutBlockFlow (relative positioned) DIV id='paragraph-c' clas
s='overlapping cyan'", |
| 164 "reason": "compositing update" |
| 165 }, |
| 166 { |
| 167 "object": "LayoutBlockFlow (relative positioned) DIV id='paragraph-d' clas
s='overlapping lime'", |
| 168 "reason": "compositing update" |
| 169 }, |
| 170 { |
| 171 "object": "LayoutBlockFlow (relative positioned) DIV id='paragraph-e' clas
s='overlapping cyan'", |
| 172 "reason": "compositing update" |
| 173 }, |
| 174 { |
| 175 "object": "LayoutBlockFlow (relative positioned) DIV id='paragraph-f' clas
s='overlapping lime'", |
| 176 "reason": "compositing update" |
| 177 } |
128 ] | 178 ] |
129 } | 179 } |
130 CASE 3, scrolling y to 120, no repaints expected: | 180 CASE 3, scrolling y to 120, no repaints expected: |
131 { | 181 { |
| 182 "name": "Content Root Layer", |
132 "bounds": [785, 1400], | 183 "bounds": [785, 1400], |
133 "children": [ | 184 "children": [ |
134 { | 185 { |
| 186 "name": "LayoutView #document", |
135 "bounds": [785, 1400], | 187 "bounds": [785, 1400], |
136 "contentsOpaque": true, | 188 "contentsOpaque": true, |
137 "drawsContent": true, | 189 "drawsContent": true, |
138 "children": [ | 190 "children": [ |
139 { | 191 { |
| 192 "name": "LayoutBlockFlow (positioned) DIV class='composited background
'", |
140 "position": [100, 270], | 193 "position": [100, 270], |
141 "bounds": [300, 300], | 194 "bounds": [300, 300], |
142 "contentsOpaque": true, | 195 "contentsOpaque": true, |
143 "drawsContent": true, | 196 "drawsContent": true, |
144 "backgroundColor": "#D3D3D3" | 197 "backgroundColor": "#D3D3D3" |
145 }, | 198 }, |
146 { | 199 { |
| 200 "name": "Squashing Containment Layer", |
147 "shouldFlattenTransform": false, | 201 "shouldFlattenTransform": false, |
148 "children": [ | 202 "children": [ |
149 { | 203 { |
| 204 "name": "LayoutBlockFlow (relative positioned) DIV id='paragraph-c
' class='overlapping cyan'", |
150 "position": [0, 200], | 205 "position": [0, 200], |
151 "bounds": [200, 100], | 206 "bounds": [200, 100], |
152 "contentsOpaque": true, | 207 "contentsOpaque": true, |
153 "drawsContent": true, | 208 "drawsContent": true, |
154 "backgroundColor": "#00FFFF" | 209 "backgroundColor": "#00FFFF" |
155 }, | 210 }, |
156 { | 211 { |
| 212 "name": "Squashing Layer (first squashed layer: LayoutBlockFlow (r
elative positioned) DIV id='paragraph-d' class='overlapping lime')", |
157 "position": [0, 300], | 213 "position": [0, 300], |
158 "bounds": [200, 300], | 214 "bounds": [200, 300], |
159 "drawsContent": true | 215 "drawsContent": true |
160 } | 216 } |
161 ] | 217 ] |
162 } | 218 } |
163 ] | 219 ] |
164 } | 220 } |
165 ] | 221 ] |
166 } | 222 } |
167 CASE 4, scrolling y to 170 new layers will be squashed, so things repaint: | 223 CASE 4, scrolling y to 170 new layers will be squashed, so things repaint: |
168 { | 224 { |
| 225 "name": "Content Root Layer", |
169 "bounds": [785, 1400], | 226 "bounds": [785, 1400], |
170 "children": [ | 227 "children": [ |
171 { | 228 { |
| 229 "name": "LayoutView #document", |
172 "bounds": [785, 1400], | 230 "bounds": [785, 1400], |
173 "contentsOpaque": true, | 231 "contentsOpaque": true, |
174 "drawsContent": true, | 232 "drawsContent": true, |
175 "paintInvalidations": [ | 233 "paintInvalidations": [ |
176 { | 234 { |
177 "object": "LayoutBlockFlow (relative positioned) DIV id='paragraph-g'
class='overlapping cyan'", | 235 "object": "LayoutBlockFlow (relative positioned) DIV id='paragraph-g'
class='overlapping cyan'", |
178 "rect": [0, 600, 200, 100], | 236 "rect": [0, 600, 200, 100], |
179 "reason": "subtree" | 237 "reason": "subtree" |
180 }, | 238 }, |
181 { | 239 { |
(...skipping 12 matching lines...) Expand all Loading... |
194 "reason": "subtree" | 252 "reason": "subtree" |
195 }, | 253 }, |
196 { | 254 { |
197 "object": "LayoutBlockFlow (relative positioned) DIV id='paragraph-d'
class='overlapping lime'", | 255 "object": "LayoutBlockFlow (relative positioned) DIV id='paragraph-d'
class='overlapping lime'", |
198 "rect": [0, 0, 200, 100], | 256 "rect": [0, 0, 200, 100], |
199 "reason": "subtree" | 257 "reason": "subtree" |
200 } | 258 } |
201 ], | 259 ], |
202 "children": [ | 260 "children": [ |
203 { | 261 { |
| 262 "name": "LayoutBlockFlow (positioned) DIV class='composited background
'", |
204 "position": [100, 320], | 263 "position": [100, 320], |
205 "bounds": [300, 300], | 264 "bounds": [300, 300], |
206 "contentsOpaque": true, | 265 "contentsOpaque": true, |
207 "drawsContent": true, | 266 "drawsContent": true, |
208 "backgroundColor": "#D3D3D3" | 267 "backgroundColor": "#D3D3D3" |
209 }, | 268 }, |
210 { | 269 { |
| 270 "name": "Squashing Containment Layer", |
211 "shouldFlattenTransform": false, | 271 "shouldFlattenTransform": false, |
212 "children": [ | 272 "children": [ |
213 { | 273 { |
| 274 "name": "LayoutBlockFlow (relative positioned) DIV id='paragraph-d
' class='overlapping lime'", |
214 "position": [0, 300], | 275 "position": [0, 300], |
215 "bounds": [200, 100], | 276 "bounds": [200, 100], |
216 "contentsOpaque": true, | 277 "contentsOpaque": true, |
217 "drawsContent": true, | 278 "drawsContent": true, |
218 "backgroundColor": "#00FF00", | 279 "backgroundColor": "#00FF00", |
219 "paintInvalidations": [ | 280 "paintInvalidations": [ |
220 { | 281 { |
221 "object": "LayoutBlockFlow (relative positioned) DIV id='parag
raph-d' class='overlapping lime'", | 282 "object": "LayoutBlockFlow (relative positioned) DIV id='parag
raph-d' class='overlapping lime'", |
222 "rect": [0, 0, 200, 100], | 283 "rect": [0, 0, 200, 100], |
223 "reason": "compositing update" | 284 "reason": "compositing update" |
224 } | 285 } |
225 ] | 286 ] |
226 }, | 287 }, |
227 { | 288 { |
| 289 "name": "Squashing Layer (first squashed layer: LayoutBlockFlow (r
elative positioned) DIV id='paragraph-e' class='overlapping cyan')", |
228 "position": [0, 400], | 290 "position": [0, 400], |
229 "bounds": [200, 300], | 291 "bounds": [200, 300], |
230 "drawsContent": true, | 292 "drawsContent": true, |
231 "paintInvalidations": [ | 293 "paintInvalidations": [ |
232 { | 294 { |
233 "object": "LayoutBlockFlow (relative positioned) DIV id='parag
raph-g' class='overlapping cyan'", | 295 "object": "LayoutBlockFlow (relative positioned) DIV id='parag
raph-g' class='overlapping cyan'", |
234 "rect": [0, 200, 200, 100], | 296 "rect": [0, 200, 200, 100], |
235 "reason": "compositing update" | 297 "reason": "compositing update" |
236 }, | 298 }, |
237 { | 299 { |
238 "object": "LayoutBlockFlow (relative positioned) DIV id='parag
raph-f' class='overlapping lime'", | 300 "object": "LayoutBlockFlow (relative positioned) DIV id='parag
raph-f' class='overlapping lime'", |
239 "rect": [0, 100, 200, 100], | 301 "rect": [0, 100, 200, 100], |
240 "reason": "compositing update" | 302 "reason": "compositing update" |
241 }, | 303 }, |
242 { | 304 { |
243 "object": "LayoutBlockFlow (relative positioned) DIV id='parag
raph-e' class='overlapping cyan'", | 305 "object": "LayoutBlockFlow (relative positioned) DIV id='parag
raph-e' class='overlapping cyan'", |
244 "rect": [0, 0, 200, 100], | 306 "rect": [0, 0, 200, 100], |
245 "reason": "compositing update" | 307 "reason": "compositing update" |
246 } | 308 } |
247 ] | 309 ] |
248 } | 310 } |
249 ] | 311 ] |
250 } | 312 } |
251 ] | 313 ] |
252 } | 314 } |
| 315 ], |
| 316 "objectPaintInvalidations": [ |
| 317 { |
| 318 "object": "LayoutBlockFlow (relative positioned) DIV id='paragraph-d' clas
s='overlapping lime'", |
| 319 "reason": "subtree" |
| 320 }, |
| 321 { |
| 322 "object": "LayoutBlockFlow (relative positioned) DIV id='paragraph-e' clas
s='overlapping cyan'", |
| 323 "reason": "subtree" |
| 324 }, |
| 325 { |
| 326 "object": "LayoutBlockFlow (relative positioned) DIV id='paragraph-f' clas
s='overlapping lime'", |
| 327 "reason": "subtree" |
| 328 }, |
| 329 { |
| 330 "object": "LayoutBlockFlow (relative positioned) DIV id='paragraph-g' clas
s='overlapping cyan'", |
| 331 "reason": "subtree" |
| 332 }, |
| 333 { |
| 334 "object": "LayoutBlockFlow (relative positioned) DIV id='paragraph-c' clas
s='overlapping cyan'", |
| 335 "reason": "compositing update" |
| 336 }, |
| 337 { |
| 338 "object": "LayoutBlockFlow (relative positioned) DIV id='paragraph-d' clas
s='overlapping lime'", |
| 339 "reason": "compositing update" |
| 340 }, |
| 341 { |
| 342 "object": "LayoutBlockFlow (relative positioned) DIV id='paragraph-e' clas
s='overlapping cyan'", |
| 343 "reason": "compositing update" |
| 344 }, |
| 345 { |
| 346 "object": "LayoutBlockFlow (relative positioned) DIV id='paragraph-f' clas
s='overlapping lime'", |
| 347 "reason": "compositing update" |
| 348 }, |
| 349 { |
| 350 "object": "LayoutBlockFlow (relative positioned) DIV id='paragraph-g' clas
s='overlapping cyan'", |
| 351 "reason": "compositing update" |
| 352 } |
253 ] | 353 ] |
254 } | 354 } |
255 | 355 |
OLD | NEW |