| 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 |