| 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 20 matching lines...) Expand all Loading... |
| 31 ] | 31 ] |
| 32 } | 32 } |
| 33 CASE 2, overlap3 gets added: | 33 CASE 2, overlap3 gets added: |
| 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": [ |
| 42 { |
| 43 "object": "LayoutBlockFlow (positioned) DIV id='C' class='overlap3'", |
| 44 "rect": [0, 0, 0, 0], |
| 45 "reason": "layer" |
| 46 } |
| 47 ], |
| 41 "children": [ | 48 "children": [ |
| 42 { | 49 { |
| 43 "shouldFlattenTransform": false, | 50 "shouldFlattenTransform": false, |
| 44 "children": [ | 51 "children": [ |
| 45 { | 52 { |
| 46 "position": [60, 60], | 53 "position": [60, 60], |
| 47 "bounds": [400, 400], | 54 "bounds": [400, 400], |
| 48 "contentsOpaque": true, | 55 "contentsOpaque": true, |
| 49 "drawsContent": true, | 56 "drawsContent": true, |
| 50 "backgroundColor": "#808080" | 57 "backgroundColor": "#808080" |
| 51 }, | 58 }, |
| 52 { | 59 { |
| 53 "position": [140, 140], | 60 "position": [140, 140], |
| 54 "bounds": [260, 260], | 61 "bounds": [260, 260], |
| 55 "drawsContent": true, | 62 "drawsContent": true, |
| 56 "repaintRects": [ | 63 "paintInvalidations": [ |
| 57 [160, 160, 100, 100] | 64 { |
| 65 "object": "LayoutBlockFlow (positioned) DIV id='C' class='over
lap3'", |
| 66 "rect": [160, 160, 100, 100], |
| 67 "reason": "location change" |
| 68 } |
| 58 ] | 69 ] |
| 59 } | 70 } |
| 60 ] | 71 ] |
| 61 } | 72 } |
| 62 ] | 73 ] |
| 63 } | 74 } |
| 64 ] | 75 ] |
| 65 } | 76 } |
| 66 CASE 3, overlap2 gets removed. Since this does not resize the layer, there shoul
d only be a repaint of overlap2: | 77 CASE 3, overlap2 gets removed. Since this does not resize the layer, there shoul
d only be a repaint of overlap2: |
| 67 { | 78 { |
| (...skipping 11 matching lines...) Expand all Loading... |
| 79 "position": [60, 60], | 90 "position": [60, 60], |
| 80 "bounds": [400, 400], | 91 "bounds": [400, 400], |
| 81 "contentsOpaque": true, | 92 "contentsOpaque": true, |
| 82 "drawsContent": true, | 93 "drawsContent": true, |
| 83 "backgroundColor": "#808080" | 94 "backgroundColor": "#808080" |
| 84 }, | 95 }, |
| 85 { | 96 { |
| 86 "position": [140, 140], | 97 "position": [140, 140], |
| 87 "bounds": [260, 260], | 98 "bounds": [260, 260], |
| 88 "drawsContent": true, | 99 "drawsContent": true, |
| 89 "repaintRects": [ | 100 "paintInvalidations": [ |
| 90 [80, 80, 100, 100] | 101 { |
| 102 "object": "LayoutBlockFlow (positioned) DIV id='B' class='over
lap2'", |
| 103 "rect": [80, 80, 100, 100], |
| 104 "reason": "layoutObject removal" |
| 105 } |
| 91 ] | 106 ] |
| 92 } | 107 } |
| 93 ] | 108 ] |
| 94 } | 109 } |
| 95 ] | 110 ] |
| 96 } | 111 } |
| 97 ] | 112 ] |
| 98 } | 113 } |
| 99 CASE 4, overlap1 gets removed: | 114 CASE 4, overlap1 gets removed: |
| 100 { | 115 { |
| (...skipping 11 matching lines...) Expand all Loading... |
| 112 "position": [60, 60], | 127 "position": [60, 60], |
| 113 "bounds": [400, 400], | 128 "bounds": [400, 400], |
| 114 "contentsOpaque": true, | 129 "contentsOpaque": true, |
| 115 "drawsContent": true, | 130 "drawsContent": true, |
| 116 "backgroundColor": "#808080" | 131 "backgroundColor": "#808080" |
| 117 }, | 132 }, |
| 118 { | 133 { |
| 119 "position": [300, 300], | 134 "position": [300, 300], |
| 120 "bounds": [100, 100], | 135 "bounds": [100, 100], |
| 121 "drawsContent": true, | 136 "drawsContent": true, |
| 122 "repaintRects": [ | 137 "paintInvalidations": [ |
| 123 [160, 160, 100, 100], | 138 { |
| 124 [0, 0, 100, 100], | 139 "object": "LayoutBlockFlow (positioned) DIV id='A' class='over
lap1'", |
| 125 [0, 0, 100, 100] | 140 "rect": [0, 0, 100, 100], |
| 141 "reason": "layoutObject removal" |
| 142 }, |
| 143 { |
| 144 "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], |
| 151 "reason": "location change" |
| 152 } |
| 126 ] | 153 ] |
| 127 } | 154 } |
| 128 ] | 155 ] |
| 129 } | 156 } |
| 130 ] | 157 ] |
| 131 } | 158 } |
| 132 ] | 159 ] |
| 133 } | 160 } |
| 134 CASE 5, overlap2 gets added back: | 161 CASE 5, overlap2 gets added back: |
| 135 { | 162 { |
| 136 "bounds": [800, 600], | 163 "bounds": [800, 600], |
| 137 "children": [ | 164 "children": [ |
| 138 { | 165 { |
| 139 "bounds": [800, 600], | 166 "bounds": [800, 600], |
| 140 "contentsOpaque": true, | 167 "contentsOpaque": true, |
| 141 "drawsContent": true, | 168 "drawsContent": true, |
| 169 "paintInvalidations": [ |
| 170 { |
| 171 "object": "LayoutBlockFlow (positioned) DIV id='B' class='overlap2'", |
| 172 "rect": [0, 0, 0, 0], |
| 173 "reason": "layer" |
| 174 } |
| 175 ], |
| 142 "children": [ | 176 "children": [ |
| 143 { | 177 { |
| 144 "shouldFlattenTransform": false, | 178 "shouldFlattenTransform": false, |
| 145 "children": [ | 179 "children": [ |
| 146 { | 180 { |
| 147 "position": [60, 60], | 181 "position": [60, 60], |
| 148 "bounds": [400, 400], | 182 "bounds": [400, 400], |
| 149 "contentsOpaque": true, | 183 "contentsOpaque": true, |
| 150 "drawsContent": true, | 184 "drawsContent": true, |
| 151 "backgroundColor": "#808080" | 185 "backgroundColor": "#808080" |
| 152 }, | 186 }, |
| 153 { | 187 { |
| 154 "position": [220, 220], | 188 "position": [220, 220], |
| 155 "bounds": [180, 180], | 189 "bounds": [180, 180], |
| 156 "drawsContent": true, | 190 "drawsContent": true, |
| 157 "repaintRects": [ | 191 "paintInvalidations": [ |
| 158 [80, 80, 100, 100], | 192 { |
| 159 [0, 0, 100, 100], | 193 "object": "LayoutBlockFlow (positioned) DIV id='B' class='over
lap2'", |
| 160 [0, 0, 100, 100] | 194 "rect": [0, 0, 100, 100], |
| 195 "reason": "layoutObject insertion" |
| 196 }, |
| 197 { |
| 198 "object": "LayoutBlockFlow (positioned) DIV id='C' class='over
lap3'", |
| 199 "rect": [0, 0, 100, 100], |
| 200 "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 } |
| 161 ] | 207 ] |
| 162 } | 208 } |
| 163 ] | 209 ] |
| 164 } | 210 } |
| 165 ] | 211 ] |
| 166 } | 212 } |
| 167 ] | 213 ] |
| 168 } | 214 } |
| 169 CASE 6, overlap1 gets added back, and overlap3 gets removed: | 215 CASE 6, overlap1 gets added back, and overlap3 gets removed: |
| 170 { | 216 { |
| 171 "bounds": [800, 600], | 217 "bounds": [800, 600], |
| 172 "children": [ | 218 "children": [ |
| 173 { | 219 { |
| 174 "bounds": [800, 600], | 220 "bounds": [800, 600], |
| 175 "contentsOpaque": true, | 221 "contentsOpaque": true, |
| 176 "drawsContent": true, | 222 "drawsContent": true, |
| 223 "paintInvalidations": [ |
| 224 { |
| 225 "object": "LayoutBlockFlow (positioned) DIV id='A' class='overlap1'", |
| 226 "rect": [0, 0, 0, 0], |
| 227 "reason": "layer" |
| 228 } |
| 229 ], |
| 177 "children": [ | 230 "children": [ |
| 178 { | 231 { |
| 179 "shouldFlattenTransform": false, | 232 "shouldFlattenTransform": false, |
| 180 "children": [ | 233 "children": [ |
| 181 { | 234 { |
| 182 "position": [60, 60], | 235 "position": [60, 60], |
| 183 "bounds": [400, 400], | 236 "bounds": [400, 400], |
| 184 "contentsOpaque": true, | 237 "contentsOpaque": true, |
| 185 "drawsContent": true, | 238 "drawsContent": true, |
| 186 "backgroundColor": "#808080" | 239 "backgroundColor": "#808080" |
| 187 }, | 240 }, |
| 188 { | 241 { |
| 189 "position": [140, 140], | 242 "position": [140, 140], |
| 190 "bounds": [180, 180], | 243 "bounds": [180, 180], |
| 191 "drawsContent": true, | 244 "drawsContent": true, |
| 192 "repaintRects": [ | 245 "paintInvalidations": [ |
| 193 [80, 80, 100, 100], | 246 { |
| 194 [80, 80, 100, 100], | 247 "object": "LayoutBlockFlow (positioned) DIV id='A' class='over
lap1'", |
| 195 [0, 0, 100, 100], | 248 "rect": [0, 0, 100, 100], |
| 196 [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'", |
| 258 "rect": [80, 80, 100, 100], |
| 259 "reason": "location change" |
| 260 }, |
| 261 { |
| 262 "object": "LayoutBlockFlow (positioned) DIV id='C' class='over
lap3'", |
| 263 "rect": [80, 80, 100, 100], |
| 264 "reason": "layoutObject removal" |
| 265 } |
| 197 ] | 266 ] |
| 198 } | 267 } |
| 199 ] | 268 ] |
| 200 } | 269 } |
| 201 ] | 270 ] |
| 202 } | 271 } |
| 203 ] | 272 ] |
| 204 } | 273 } |
| 205 | 274 |
| OLD | NEW |