| OLD | NEW |
| 1 { | 1 { |
| 2 "name": "Content Root Layer", | 2 "layers": [ |
| 3 "bounds": [800, 600], | |
| 4 "children": [ | |
| 5 { | 3 { |
| 6 "name": "LayoutView #document", | 4 "name": "LayoutView #document", |
| 7 "bounds": [800, 600], | 5 "bounds": [800, 600], |
| 8 "contentsOpaque": true, | 6 "contentsOpaque": true, |
| 9 "drawsContent": true, | 7 "drawsContent": true |
| 10 "children": [ | 8 }, |
| 11 { | 9 { |
| 12 "name": "LayoutBlockFlow (positioned) DIV class='outer A'", | 10 "name": "LayoutBlockFlow (positioned) DIV class='outer A'", |
| 13 "position": [6, 6], | 11 "position": [6, 6], |
| 14 "bounds": [340, 282], | 12 "bounds": [340, 282], |
| 15 "drawsContent": true, | 13 "drawsContent": true |
| 16 "children": [ | 14 }, |
| 17 { | 15 { |
| 18 "name": "LayoutBlockFlow (relative positioned) DIV class='scroller
'", | 16 "name": "LayoutBlockFlow (relative positioned) DIV class='scroller'", |
| 19 "position": [32, 32], | 17 "position": [32, 32], |
| 20 "bounds": [278, 218], | 18 "bounds": [278, 218], |
| 21 "shouldFlattenTransform": false, | 19 "shouldFlattenTransform": false, |
| 22 "drawsContent": true, | 20 "drawsContent": true, |
| 23 "backgroundColor": "#FFFFFF", | 21 "backgroundColor": "#FFFFFF" |
| 24 "children": [ | 22 }, |
| 25 { | 23 { |
| 26 "name": "Scrolling Layer", | 24 "name": "Scrolling Layer", |
| 27 "position": [29, 29], | 25 "position": [29, 29], |
| 28 "bounds": [220, 160], | 26 "bounds": [220, 160], |
| 29 "shouldFlattenTransform": false, | 27 "shouldFlattenTransform": false |
| 30 "children": [ | 28 }, |
| 31 { | 29 { |
| 32 "name": "Scrolling Contents Layer", | 30 "name": "Scrolling Contents Layer", |
| 33 "bounds": [220, 236], | 31 "bounds": [220, 236], |
| 34 "drawsContent": true | 32 "drawsContent": true |
| 35 } | 33 }, |
| 36 ] | 34 { |
| 37 }, | 35 "name": "Overflow Controls Host Layer", |
| 38 { | 36 "position": [24, 24], |
| 39 "name": "Overflow Controls Host Layer", | 37 "bounds": [230, 170] |
| 40 "position": [24, 24], | 38 }, |
| 41 "bounds": [230, 170], | 39 { |
| 42 "children": [ | 40 "name": "Vertical Scrollbar Layer", |
| 43 { | 41 "position": [218, 5], |
| 44 "name": "Vertical Scrollbar Layer", | 42 "bounds": [7, 160] |
| 45 "position": [218, 5], | 43 }, |
| 46 "bounds": [7, 160] | 44 { |
| 47 } | 45 "name": "LayoutBlockFlow (positioned) DIV class='outer B'", |
| 48 ] | 46 "position": [355, 6], |
| 49 } | 47 "bounds": [340, 282], |
| 50 ] | 48 "drawsContent": true |
| 51 } | 49 }, |
| 52 ] | 50 { |
| 53 }, | 51 "name": "LayoutBlockFlow DIV class='scroller'", |
| 54 { | 52 "position": [32, 32], |
| 55 "name": "LayoutBlockFlow (positioned) DIV class='outer B'", | 53 "bounds": [278, 218], |
| 56 "position": [355, 6], | 54 "shouldFlattenTransform": false, |
| 57 "bounds": [340, 282], | 55 "drawsContent": true, |
| 58 "drawsContent": true, | 56 "backgroundColor": "#FFFFFF" |
| 59 "children": [ | 57 }, |
| 60 { | 58 { |
| 61 "name": "LayoutBlockFlow DIV class='scroller'", | 59 "name": "Scrolling Layer", |
| 62 "position": [32, 32], | 60 "position": [29, 29], |
| 63 "bounds": [278, 218], | 61 "bounds": [220, 160], |
| 64 "shouldFlattenTransform": false, | 62 "shouldFlattenTransform": false |
| 65 "drawsContent": true, | 63 }, |
| 66 "backgroundColor": "#FFFFFF", | 64 { |
| 67 "children": [ | 65 "name": "Scrolling Contents Layer", |
| 68 { | 66 "bounds": [220, 236], |
| 69 "name": "Scrolling Layer", | 67 "drawsContent": true |
| 70 "position": [29, 29], | 68 }, |
| 71 "bounds": [220, 160], | 69 { |
| 72 "shouldFlattenTransform": false, | 70 "name": "LayoutBlockFlow (relative positioned) DIV class='content'", |
| 73 "children": [ | 71 "position": [73, 73], |
| 74 { | 72 "bounds": [196, 212], |
| 75 "name": "Scrolling Contents Layer", | 73 "contentsOpaque": true, |
| 76 "bounds": [220, 236], | 74 "drawsContent": true, |
| 77 "drawsContent": true | 75 "backgroundColor": "#DDDDDD" |
| 78 } | 76 }, |
| 79 ] | 77 { |
| 80 } | 78 "name": "Overflow Controls Host Layer", |
| 81 ] | 79 "position": [56, 56], |
| 82 }, | 80 "bounds": [230, 170] |
| 83 { | 81 }, |
| 84 "name": "LayoutBlockFlow (relative positioned) DIV class='content'
", | 82 { |
| 85 "position": [73, 73], | 83 "name": "Vertical Scrollbar Layer", |
| 86 "bounds": [196, 212], | 84 "position": [218, 5], |
| 87 "contentsOpaque": true, | 85 "bounds": [7, 160] |
| 88 "drawsContent": true, | 86 }, |
| 89 "backgroundColor": "#DDDDDD" | 87 { |
| 90 }, | 88 "name": "LayoutBlockFlow (positioned) DIV class='outer C'", |
| 91 { | 89 "position": [6, 297], |
| 92 "name": "Overflow Controls Host Layer", | 90 "bounds": [340, 282], |
| 93 "position": [56, 56], | 91 "drawsContent": true |
| 94 "bounds": [230, 170], | 92 }, |
| 95 "children": [ | 93 { |
| 96 { | 94 "name": "Ancestor Clipping Layer", |
| 97 "name": "Vertical Scrollbar Layer", | 95 "position": [40, 40], |
| 98 "position": [218, 5], | 96 "bounds": [260, 100], |
| 99 "bounds": [7, 160] | 97 "shouldFlattenTransform": false |
| 100 } | 98 }, |
| 101 ] | 99 { |
| 102 } | 100 "name": "LayoutBlockFlow DIV class='scroller'", |
| 103 ] | 101 "position": [-9, -9], |
| 104 }, | 102 "bounds": [278, 218], |
| 105 { | 103 "shouldFlattenTransform": false, |
| 106 "name": "LayoutBlockFlow (positioned) DIV class='outer C'", | 104 "drawsContent": true, |
| 107 "position": [6, 297], | 105 "backgroundColor": "#FFFFFF" |
| 108 "bounds": [340, 282], | 106 }, |
| 109 "drawsContent": true, | 107 { |
| 110 "children": [ | 108 "name": "Scrolling Layer", |
| 111 { | 109 "position": [29, 29], |
| 112 "name": "Ancestor Clipping Layer", | 110 "bounds": [220, 160], |
| 113 "position": [40, 40], | 111 "shouldFlattenTransform": false |
| 114 "bounds": [260, 100], | 112 }, |
| 115 "shouldFlattenTransform": false, | 113 { |
| 116 "children": [ | 114 "name": "Scrolling Contents Layer", |
| 117 { | 115 "bounds": [220, 236], |
| 118 "name": "LayoutBlockFlow DIV class='scroller'", | 116 "drawsContent": true |
| 119 "position": [-9, -9], | 117 }, |
| 120 "bounds": [278, 218], | 118 { |
| 121 "shouldFlattenTransform": false, | 119 "name": "LayoutBlockFlow (relative positioned) DIV class='content'", |
| 122 "drawsContent": true, | 120 "position": [72, 72], |
| 123 "backgroundColor": "#FFFFFF", | 121 "bounds": [196, 212], |
| 124 "children": [ | 122 "contentsOpaque": true, |
| 125 { | 123 "drawsContent": true, |
| 126 "name": "Scrolling Layer", | 124 "backgroundColor": "#DDDDDD" |
| 127 "position": [29, 29], | 125 }, |
| 128 "bounds": [220, 160], | 126 { |
| 129 "shouldFlattenTransform": false, | 127 "name": "Overflow Controls Ancestor Clipping Layer", |
| 130 "children": [ | 128 "position": [40, 40], |
| 131 { | 129 "bounds": [260, 100] |
| 132 "name": "Scrolling Contents Layer", | 130 }, |
| 133 "bounds": [220, 236], | 131 { |
| 134 "drawsContent": true | 132 "name": "Overflow Controls Host Layer", |
| 135 } | 133 "position": [15, 15], |
| 136 ] | 134 "bounds": [230, 170] |
| 137 } | 135 }, |
| 138 ] | 136 { |
| 139 } | 137 "name": "Vertical Scrollbar Layer", |
| 140 ] | 138 "position": [218, 5], |
| 141 }, | 139 "bounds": [7, 160] |
| 142 { | 140 }, |
| 143 "name": "LayoutBlockFlow (relative positioned) DIV class='content'
", | 141 { |
| 144 "position": [72, 72], | 142 "name": "LayoutBlockFlow (positioned) DIV class='outer D'", |
| 145 "bounds": [196, 212], | 143 "position": [355, 297], |
| 146 "contentsOpaque": true, | 144 "bounds": [340, 282], |
| 147 "drawsContent": true, | 145 "drawsContent": true |
| 148 "backgroundColor": "#DDDDDD" | 146 }, |
| 149 }, | 147 { |
| 150 { | 148 "name": "LayoutBlockFlow (relative positioned) DIV class='clipper'", |
| 151 "name": "Overflow Controls Ancestor Clipping Layer", | 149 "position": [24, 24], |
| 152 "position": [40, 40], | 150 "bounds": [292, 200], |
| 153 "bounds": [260, 100], | 151 "drawsContent": true |
| 154 "children": [ | 152 }, |
| 155 { | 153 { |
| 156 "name": "Overflow Controls Host Layer", | 154 "name": "Child Containment Layer", |
| 157 "position": [15, 15], | 155 "position": [10, 10], |
| 158 "bounds": [230, 170], | 156 "bounds": [272, 180] |
| 159 "children": [ | 157 }, |
| 160 { | 158 { |
| 161 "name": "Vertical Scrollbar Layer", | 159 "name": "Ancestor Clipping Layer", |
| 162 "position": [218, 5], | 160 "position": [6, 6], |
| 163 "bounds": [7, 160] | 161 "bounds": [260, 100], |
| 164 } | 162 "shouldFlattenTransform": false |
| 165 ] | 163 }, |
| 166 } | 164 { |
| 167 ] | 165 "name": "LayoutBlockFlow DIV class='scroller'", |
| 168 } | 166 "position": [-9, -9], |
| 169 ] | 167 "bounds": [278, 218], |
| 170 }, | 168 "shouldFlattenTransform": false, |
| 171 { | 169 "drawsContent": true, |
| 172 "name": "LayoutBlockFlow (positioned) DIV class='outer D'", | 170 "backgroundColor": "#FFFFFF" |
| 173 "position": [355, 297], | 171 }, |
| 174 "bounds": [340, 282], | 172 { |
| 175 "drawsContent": true, | 173 "name": "Scrolling Layer", |
| 176 "children": [ | 174 "position": [29, 29], |
| 177 { | 175 "bounds": [220, 160], |
| 178 "name": "LayoutBlockFlow (relative positioned) DIV class='clipper'
", | 176 "shouldFlattenTransform": false |
| 179 "position": [24, 24], | 177 }, |
| 180 "bounds": [292, 200], | 178 { |
| 181 "drawsContent": true, | 179 "name": "Scrolling Contents Layer", |
| 182 "children": [ | 180 "bounds": [220, 236], |
| 183 { | 181 "drawsContent": true |
| 184 "name": "Child Containment Layer", | 182 }, |
| 185 "position": [10, 10], | 183 { |
| 186 "bounds": [272, 180], | 184 "name": "LayoutBlockFlow (relative positioned) DIV class='content'", |
| 187 "children": [ | 185 "position": [72, 72], |
| 188 { | 186 "bounds": [196, 212], |
| 189 "name": "Ancestor Clipping Layer", | 187 "contentsOpaque": true, |
| 190 "position": [6, 6], | 188 "drawsContent": true, |
| 191 "bounds": [260, 100], | 189 "backgroundColor": "#DDDDDD" |
| 192 "shouldFlattenTransform": false, | 190 }, |
| 193 "children": [ | 191 { |
| 194 { | 192 "name": "Overflow Controls Ancestor Clipping Layer", |
| 195 "name": "LayoutBlockFlow DIV class='scroller'", | 193 "position": [40, 40], |
| 196 "position": [-9, -9], | 194 "bounds": [260, 100] |
| 197 "bounds": [278, 218], | 195 }, |
| 198 "shouldFlattenTransform": false, | 196 { |
| 199 "drawsContent": true, | 197 "name": "Overflow Controls Host Layer", |
| 200 "backgroundColor": "#FFFFFF", | 198 "position": [15, 15], |
| 201 "children": [ | 199 "bounds": [230, 170] |
| 202 { | 200 }, |
| 203 "name": "Scrolling Layer", | 201 { |
| 204 "position": [29, 29], | 202 "name": "Vertical Scrollbar Layer", |
| 205 "bounds": [220, 160], | 203 "position": [218, 5], |
| 206 "shouldFlattenTransform": false, | 204 "bounds": [7, 160] |
| 207 "children": [ | |
| 208 { | |
| 209 "name": "Scrolling Contents Layer", | |
| 210 "bounds": [220, 236], | |
| 211 "drawsContent": true | |
| 212 } | |
| 213 ] | |
| 214 } | |
| 215 ] | |
| 216 } | |
| 217 ] | |
| 218 } | |
| 219 ] | |
| 220 } | |
| 221 ] | |
| 222 }, | |
| 223 { | |
| 224 "name": "LayoutBlockFlow (relative positioned) DIV class='content'
", | |
| 225 "position": [72, 72], | |
| 226 "bounds": [196, 212], | |
| 227 "contentsOpaque": true, | |
| 228 "drawsContent": true, | |
| 229 "backgroundColor": "#DDDDDD" | |
| 230 }, | |
| 231 { | |
| 232 "name": "Overflow Controls Ancestor Clipping Layer", | |
| 233 "position": [40, 40], | |
| 234 "bounds": [260, 100], | |
| 235 "children": [ | |
| 236 { | |
| 237 "name": "Overflow Controls Host Layer", | |
| 238 "position": [15, 15], | |
| 239 "bounds": [230, 170], | |
| 240 "children": [ | |
| 241 { | |
| 242 "name": "Vertical Scrollbar Layer", | |
| 243 "position": [218, 5], | |
| 244 "bounds": [7, 160] | |
| 245 } | |
| 246 ] | |
| 247 } | |
| 248 ] | |
| 249 } | |
| 250 ] | |
| 251 } | |
| 252 ] | |
| 253 } | 205 } |
| 254 ] | 206 ] |
| 255 } | 207 } |
| 256 | 208 |
| OLD | NEW |