OLD | NEW |
1 Test that layers can be nicely added or removed from a squashed layer, without u
nnecessary repaints on any layer. Click anywhere to test interactively; keep cli
cking to proceed through the test. | 1 Test that layers can be nicely added or removed from a squashed layer, without u
nnecessary repaints on any layer. Click anywhere to test interactively; keep cli
cking to proceed through the test. |
2 | 2 |
3 CASE 1, original layer tree with overlap1 and overlap2: | 3 CASE 1, original layer tree with overlap1 and overlap2: |
4 { | 4 { |
5 "bounds": [800, 600], | 5 "bounds": [800, 600], |
6 "children": [ | 6 "children": [ |
7 { | 7 { |
8 "bounds": [800, 600], | 8 "bounds": [800, 600], |
9 "contentsOpaque": true, | 9 "contentsOpaque": true, |
10 "drawsContent": true, | 10 "drawsContent": true, |
(...skipping 23 matching lines...) Expand all Loading... |
34 { | 34 { |
35 "bounds": [800, 600], | 35 "bounds": [800, 600], |
36 "children": [ | 36 "children": [ |
37 { | 37 { |
38 "bounds": [800, 600], | 38 "bounds": [800, 600], |
39 "contentsOpaque": true, | 39 "contentsOpaque": true, |
40 "drawsContent": true, | 40 "drawsContent": true, |
41 "paintInvalidations": [ | 41 "paintInvalidations": [ |
42 { | 42 { |
43 "object": "LayoutBlockFlow (positioned) DIV id='C' class='overlap3'", | 43 "object": "LayoutBlockFlow (positioned) DIV id='C' class='overlap3'", |
44 "rect": [0, 0, 0, 0], | |
45 "reason": "layer" | 44 "reason": "layer" |
46 } | 45 } |
47 ], | 46 ], |
48 "children": [ | 47 "children": [ |
49 { | 48 { |
50 "shouldFlattenTransform": false, | 49 "shouldFlattenTransform": false, |
51 "children": [ | 50 "children": [ |
52 { | 51 { |
53 "position": [60, 60], | 52 "position": [60, 60], |
54 "bounds": [400, 400], | 53 "bounds": [400, 400], |
(...skipping 74 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
129 "contentsOpaque": true, | 128 "contentsOpaque": true, |
130 "drawsContent": true, | 129 "drawsContent": true, |
131 "backgroundColor": "#808080" | 130 "backgroundColor": "#808080" |
132 }, | 131 }, |
133 { | 132 { |
134 "position": [300, 300], | 133 "position": [300, 300], |
135 "bounds": [100, 100], | 134 "bounds": [100, 100], |
136 "drawsContent": true, | 135 "drawsContent": true, |
137 "paintInvalidations": [ | 136 "paintInvalidations": [ |
138 { | 137 { |
| 138 "object": "LayoutBlockFlow (positioned) DIV id='C' class='over
lap3'", |
| 139 "rect": [160, 160, 100, 100], |
| 140 "reason": "layer" |
| 141 }, |
| 142 { |
139 "object": "LayoutBlockFlow (positioned) DIV id='A' class='over
lap1'", | 143 "object": "LayoutBlockFlow (positioned) DIV id='A' class='over
lap1'", |
140 "rect": [0, 0, 100, 100], | 144 "rect": [0, 0, 100, 100], |
141 "reason": "layoutObject removal" | 145 "reason": "layoutObject removal" |
142 }, | 146 }, |
143 { | 147 { |
144 "object": "LayoutBlockFlow (positioned) DIV id='C' class='over
lap3'", | 148 "object": "LayoutBlockFlow (positioned) DIV id='C' class='over
lap3'", |
145 "rect": [160, 160, 100, 100], | |
146 "reason": "layer" | |
147 }, | |
148 { | |
149 "object": "LayoutBlockFlow (positioned) DIV id='C' class='over
lap3'", | |
150 "rect": [0, 0, 100, 100], | 149 "rect": [0, 0, 100, 100], |
151 "reason": "location change" | 150 "reason": "location change" |
152 } | 151 } |
153 ] | 152 ] |
154 } | 153 } |
155 ] | 154 ] |
156 } | 155 } |
157 ] | 156 ] |
158 } | 157 } |
159 ] | 158 ] |
160 } | 159 } |
161 CASE 5, overlap2 gets added back: | 160 CASE 5, overlap2 gets added back: |
162 { | 161 { |
163 "bounds": [800, 600], | 162 "bounds": [800, 600], |
164 "children": [ | 163 "children": [ |
165 { | 164 { |
166 "bounds": [800, 600], | 165 "bounds": [800, 600], |
167 "contentsOpaque": true, | 166 "contentsOpaque": true, |
168 "drawsContent": true, | 167 "drawsContent": true, |
169 "paintInvalidations": [ | 168 "paintInvalidations": [ |
170 { | 169 { |
171 "object": "LayoutBlockFlow (positioned) DIV id='B' class='overlap2'", | 170 "object": "LayoutBlockFlow (positioned) DIV id='B' class='overlap2'", |
172 "rect": [0, 0, 0, 0], | |
173 "reason": "layer" | 171 "reason": "layer" |
174 } | 172 } |
175 ], | 173 ], |
176 "children": [ | 174 "children": [ |
177 { | 175 { |
178 "shouldFlattenTransform": false, | 176 "shouldFlattenTransform": false, |
179 "children": [ | 177 "children": [ |
180 { | 178 { |
181 "position": [60, 60], | 179 "position": [60, 60], |
182 "bounds": [400, 400], | 180 "bounds": [400, 400], |
183 "contentsOpaque": true, | 181 "contentsOpaque": true, |
184 "drawsContent": true, | 182 "drawsContent": true, |
185 "backgroundColor": "#808080" | 183 "backgroundColor": "#808080" |
186 }, | 184 }, |
187 { | 185 { |
188 "position": [220, 220], | 186 "position": [220, 220], |
189 "bounds": [180, 180], | 187 "bounds": [180, 180], |
190 "drawsContent": true, | 188 "drawsContent": true, |
191 "paintInvalidations": [ | 189 "paintInvalidations": [ |
192 { | 190 { |
| 191 "object": "LayoutBlockFlow (positioned) DIV id='C' class='over
lap3'", |
| 192 "rect": [80, 80, 100, 100], |
| 193 "reason": "location change" |
| 194 }, |
| 195 { |
193 "object": "LayoutBlockFlow (positioned) DIV id='B' class='over
lap2'", | 196 "object": "LayoutBlockFlow (positioned) DIV id='B' class='over
lap2'", |
194 "rect": [0, 0, 100, 100], | 197 "rect": [0, 0, 100, 100], |
195 "reason": "layoutObject insertion" | 198 "reason": "layoutObject insertion" |
196 }, | 199 }, |
197 { | 200 { |
198 "object": "LayoutBlockFlow (positioned) DIV id='C' class='over
lap3'", | 201 "object": "LayoutBlockFlow (positioned) DIV id='C' class='over
lap3'", |
199 "rect": [0, 0, 100, 100], | 202 "rect": [0, 0, 100, 100], |
200 "reason": "layer" | 203 "reason": "layer" |
201 }, | |
202 { | |
203 "object": "LayoutBlockFlow (positioned) DIV id='C' class='over
lap3'", | |
204 "rect": [80, 80, 100, 100], | |
205 "reason": "location change" | |
206 } | 204 } |
207 ] | 205 ] |
208 } | 206 } |
209 ] | 207 ] |
210 } | 208 } |
211 ] | 209 ] |
212 } | 210 } |
213 ] | 211 ] |
214 } | 212 } |
215 CASE 6, overlap1 gets added back, and overlap3 gets removed: | 213 CASE 6, overlap1 gets added back, and overlap3 gets removed: |
216 { | 214 { |
217 "bounds": [800, 600], | 215 "bounds": [800, 600], |
218 "children": [ | 216 "children": [ |
219 { | 217 { |
220 "bounds": [800, 600], | 218 "bounds": [800, 600], |
221 "contentsOpaque": true, | 219 "contentsOpaque": true, |
222 "drawsContent": true, | 220 "drawsContent": true, |
223 "paintInvalidations": [ | 221 "paintInvalidations": [ |
224 { | 222 { |
225 "object": "LayoutBlockFlow (positioned) DIV id='A' class='overlap1'", | 223 "object": "LayoutBlockFlow (positioned) DIV id='A' class='overlap1'", |
226 "rect": [0, 0, 0, 0], | |
227 "reason": "layer" | 224 "reason": "layer" |
228 } | 225 } |
229 ], | 226 ], |
230 "children": [ | 227 "children": [ |
231 { | 228 { |
232 "shouldFlattenTransform": false, | 229 "shouldFlattenTransform": false, |
233 "children": [ | 230 "children": [ |
234 { | 231 { |
235 "position": [60, 60], | 232 "position": [60, 60], |
236 "bounds": [400, 400], | 233 "bounds": [400, 400], |
237 "contentsOpaque": true, | 234 "contentsOpaque": true, |
238 "drawsContent": true, | 235 "drawsContent": true, |
239 "backgroundColor": "#808080" | 236 "backgroundColor": "#808080" |
240 }, | 237 }, |
241 { | 238 { |
242 "position": [140, 140], | 239 "position": [140, 140], |
243 "bounds": [180, 180], | 240 "bounds": [180, 180], |
244 "drawsContent": true, | 241 "drawsContent": true, |
245 "paintInvalidations": [ | 242 "paintInvalidations": [ |
246 { | 243 { |
247 "object": "LayoutBlockFlow (positioned) DIV id='A' class='over
lap1'", | |
248 "rect": [0, 0, 100, 100], | |
249 "reason": "layoutObject insertion" | |
250 }, | |
251 { | |
252 "object": "LayoutBlockFlow (positioned) DIV id='B' class='over
lap2'", | |
253 "rect": [0, 0, 100, 100], | |
254 "reason": "layer" | |
255 }, | |
256 { | |
257 "object": "LayoutBlockFlow (positioned) DIV id='B' class='over
lap2'", | 244 "object": "LayoutBlockFlow (positioned) DIV id='B' class='over
lap2'", |
258 "rect": [80, 80, 100, 100], | 245 "rect": [80, 80, 100, 100], |
259 "reason": "location change" | 246 "reason": "location change" |
260 }, | 247 }, |
261 { | 248 { |
262 "object": "LayoutBlockFlow (positioned) DIV id='C' class='over
lap3'", | 249 "object": "LayoutBlockFlow (positioned) DIV id='C' class='over
lap3'", |
263 "rect": [80, 80, 100, 100], | 250 "rect": [80, 80, 100, 100], |
264 "reason": "layoutObject removal" | 251 "reason": "layoutObject removal" |
| 252 }, |
| 253 { |
| 254 "object": "LayoutBlockFlow (positioned) DIV id='A' class='over
lap1'", |
| 255 "rect": [0, 0, 100, 100], |
| 256 "reason": "layoutObject insertion" |
| 257 }, |
| 258 { |
| 259 "object": "LayoutBlockFlow (positioned) DIV id='B' class='over
lap2'", |
| 260 "rect": [0, 0, 100, 100], |
| 261 "reason": "layer" |
265 } | 262 } |
266 ] | 263 ] |
267 } | 264 } |
268 ] | 265 ] |
269 } | 266 } |
270 ] | 267 ] |
271 } | 268 } |
272 ] | 269 ] |
273 } | 270 } |
274 | 271 |
OLD | NEW |