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