| OLD | NEW |
| 1 Basic repaint test for squashed layers. The entire squashing layer should not ne
ed repainting when only a portion of it is invalidated. Test interactively by us
ing --show-paint-rects and hovering over elements to change their color. | 1 Basic repaint test for squashed layers. The entire squashing layer should not ne
ed repainting when only a portion of it is invalidated. Test interactively by us
ing --show-paint-rects and hovering over elements to change their color. |
| 2 | 2 |
| 3 CASE 1, original layer tree: | 3 CASE 1, original layer tree: |
| 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": [100, 100], | 21 "bounds": [100, 100], |
| 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": [260, 260], | 29 "bounds": [260, 260], |
| 25 "drawsContent": true | 30 "drawsContent": true |
| 26 } | 31 } |
| 27 ] | 32 ] |
| 28 } | 33 } |
| 29 ] | 34 ] |
| 30 } | 35 } |
| 31 ] | 36 ] |
| 32 } | 37 } |
| 33 CASE 2, overlap1 changes color: | 38 CASE 2, overlap1 changes color: |
| 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 "children": [ | 48 "children": [ |
| 42 { | 49 { |
| 50 "name": "Squashing Containment Layer", |
| 43 "shouldFlattenTransform": false, | 51 "shouldFlattenTransform": false, |
| 44 "children": [ | 52 "children": [ |
| 45 { | 53 { |
| 54 "name": "LayoutBlockFlow (positioned) DIV class='composited'", |
| 46 "position": [60, 60], | 55 "position": [60, 60], |
| 47 "bounds": [100, 100], | 56 "bounds": [100, 100], |
| 48 "contentsOpaque": true, | 57 "contentsOpaque": true, |
| 49 "drawsContent": true, | 58 "drawsContent": true, |
| 50 "backgroundColor": "#808080" | 59 "backgroundColor": "#808080" |
| 51 }, | 60 }, |
| 52 { | 61 { |
| 62 "name": "Squashing Layer (first squashed layer: LayoutBlockFlow (p
ositioned) DIV id='A' class='overlap1')", |
| 53 "position": [140, 140], | 63 "position": [140, 140], |
| 54 "bounds": [260, 260], | 64 "bounds": [260, 260], |
| 55 "drawsContent": true, | 65 "drawsContent": true, |
| 56 "paintInvalidations": [ | 66 "paintInvalidations": [ |
| 57 { | 67 { |
| 58 "object": "LayoutBlockFlow (positioned) DIV id='A' class='over
lap1'", | 68 "object": "LayoutBlockFlow (positioned) DIV id='A' class='over
lap1'", |
| 59 "rect": [0, 0, 100, 100], | 69 "rect": [0, 0, 100, 100], |
| 60 "reason": "style change" | 70 "reason": "style change" |
| 61 } | 71 } |
| 62 ] | 72 ] |
| 63 } | 73 } |
| 64 ] | 74 ] |
| 65 } | 75 } |
| 66 ] | 76 ] |
| 67 } | 77 } |
| 78 ], |
| 79 "objectPaintInvalidations": [ |
| 80 { |
| 81 "object": "LayoutBlockFlow (positioned) DIV id='A' class='overlap1'", |
| 82 "reason": "style change" |
| 83 } |
| 68 ] | 84 ] |
| 69 } | 85 } |
| 70 CASE 3, overlap1 and overlap2 change color: | 86 CASE 3, overlap1 and overlap2 change color: |
| 71 { | 87 { |
| 88 "name": "Content Root Layer", |
| 72 "bounds": [800, 600], | 89 "bounds": [800, 600], |
| 73 "children": [ | 90 "children": [ |
| 74 { | 91 { |
| 92 "name": "LayoutView #document", |
| 75 "bounds": [800, 600], | 93 "bounds": [800, 600], |
| 76 "contentsOpaque": true, | 94 "contentsOpaque": true, |
| 77 "drawsContent": true, | 95 "drawsContent": true, |
| 78 "children": [ | 96 "children": [ |
| 79 { | 97 { |
| 98 "name": "Squashing Containment Layer", |
| 80 "shouldFlattenTransform": false, | 99 "shouldFlattenTransform": false, |
| 81 "children": [ | 100 "children": [ |
| 82 { | 101 { |
| 102 "name": "LayoutBlockFlow (positioned) DIV class='composited'", |
| 83 "position": [60, 60], | 103 "position": [60, 60], |
| 84 "bounds": [100, 100], | 104 "bounds": [100, 100], |
| 85 "contentsOpaque": true, | 105 "contentsOpaque": true, |
| 86 "drawsContent": true, | 106 "drawsContent": true, |
| 87 "backgroundColor": "#808080" | 107 "backgroundColor": "#808080" |
| 88 }, | 108 }, |
| 89 { | 109 { |
| 110 "name": "Squashing Layer (first squashed layer: LayoutBlockFlow (p
ositioned) DIV id='A' class='overlap1')", |
| 90 "position": [140, 140], | 111 "position": [140, 140], |
| 91 "bounds": [260, 260], | 112 "bounds": [260, 260], |
| 92 "drawsContent": true, | 113 "drawsContent": true, |
| 93 "paintInvalidations": [ | 114 "paintInvalidations": [ |
| 94 { | 115 { |
| 95 "object": "LayoutBlockFlow (positioned) DIV id='B' class='over
lap2'", | 116 "object": "LayoutBlockFlow (positioned) DIV id='B' class='over
lap2'", |
| 96 "rect": [80, 80, 100, 100], | 117 "rect": [80, 80, 100, 100], |
| 97 "reason": "style change" | 118 "reason": "style change" |
| 98 }, | 119 }, |
| 99 { | 120 { |
| 100 "object": "LayoutBlockFlow (positioned) DIV id='A' class='over
lap1'", | 121 "object": "LayoutBlockFlow (positioned) DIV id='A' class='over
lap1'", |
| 101 "rect": [0, 0, 100, 100], | 122 "rect": [0, 0, 100, 100], |
| 102 "reason": "style change" | 123 "reason": "style change" |
| 103 } | 124 } |
| 104 ] | 125 ] |
| 105 } | 126 } |
| 106 ] | 127 ] |
| 107 } | 128 } |
| 108 ] | 129 ] |
| 109 } | 130 } |
| 131 ], |
| 132 "objectPaintInvalidations": [ |
| 133 { |
| 134 "object": "LayoutBlockFlow (positioned) DIV id='A' class='overlap1'", |
| 135 "reason": "style change" |
| 136 }, |
| 137 { |
| 138 "object": "LayoutBlockFlow (positioned) DIV id='B' class='overlap2'", |
| 139 "reason": "style change" |
| 140 } |
| 110 ] | 141 ] |
| 111 } | 142 } |
| 112 CASE 4, overlap2 and overlap3 change color: | 143 CASE 4, overlap2 and overlap3 change color: |
| 113 { | 144 { |
| 145 "name": "Content Root Layer", |
| 114 "bounds": [800, 600], | 146 "bounds": [800, 600], |
| 115 "children": [ | 147 "children": [ |
| 116 { | 148 { |
| 149 "name": "LayoutView #document", |
| 117 "bounds": [800, 600], | 150 "bounds": [800, 600], |
| 118 "contentsOpaque": true, | 151 "contentsOpaque": true, |
| 119 "drawsContent": true, | 152 "drawsContent": true, |
| 120 "children": [ | 153 "children": [ |
| 121 { | 154 { |
| 155 "name": "Squashing Containment Layer", |
| 122 "shouldFlattenTransform": false, | 156 "shouldFlattenTransform": false, |
| 123 "children": [ | 157 "children": [ |
| 124 { | 158 { |
| 159 "name": "LayoutBlockFlow (positioned) DIV class='composited'", |
| 125 "position": [60, 60], | 160 "position": [60, 60], |
| 126 "bounds": [100, 100], | 161 "bounds": [100, 100], |
| 127 "contentsOpaque": true, | 162 "contentsOpaque": true, |
| 128 "drawsContent": true, | 163 "drawsContent": true, |
| 129 "backgroundColor": "#808080" | 164 "backgroundColor": "#808080" |
| 130 }, | 165 }, |
| 131 { | 166 { |
| 167 "name": "Squashing Layer (first squashed layer: LayoutBlockFlow (p
ositioned) DIV id='A' class='overlap1')", |
| 132 "position": [140, 140], | 168 "position": [140, 140], |
| 133 "bounds": [260, 260], | 169 "bounds": [260, 260], |
| 134 "drawsContent": true, | 170 "drawsContent": true, |
| 135 "paintInvalidations": [ | 171 "paintInvalidations": [ |
| 136 { | 172 { |
| 137 "object": "LayoutBlockFlow (positioned) DIV id='C' class='over
lap3'", | 173 "object": "LayoutBlockFlow (positioned) DIV id='C' class='over
lap3'", |
| 138 "rect": [160, 160, 100, 100], | 174 "rect": [160, 160, 100, 100], |
| 139 "reason": "style change" | 175 "reason": "style change" |
| 140 }, | 176 }, |
| 141 { | 177 { |
| 142 "object": "LayoutBlockFlow (positioned) DIV id='B' class='over
lap2'", | 178 "object": "LayoutBlockFlow (positioned) DIV id='B' class='over
lap2'", |
| 143 "rect": [80, 80, 100, 100], | 179 "rect": [80, 80, 100, 100], |
| 144 "reason": "style change" | 180 "reason": "style change" |
| 145 } | 181 } |
| 146 ] | 182 ] |
| 147 } | 183 } |
| 148 ] | 184 ] |
| 149 } | 185 } |
| 150 ] | 186 ] |
| 151 } | 187 } |
| 188 ], |
| 189 "objectPaintInvalidations": [ |
| 190 { |
| 191 "object": "LayoutBlockFlow (positioned) DIV id='B' class='overlap2'", |
| 192 "reason": "style change" |
| 193 }, |
| 194 { |
| 195 "object": "LayoutBlockFlow (positioned) DIV id='C' class='overlap3'", |
| 196 "reason": "style change" |
| 197 } |
| 152 ] | 198 ] |
| 153 } | 199 } |
| 154 CASE 5, overlap3 and overlap1 change color: | 200 CASE 5, overlap3 and overlap1 change color: |
| 155 { | 201 { |
| 202 "name": "Content Root Layer", |
| 156 "bounds": [800, 600], | 203 "bounds": [800, 600], |
| 157 "children": [ | 204 "children": [ |
| 158 { | 205 { |
| 206 "name": "LayoutView #document", |
| 159 "bounds": [800, 600], | 207 "bounds": [800, 600], |
| 160 "contentsOpaque": true, | 208 "contentsOpaque": true, |
| 161 "drawsContent": true, | 209 "drawsContent": true, |
| 162 "children": [ | 210 "children": [ |
| 163 { | 211 { |
| 212 "name": "Squashing Containment Layer", |
| 164 "shouldFlattenTransform": false, | 213 "shouldFlattenTransform": false, |
| 165 "children": [ | 214 "children": [ |
| 166 { | 215 { |
| 216 "name": "LayoutBlockFlow (positioned) DIV class='composited'", |
| 167 "position": [60, 60], | 217 "position": [60, 60], |
| 168 "bounds": [100, 100], | 218 "bounds": [100, 100], |
| 169 "contentsOpaque": true, | 219 "contentsOpaque": true, |
| 170 "drawsContent": true, | 220 "drawsContent": true, |
| 171 "backgroundColor": "#808080" | 221 "backgroundColor": "#808080" |
| 172 }, | 222 }, |
| 173 { | 223 { |
| 224 "name": "Squashing Layer (first squashed layer: LayoutBlockFlow (p
ositioned) DIV id='A' class='overlap1')", |
| 174 "position": [140, 140], | 225 "position": [140, 140], |
| 175 "bounds": [260, 260], | 226 "bounds": [260, 260], |
| 176 "drawsContent": true, | 227 "drawsContent": true, |
| 177 "paintInvalidations": [ | 228 "paintInvalidations": [ |
| 178 { | 229 { |
| 179 "object": "LayoutBlockFlow (positioned) DIV id='C' class='over
lap3'", | 230 "object": "LayoutBlockFlow (positioned) DIV id='C' class='over
lap3'", |
| 180 "rect": [160, 160, 100, 100], | 231 "rect": [160, 160, 100, 100], |
| 181 "reason": "style change" | 232 "reason": "style change" |
| 182 }, | 233 }, |
| 183 { | 234 { |
| 184 "object": "LayoutBlockFlow (positioned) DIV id='A' class='over
lap1'", | 235 "object": "LayoutBlockFlow (positioned) DIV id='A' class='over
lap1'", |
| 185 "rect": [0, 0, 100, 100], | 236 "rect": [0, 0, 100, 100], |
| 186 "reason": "style change" | 237 "reason": "style change" |
| 187 } | 238 } |
| 188 ] | 239 ] |
| 189 } | 240 } |
| 190 ] | 241 ] |
| 191 } | 242 } |
| 192 ] | 243 ] |
| 193 } | 244 } |
| 245 ], |
| 246 "objectPaintInvalidations": [ |
| 247 { |
| 248 "object": "LayoutBlockFlow (positioned) DIV id='A' class='overlap1'", |
| 249 "reason": "style change" |
| 250 }, |
| 251 { |
| 252 "object": "LayoutBlockFlow (positioned) DIV id='C' class='overlap3'", |
| 253 "reason": "style change" |
| 254 } |
| 194 ] | 255 ] |
| 195 } | 256 } |
| 196 | 257 |
| OLD | NEW |