| OLD | NEW |
| 1 Before: | 1 Before: |
| 2 { | 2 { |
| 3 "name": "Content Root Layer", | 3 "layers": [ |
| 4 "bounds": [785, 802], | |
| 5 "children": [ | |
| 6 { | 4 { |
| 7 "name": "LayoutView #document", | 5 "name": "LayoutView #document", |
| 8 "bounds": [785, 802], | 6 "bounds": [785, 802], |
| 9 "contentsOpaque": true, | 7 "contentsOpaque": true, |
| 8 "drawsContent": true |
| 9 }, |
| 10 { |
| 11 "name": "LayoutBlockFlow (relative positioned) DIV id='to-animate1' class=
'box animating1'", |
| 12 "position": [18, 120], |
| 13 "bounds": [100, 100], |
| 14 "contentsOpaque": true, |
| 10 "drawsContent": true, | 15 "drawsContent": true, |
| 11 "children": [ | 16 "backgroundColor": "#0000FF", |
| 12 { | 17 "transform": [ |
| 13 "name": "LayoutBlockFlow (relative positioned) DIV id='to-animate1' cl
ass='box animating1'", | 18 [...], |
| 14 "position": [18, 120], | 19 [...], |
| 15 "bounds": [100, 100], | 20 [...], |
| 16 "contentsOpaque": true, | 21 [...] |
| 17 "drawsContent": true, | |
| 18 "backgroundColor": "#0000FF", | |
| 19 "transform": [ | |
| 20 [...], | |
| 21 [...], | |
| 22 [...], | |
| 23 [...] | |
| 24 ] | |
| 25 }, | |
| 26 { | |
| 27 "name": "LayoutBlockFlow (relative positioned) DIV class='container'", | |
| 28 "position": [47, 230], | |
| 29 "bounds": [144, 452], | |
| 30 "drawsContent": true, | |
| 31 "backgroundColor": "#FFFFFF", | |
| 32 "children": [ | |
| 33 { | |
| 34 "name": "Squashing Containment Layer", | |
| 35 "shouldFlattenTransform": false, | |
| 36 "children": [ | |
| 37 { | |
| 38 "name": "LayoutBlockFlow (relative positioned) DIV class='box
gray force-layer'", | |
| 39 "position": [22, 11], | |
| 40 "bounds": [100, 100], | |
| 41 "contentsOpaque": true, | |
| 42 "drawsContent": true, | |
| 43 "backgroundColor": "#808080", | |
| 44 "transform": [ | |
| 45 [...], | |
| 46 [...], | |
| 47 [...], | |
| 48 [...] | |
| 49 ] | |
| 50 }, | |
| 51 { | |
| 52 "name": "Squashing Layer (first squashed layer: LayoutBlockFlo
w (relative positioned) DIV class='box yellow')", | |
| 53 "position": [-29, 462], | |
| 54 "bounds": [100, 100], | |
| 55 "drawsContent": true | |
| 56 } | |
| 57 ] | |
| 58 } | |
| 59 ] | |
| 60 } | |
| 61 ] | 22 ] |
| 23 }, |
| 24 { |
| 25 "name": "LayoutBlockFlow (relative positioned) DIV class='container'", |
| 26 "position": [47, 230], |
| 27 "bounds": [144, 452], |
| 28 "drawsContent": true, |
| 29 "backgroundColor": "#FFFFFF" |
| 30 }, |
| 31 { |
| 32 "name": "Squashing Containment Layer", |
| 33 "shouldFlattenTransform": false |
| 34 }, |
| 35 { |
| 36 "name": "LayoutBlockFlow (relative positioned) DIV class='box gray force-l
ayer'", |
| 37 "position": [22, 11], |
| 38 "bounds": [100, 100], |
| 39 "contentsOpaque": true, |
| 40 "drawsContent": true, |
| 41 "backgroundColor": "#808080", |
| 42 "transform": [ |
| 43 [...], |
| 44 [...], |
| 45 [...], |
| 46 [...] |
| 47 ] |
| 48 }, |
| 49 { |
| 50 "name": "Squashing Layer (first squashed layer: LayoutBlockFlow (relative
positioned) DIV class='box yellow')", |
| 51 "position": [-29, 462], |
| 52 "bounds": [100, 100], |
| 53 "drawsContent": true |
| 62 } | 54 } |
| 63 ] | 55 ] |
| 64 } | 56 } |
| 65 | 57 |
| 66 After: | 58 After: |
| 67 { | 59 { |
| 68 "name": "Content Root Layer", | 60 "layers": [ |
| 69 "bounds": [785, 802], | |
| 70 "children": [ | |
| 71 { | 61 { |
| 72 "name": "LayoutView #document", | 62 "name": "LayoutView #document", |
| 73 "bounds": [785, 802], | 63 "bounds": [785, 802], |
| 74 "contentsOpaque": true, | 64 "contentsOpaque": true, |
| 65 "drawsContent": true |
| 66 }, |
| 67 { |
| 68 "name": "LayoutBlockFlow (relative positioned) DIV id='to-animate1' class=
'box animating1'", |
| 69 "position": [18, 120], |
| 70 "bounds": [100, 100], |
| 71 "contentsOpaque": true, |
| 75 "drawsContent": true, | 72 "drawsContent": true, |
| 76 "children": [ | 73 "backgroundColor": "#0000FF", |
| 77 { | 74 "transform": [ |
| 78 "name": "LayoutBlockFlow (relative positioned) DIV id='to-animate1' cl
ass='box animating1'", | 75 [...], |
| 79 "position": [18, 120], | 76 [...], |
| 80 "bounds": [100, 100], | 77 [...], |
| 81 "contentsOpaque": true, | 78 [...] |
| 82 "drawsContent": true, | |
| 83 "backgroundColor": "#0000FF", | |
| 84 "transform": [ | |
| 85 [...], | |
| 86 [...], | |
| 87 [...], | |
| 88 [...] | |
| 89 ] | |
| 90 }, | |
| 91 { | |
| 92 "name": "LayoutBlockFlow (relative positioned) DIV class='container'", | |
| 93 "position": [58, 230], | |
| 94 "bounds": [122, 452], | |
| 95 "contentsOpaque": true, | |
| 96 "drawsContent": true, | |
| 97 "backgroundColor": "#FFFFFF", | |
| 98 "children": [ | |
| 99 { | |
| 100 "name": "LayoutBlockFlow (relative positioned) DIV class='box gray
force-layer'", | |
| 101 "position": [11, 11], | |
| 102 "bounds": [100, 100], | |
| 103 "contentsOpaque": true, | |
| 104 "drawsContent": true, | |
| 105 "backgroundColor": "#808080", | |
| 106 "transform": [ | |
| 107 [...], | |
| 108 [...], | |
| 109 [...], | |
| 110 [...] | |
| 111 ] | |
| 112 }, | |
| 113 { | |
| 114 "name": "LayoutBlockFlow (relative positioned) DIV id='first-green
-box' class='box green rotate-45deg'", | |
| 115 "position": [10, 120], | |
| 116 "bounds": [102, 102], | |
| 117 "drawsContent": true, | |
| 118 "backgroundColor": "#008000", | |
| 119 "transform": [ | |
| 120 [...], | |
| 121 [...], | |
| 122 [...], | |
| 123 [...] | |
| 124 ] | |
| 125 }, | |
| 126 { | |
| 127 "name": "Squashing Containment Layer", | |
| 128 "shouldFlattenTransform": false, | |
| 129 "children": [ | |
| 130 { | |
| 131 "name": "LayoutBlockFlow (relative positioned) DIV class='box
green rotate-45deg'", | |
| 132 "position": [10, 230], | |
| 133 "bounds": [102, 102], | |
| 134 "drawsContent": true, | |
| 135 "backgroundColor": "#008000", | |
| 136 "transform": [ | |
| 137 [...], | |
| 138 [...], | |
| 139 [...], | |
| 140 [...] | |
| 141 ] | |
| 142 }, | |
| 143 { | |
| 144 "name": "Squashing Layer (first squashed layer: LayoutBlockFlo
w (relative positioned) DIV class='box green')", | |
| 145 "position": [-40, 340], | |
| 146 "bounds": [152, 222], | |
| 147 "drawsContent": true | |
| 148 } | |
| 149 ] | |
| 150 } | |
| 151 ] | |
| 152 } | |
| 153 ] | 79 ] |
| 80 }, |
| 81 { |
| 82 "name": "LayoutBlockFlow (relative positioned) DIV class='container'", |
| 83 "position": [58, 230], |
| 84 "bounds": [122, 452], |
| 85 "contentsOpaque": true, |
| 86 "drawsContent": true, |
| 87 "backgroundColor": "#FFFFFF" |
| 88 }, |
| 89 { |
| 90 "name": "LayoutBlockFlow (relative positioned) DIV class='box gray force-l
ayer'", |
| 91 "position": [11, 11], |
| 92 "bounds": [100, 100], |
| 93 "contentsOpaque": true, |
| 94 "drawsContent": true, |
| 95 "backgroundColor": "#808080", |
| 96 "transform": [ |
| 97 [...], |
| 98 [...], |
| 99 [...], |
| 100 [...] |
| 101 ] |
| 102 }, |
| 103 { |
| 104 "name": "LayoutBlockFlow (relative positioned) DIV id='first-green-box' cl
ass='box green rotate-45deg'", |
| 105 "position": [10, 120], |
| 106 "bounds": [102, 102], |
| 107 "drawsContent": true, |
| 108 "backgroundColor": "#008000", |
| 109 "transform": [ |
| 110 [...], |
| 111 [...], |
| 112 [...], |
| 113 [...] |
| 114 ] |
| 115 }, |
| 116 { |
| 117 "name": "Squashing Containment Layer", |
| 118 "shouldFlattenTransform": false |
| 119 }, |
| 120 { |
| 121 "name": "LayoutBlockFlow (relative positioned) DIV class='box green rotate
-45deg'", |
| 122 "position": [10, 230], |
| 123 "bounds": [102, 102], |
| 124 "drawsContent": true, |
| 125 "backgroundColor": "#008000", |
| 126 "transform": [ |
| 127 [...], |
| 128 [...], |
| 129 [...], |
| 130 [...] |
| 131 ] |
| 132 }, |
| 133 { |
| 134 "name": "Squashing Layer (first squashed layer: LayoutBlockFlow (relative
positioned) DIV class='box green')", |
| 135 "position": [-40, 340], |
| 136 "bounds": [152, 222], |
| 137 "drawsContent": true |
| 154 } | 138 } |
| 155 ] | 139 ] |
| 156 } | 140 } |
| 157 | 141 |
| OLD | NEW |