| 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 "name": "Content Root Layer", |
| 5 "bounds": [800, 600], | 6 "bounds": [800, 600], |
| 6 "children": [ | 7 "children": [ |
| 7 { | 8 { |
| 9 "name": "LayoutView #document", |
| 8 "bounds": [800, 600], | 10 "bounds": [800, 600], |
| 9 "contentsOpaque": true, | 11 "contentsOpaque": true, |
| 10 "drawsContent": true, | 12 "drawsContent": true, |
| 11 "children": [ | 13 "children": [ |
| 12 { | 14 { |
| 15 "name": "Squashing Containment Layer", |
| 13 "shouldFlattenTransform": false, | 16 "shouldFlattenTransform": false, |
| 14 "children": [ | 17 "children": [ |
| 15 { | 18 { |
| 19 "name": "LayoutBlockFlow (positioned) DIV class='composited'", |
| 16 "position": [60, 60], | 20 "position": [60, 60], |
| 17 "bounds": [400, 400], | 21 "bounds": [400, 400], |
| 18 "contentsOpaque": true, | 22 "contentsOpaque": true, |
| 19 "drawsContent": true, | 23 "drawsContent": true, |
| 20 "backgroundColor": "#808080" | 24 "backgroundColor": "#808080" |
| 21 }, | 25 }, |
| 22 { | 26 { |
| 27 "name": "Squashing Layer (first squashed layer: LayoutBlockFlow (p
ositioned) DIV id='A' class='overlap1')", |
| 23 "position": [140, 140], | 28 "position": [140, 140], |
| 24 "bounds": [180, 180], | 29 "bounds": [180, 180], |
| 25 "drawsContent": true | 30 "drawsContent": true |
| 26 } | 31 } |
| 27 ] | 32 ] |
| 28 } | 33 } |
| 29 ] | 34 ] |
| 30 } | 35 } |
| 31 ] | 36 ] |
| 32 } | 37 } |
| 33 CASE 2, overlap3 gets added: | 38 CASE 2, overlap3 gets added: |
| 34 { | 39 { |
| 40 "name": "Content Root Layer", |
| 35 "bounds": [800, 600], | 41 "bounds": [800, 600], |
| 36 "children": [ | 42 "children": [ |
| 37 { | 43 { |
| 44 "name": "LayoutView #document", |
| 38 "bounds": [800, 600], | 45 "bounds": [800, 600], |
| 39 "contentsOpaque": true, | 46 "contentsOpaque": true, |
| 40 "drawsContent": true, | 47 "drawsContent": true, |
| 41 "paintInvalidations": [ | |
| 42 { | |
| 43 "object": "LayoutBlockFlow (positioned) DIV id='C' class='overlap3'", | |
| 44 "reason": "subtree" | |
| 45 } | |
| 46 ], | |
| 47 "children": [ | 48 "children": [ |
| 48 { | 49 { |
| 50 "name": "Squashing Containment Layer", |
| 49 "shouldFlattenTransform": false, | 51 "shouldFlattenTransform": false, |
| 50 "children": [ | 52 "children": [ |
| 51 { | 53 { |
| 54 "name": "LayoutBlockFlow (positioned) DIV class='composited'", |
| 52 "position": [60, 60], | 55 "position": [60, 60], |
| 53 "bounds": [400, 400], | 56 "bounds": [400, 400], |
| 54 "contentsOpaque": true, | 57 "contentsOpaque": true, |
| 55 "drawsContent": true, | 58 "drawsContent": true, |
| 56 "backgroundColor": "#808080" | 59 "backgroundColor": "#808080" |
| 57 }, | 60 }, |
| 58 { | 61 { |
| 62 "name": "Squashing Layer (first squashed layer: LayoutBlockFlow (p
ositioned) DIV id='A' class='overlap1')", |
| 59 "position": [140, 140], | 63 "position": [140, 140], |
| 60 "bounds": [260, 260], | 64 "bounds": [260, 260], |
| 61 "drawsContent": true, | 65 "drawsContent": true, |
| 62 "paintInvalidations": [ | 66 "paintInvalidations": [ |
| 63 { | 67 { |
| 64 "object": "LayoutBlockFlow (positioned) DIV id='C' class='over
lap3'", | 68 "object": "LayoutBlockFlow (positioned) DIV id='C' class='over
lap3'", |
| 65 "rect": [160, 160, 100, 100], | 69 "rect": [160, 160, 100, 100], |
| 66 "reason": "layoutObject insertion" | 70 "reason": "layoutObject insertion" |
| 67 } | 71 } |
| 68 ] | 72 ] |
| 69 } | 73 } |
| 70 ] | 74 ] |
| 71 } | 75 } |
| 72 ] | 76 ] |
| 73 } | 77 } |
| 78 ], |
| 79 "objectPaintInvalidations": [ |
| 80 { |
| 81 "object": "LayoutBlockFlow (positioned) DIV id='C' class='overlap3'", |
| 82 "reason": "subtree" |
| 83 }, |
| 84 { |
| 85 "object": "LayoutBlockFlow (positioned) DIV id='C' class='overlap3'", |
| 86 "reason": "layoutObject insertion" |
| 87 } |
| 74 ] | 88 ] |
| 75 } | 89 } |
| 76 CASE 3, overlap2 gets removed. Since this does not resize the layer, there shoul
d only be a repaint of overlap2: | 90 CASE 3, overlap2 gets removed. Since this does not resize the layer, there shoul
d only be a repaint of overlap2: |
| 77 { | 91 { |
| 92 "name": "Content Root Layer", |
| 78 "bounds": [800, 600], | 93 "bounds": [800, 600], |
| 79 "children": [ | 94 "children": [ |
| 80 { | 95 { |
| 96 "name": "LayoutView #document", |
| 81 "bounds": [800, 600], | 97 "bounds": [800, 600], |
| 82 "contentsOpaque": true, | 98 "contentsOpaque": true, |
| 83 "drawsContent": true, | 99 "drawsContent": true, |
| 84 "children": [ | 100 "children": [ |
| 85 { | 101 { |
| 102 "name": "Squashing Containment Layer", |
| 86 "shouldFlattenTransform": false, | 103 "shouldFlattenTransform": false, |
| 87 "children": [ | 104 "children": [ |
| 88 { | 105 { |
| 106 "name": "LayoutBlockFlow (positioned) DIV class='composited'", |
| 89 "position": [60, 60], | 107 "position": [60, 60], |
| 90 "bounds": [400, 400], | 108 "bounds": [400, 400], |
| 91 "contentsOpaque": true, | 109 "contentsOpaque": true, |
| 92 "drawsContent": true, | 110 "drawsContent": true, |
| 93 "backgroundColor": "#808080" | 111 "backgroundColor": "#808080" |
| 94 }, | 112 }, |
| 95 { | 113 { |
| 114 "name": "Squashing Layer (first squashed layer: LayoutBlockFlow (p
ositioned) DIV id='A' class='overlap1')", |
| 96 "position": [140, 140], | 115 "position": [140, 140], |
| 97 "bounds": [260, 260], | 116 "bounds": [260, 260], |
| 98 "drawsContent": true, | 117 "drawsContent": true, |
| 99 "paintInvalidations": [ | 118 "paintInvalidations": [ |
| 100 { | 119 { |
| 101 "object": "LayoutBlockFlow (positioned) DIV id='B' class='over
lap2'", | 120 "object": "LayoutBlockFlow (positioned) DIV id='B' class='over
lap2'", |
| 102 "rect": [80, 80, 100, 100], | 121 "rect": [80, 80, 100, 100], |
| 103 "reason": "layoutObject removal" | 122 "reason": "layoutObject removal" |
| 104 } | 123 } |
| 105 ] | 124 ] |
| 106 } | 125 } |
| 107 ] | 126 ] |
| 108 } | 127 } |
| 109 ] | 128 ] |
| 110 } | 129 } |
| 130 ], |
| 131 "objectPaintInvalidations": [ |
| 132 { |
| 133 "object": "LayoutBlockFlow (positioned) DIV id='B' class='overlap2'", |
| 134 "reason": "layoutObject removal" |
| 135 } |
| 111 ] | 136 ] |
| 112 } | 137 } |
| 113 CASE 4, overlap1 gets removed: | 138 CASE 4, overlap1 gets removed: |
| 114 { | 139 { |
| 140 "name": "Content Root Layer", |
| 115 "bounds": [800, 600], | 141 "bounds": [800, 600], |
| 116 "children": [ | 142 "children": [ |
| 117 { | 143 { |
| 144 "name": "LayoutView #document", |
| 118 "bounds": [800, 600], | 145 "bounds": [800, 600], |
| 119 "contentsOpaque": true, | 146 "contentsOpaque": true, |
| 120 "drawsContent": true, | 147 "drawsContent": true, |
| 121 "children": [ | 148 "children": [ |
| 122 { | 149 { |
| 150 "name": "Squashing Containment Layer", |
| 123 "shouldFlattenTransform": false, | 151 "shouldFlattenTransform": false, |
| 124 "children": [ | 152 "children": [ |
| 125 { | 153 { |
| 154 "name": "LayoutBlockFlow (positioned) DIV class='composited'", |
| 126 "position": [60, 60], | 155 "position": [60, 60], |
| 127 "bounds": [400, 400], | 156 "bounds": [400, 400], |
| 128 "contentsOpaque": true, | 157 "contentsOpaque": true, |
| 129 "drawsContent": true, | 158 "drawsContent": true, |
| 130 "backgroundColor": "#808080" | 159 "backgroundColor": "#808080" |
| 131 }, | 160 }, |
| 132 { | 161 { |
| 162 "name": "Squashing Layer (first squashed layer: LayoutBlockFlow (p
ositioned) DIV id='C' class='overlap3')", |
| 133 "position": [300, 300], | 163 "position": [300, 300], |
| 134 "bounds": [100, 100], | 164 "bounds": [100, 100], |
| 135 "drawsContent": true, | 165 "drawsContent": true, |
| 136 "paintInvalidations": [ | 166 "paintInvalidations": [ |
| 137 { | 167 { |
| 138 "object": "LayoutBlockFlow (positioned) DIV id='C' class='over
lap3'", | 168 "object": "LayoutBlockFlow (positioned) DIV id='C' class='over
lap3'", |
| 139 "rect": [160, 160, 100, 100], | 169 "rect": [160, 160, 100, 100], |
| 140 "reason": "subtree" | 170 "reason": "subtree" |
| 141 }, | 171 }, |
| 142 { | 172 { |
| 143 "object": "LayoutBlockFlow (positioned) DIV id='A' class='over
lap1'", | 173 "object": "LayoutBlockFlow (positioned) DIV id='A' class='over
lap1'", |
| 144 "rect": [0, 0, 100, 100], | 174 "rect": [0, 0, 100, 100], |
| 145 "reason": "layoutObject removal" | 175 "reason": "layoutObject removal" |
| 146 }, | 176 }, |
| 147 { | 177 { |
| 148 "object": "LayoutBlockFlow (positioned) DIV id='C' class='over
lap3'", | 178 "object": "LayoutBlockFlow (positioned) DIV id='C' class='over
lap3'", |
| 149 "rect": [0, 0, 100, 100], | 179 "rect": [0, 0, 100, 100], |
| 150 "reason": "compositing update" | 180 "reason": "compositing update" |
| 151 } | 181 } |
| 152 ] | 182 ] |
| 153 } | 183 } |
| 154 ] | 184 ] |
| 155 } | 185 } |
| 156 ] | 186 ] |
| 157 } | 187 } |
| 188 ], |
| 189 "objectPaintInvalidations": [ |
| 190 { |
| 191 "object": "LayoutBlockFlow (positioned) DIV id='A' class='overlap1'", |
| 192 "reason": "layoutObject removal" |
| 193 }, |
| 194 { |
| 195 "object": "LayoutBlockFlow (positioned) DIV id='C' class='overlap3'", |
| 196 "reason": "subtree" |
| 197 }, |
| 198 { |
| 199 "object": "LayoutBlockFlow (positioned) DIV id='C' class='overlap3'", |
| 200 "reason": "compositing update" |
| 201 } |
| 158 ] | 202 ] |
| 159 } | 203 } |
| 160 CASE 5, overlap2 gets added back: | 204 CASE 5, overlap2 gets added back: |
| 161 { | 205 { |
| 206 "name": "Content Root Layer", |
| 162 "bounds": [800, 600], | 207 "bounds": [800, 600], |
| 163 "children": [ | 208 "children": [ |
| 164 { | 209 { |
| 210 "name": "LayoutView #document", |
| 165 "bounds": [800, 600], | 211 "bounds": [800, 600], |
| 166 "contentsOpaque": true, | 212 "contentsOpaque": true, |
| 167 "drawsContent": true, | 213 "drawsContent": true, |
| 168 "paintInvalidations": [ | |
| 169 { | |
| 170 "object": "LayoutBlockFlow (positioned) DIV id='B' class='overlap2'", | |
| 171 "reason": "subtree" | |
| 172 } | |
| 173 ], | |
| 174 "children": [ | 214 "children": [ |
| 175 { | 215 { |
| 216 "name": "Squashing Containment Layer", |
| 176 "shouldFlattenTransform": false, | 217 "shouldFlattenTransform": false, |
| 177 "children": [ | 218 "children": [ |
| 178 { | 219 { |
| 220 "name": "LayoutBlockFlow (positioned) DIV class='composited'", |
| 179 "position": [60, 60], | 221 "position": [60, 60], |
| 180 "bounds": [400, 400], | 222 "bounds": [400, 400], |
| 181 "contentsOpaque": true, | 223 "contentsOpaque": true, |
| 182 "drawsContent": true, | 224 "drawsContent": true, |
| 183 "backgroundColor": "#808080" | 225 "backgroundColor": "#808080" |
| 184 }, | 226 }, |
| 185 { | 227 { |
| 228 "name": "Squashing Layer (first squashed layer: LayoutBlockFlow (p
ositioned) DIV id='B' class='overlap2')", |
| 186 "position": [220, 220], | 229 "position": [220, 220], |
| 187 "bounds": [180, 180], | 230 "bounds": [180, 180], |
| 188 "drawsContent": true, | 231 "drawsContent": true, |
| 189 "paintInvalidations": [ | 232 "paintInvalidations": [ |
| 190 { | 233 { |
| 191 "object": "LayoutBlockFlow (positioned) DIV id='C' class='over
lap3'", | 234 "object": "LayoutBlockFlow (positioned) DIV id='C' class='over
lap3'", |
| 192 "rect": [80, 80, 100, 100], | 235 "rect": [80, 80, 100, 100], |
| 193 "reason": "compositing update" | 236 "reason": "compositing update" |
| 194 }, | 237 }, |
| 195 { | 238 { |
| 196 "object": "LayoutBlockFlow (positioned) DIV id='B' class='over
lap2'", | 239 "object": "LayoutBlockFlow (positioned) DIV id='B' class='over
lap2'", |
| 197 "rect": [0, 0, 100, 100], | 240 "rect": [0, 0, 100, 100], |
| 198 "reason": "layoutObject insertion" | 241 "reason": "layoutObject insertion" |
| 199 }, | 242 }, |
| 200 { | 243 { |
| 201 "object": "LayoutBlockFlow (positioned) DIV id='C' class='over
lap3'", | 244 "object": "LayoutBlockFlow (positioned) DIV id='C' class='over
lap3'", |
| 202 "rect": [0, 0, 100, 100], | 245 "rect": [0, 0, 100, 100], |
| 203 "reason": "subtree" | 246 "reason": "subtree" |
| 204 } | 247 } |
| 205 ] | 248 ] |
| 206 } | 249 } |
| 207 ] | 250 ] |
| 208 } | 251 } |
| 209 ] | 252 ] |
| 210 } | 253 } |
| 254 ], |
| 255 "objectPaintInvalidations": [ |
| 256 { |
| 257 "object": "LayoutBlockFlow (positioned) DIV id='B' class='overlap2'", |
| 258 "reason": "subtree" |
| 259 }, |
| 260 { |
| 261 "object": "LayoutBlockFlow (positioned) DIV id='C' class='overlap3'", |
| 262 "reason": "subtree" |
| 263 }, |
| 264 { |
| 265 "object": "LayoutBlockFlow (positioned) DIV id='C' class='overlap3'", |
| 266 "reason": "subtree" |
| 267 }, |
| 268 { |
| 269 "object": "LayoutBlockFlow (positioned) DIV id='B' class='overlap2'", |
| 270 "reason": "layoutObject insertion" |
| 271 }, |
| 272 { |
| 273 "object": "LayoutBlockFlow (positioned) DIV id='C' class='overlap3'", |
| 274 "reason": "compositing update" |
| 275 } |
| 211 ] | 276 ] |
| 212 } | 277 } |
| 213 CASE 6, overlap1 gets added back, and overlap3 gets removed: | 278 CASE 6, overlap1 gets added back, and overlap3 gets removed: |
| 214 { | 279 { |
| 280 "name": "Content Root Layer", |
| 215 "bounds": [800, 600], | 281 "bounds": [800, 600], |
| 216 "children": [ | 282 "children": [ |
| 217 { | 283 { |
| 284 "name": "LayoutView #document", |
| 218 "bounds": [800, 600], | 285 "bounds": [800, 600], |
| 219 "contentsOpaque": true, | 286 "contentsOpaque": true, |
| 220 "drawsContent": true, | 287 "drawsContent": true, |
| 221 "paintInvalidations": [ | |
| 222 { | |
| 223 "object": "LayoutBlockFlow (positioned) DIV id='A' class='overlap1'", | |
| 224 "reason": "subtree" | |
| 225 } | |
| 226 ], | |
| 227 "children": [ | 288 "children": [ |
| 228 { | 289 { |
| 290 "name": "Squashing Containment Layer", |
| 229 "shouldFlattenTransform": false, | 291 "shouldFlattenTransform": false, |
| 230 "children": [ | 292 "children": [ |
| 231 { | 293 { |
| 294 "name": "LayoutBlockFlow (positioned) DIV class='composited'", |
| 232 "position": [60, 60], | 295 "position": [60, 60], |
| 233 "bounds": [400, 400], | 296 "bounds": [400, 400], |
| 234 "contentsOpaque": true, | 297 "contentsOpaque": true, |
| 235 "drawsContent": true, | 298 "drawsContent": true, |
| 236 "backgroundColor": "#808080" | 299 "backgroundColor": "#808080" |
| 237 }, | 300 }, |
| 238 { | 301 { |
| 302 "name": "Squashing Layer (first squashed layer: LayoutBlockFlow (p
ositioned) DIV id='A' class='overlap1')", |
| 239 "position": [140, 140], | 303 "position": [140, 140], |
| 240 "bounds": [180, 180], | 304 "bounds": [180, 180], |
| 241 "drawsContent": true, | 305 "drawsContent": true, |
| 242 "paintInvalidations": [ | 306 "paintInvalidations": [ |
| 243 { | 307 { |
| 244 "object": "LayoutBlockFlow (positioned) DIV id='B' class='over
lap2'", | 308 "object": "LayoutBlockFlow (positioned) DIV id='B' class='over
lap2'", |
| 245 "rect": [80, 80, 100, 100], | 309 "rect": [80, 80, 100, 100], |
| 246 "reason": "compositing update" | 310 "reason": "compositing update" |
| 247 }, | 311 }, |
| 248 { | 312 { |
| (...skipping 10 matching lines...) Expand all Loading... |
| 259 "object": "LayoutBlockFlow (positioned) DIV id='B' class='over
lap2'", | 323 "object": "LayoutBlockFlow (positioned) DIV id='B' class='over
lap2'", |
| 260 "rect": [0, 0, 100, 100], | 324 "rect": [0, 0, 100, 100], |
| 261 "reason": "subtree" | 325 "reason": "subtree" |
| 262 } | 326 } |
| 263 ] | 327 ] |
| 264 } | 328 } |
| 265 ] | 329 ] |
| 266 } | 330 } |
| 267 ] | 331 ] |
| 268 } | 332 } |
| 333 ], |
| 334 "objectPaintInvalidations": [ |
| 335 { |
| 336 "object": "LayoutBlockFlow (positioned) DIV id='C' class='overlap3'", |
| 337 "reason": "layoutObject removal" |
| 338 }, |
| 339 { |
| 340 "object": "LayoutBlockFlow (positioned) DIV id='A' class='overlap1'", |
| 341 "reason": "subtree" |
| 342 }, |
| 343 { |
| 344 "object": "LayoutBlockFlow (positioned) DIV id='B' class='overlap2'", |
| 345 "reason": "subtree" |
| 346 }, |
| 347 { |
| 348 "object": "LayoutBlockFlow (positioned) DIV id='B' class='overlap2'", |
| 349 "reason": "subtree" |
| 350 }, |
| 351 { |
| 352 "object": "LayoutBlockFlow (positioned) DIV id='A' class='overlap1'", |
| 353 "reason": "layoutObject insertion" |
| 354 }, |
| 355 { |
| 356 "object": "LayoutBlockFlow (positioned) DIV id='B' class='overlap2'", |
| 357 "reason": "compositing update" |
| 358 } |
| 269 ] | 359 ] |
| 270 } | 360 } |
| 271 | 361 |
| OLD | NEW |