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 |