OLD | NEW |
1 123456Before: | 1 123456Before: |
2 { | 2 { |
| 3 "name": "Content Root Layer", |
3 "bounds": [800, 600], | 4 "bounds": [800, 600], |
4 "children": [ | 5 "children": [ |
5 { | 6 { |
| 7 "name": "LayoutView #document", |
6 "bounds": [800, 600], | 8 "bounds": [800, 600], |
7 "contentsOpaque": true, | 9 "contentsOpaque": true, |
8 "drawsContent": true, | 10 "drawsContent": true, |
9 "children": [ | 11 "children": [ |
10 { | 12 { |
| 13 "name": "LayoutBlockFlow (positioned) DIV id='green-box' class='center
box-container'", |
11 "position": [108, 108], | 14 "position": [108, 108], |
12 "children": [ | 15 "children": [ |
13 { | 16 { |
| 17 "name": "Child Transform Layer", |
14 "transformOrigin": [50, 50], | 18 "transformOrigin": [50, 50], |
15 "shouldFlattenTransform": false, | 19 "shouldFlattenTransform": false, |
16 "transform": [ | 20 "transform": [ |
17 [1, 0, 0, 0], | 21 [1, 0, 0, 0], |
18 [0, 1, 0, 0], | 22 [0, 1, 0, 0], |
19 [0, 0, 1, -0.005], | 23 [0, 0, 1, -0.005], |
20 [0, 0, 0, 1] | 24 [0, 0, 0, 1] |
21 ], | 25 ], |
22 "children": [ | 26 "children": [ |
23 { | 27 { |
| 28 "name": "LayoutBlockFlow DIV id='camera' class='rotate-3d-star
t'", |
24 "transformOrigin": [50, 50], | 29 "transformOrigin": [50, 50], |
25 "shouldFlattenTransform": false, | 30 "shouldFlattenTransform": false, |
26 "3dRenderingContext": 1, | 31 "3dRenderingContext": 1, |
27 "transform": [ | 32 "transform": [ |
28 [0.353553390593274, 0.25, -0.5, 0], | 33 [0.353553390593274, 0.25, -0.5, 0], |
29 [0, 0.353553390593274, 0.707106781186548, 0], | 34 [0, 0.353553390593274, 0.707106781186548, 0], |
30 [0.353553390593274, -0.25, 0.5, 0], | 35 [0.353553390593274, -0.25, 0.5, 0], |
31 [0, 0, 0, 1] | 36 [0, 0, 0, 1] |
32 ], | 37 ], |
33 "children": [ | 38 "children": [ |
34 { | 39 { |
| 40 "name": "LayoutBlockFlow (positioned) DIV class='side side
-1'", |
35 "bounds": [100, 100], | 41 "bounds": [100, 100], |
36 "3dRenderingContext": 1, | 42 "3dRenderingContext": 1, |
37 "drawsContent": true, | 43 "drawsContent": true, |
38 "backgroundColor": "#00FF00CC", | 44 "backgroundColor": "#00FF00CC", |
39 "transform": [ | 45 "transform": [ |
40 [1, 0, 0, 0], | 46 [1, 0, 0, 0], |
41 [0, 1, 0, 0], | 47 [0, 1, 0, 0], |
42 [0, 0, 1, 0], | 48 [0, 0, 1, 0], |
43 [0, 0, 50, 1] | 49 [0, 0, 50, 1] |
44 ] | 50 ] |
45 }, | 51 }, |
46 { | 52 { |
| 53 "name": "LayoutBlockFlow (positioned) DIV class='side side
-2'", |
47 "bounds": [100, 100], | 54 "bounds": [100, 100], |
48 "3dRenderingContext": 1, | 55 "3dRenderingContext": 1, |
49 "drawsContent": true, | 56 "drawsContent": true, |
50 "backgroundColor": "#00FF00CC", | 57 "backgroundColor": "#00FF00CC", |
51 "transform": [ | 58 "transform": [ |
52 [0, 0, -1, 0], | 59 [0, 0, -1, 0], |
53 [0, 1, 0, 0], | 60 [0, 1, 0, 0], |
54 [1, 0, 0, 0], | 61 [1, 0, 0, 0], |
55 [50, 0, 0, 1] | 62 [50, 0, 0, 1] |
56 ] | 63 ] |
57 }, | 64 }, |
58 { | 65 { |
| 66 "name": "LayoutBlockFlow (positioned) DIV class='side side
-3'", |
59 "bounds": [100, 100], | 67 "bounds": [100, 100], |
60 "3dRenderingContext": 1, | 68 "3dRenderingContext": 1, |
61 "drawsContent": true, | 69 "drawsContent": true, |
62 "backgroundColor": "#00FF00CC", | 70 "backgroundColor": "#00FF00CC", |
63 "transform": [ | 71 "transform": [ |
64 [-1, 0, 0, 0], | 72 [-1, 0, 0, 0], |
65 [0, 1, 0, 0], | 73 [0, 1, 0, 0], |
66 [0, 0, -1, 0], | 74 [0, 0, -1, 0], |
67 [0, 0, -50, 1] | 75 [0, 0, -50, 1] |
68 ] | 76 ] |
69 }, | 77 }, |
70 { | 78 { |
| 79 "name": "LayoutBlockFlow (positioned) DIV class='side side
-4'", |
71 "bounds": [100, 100], | 80 "bounds": [100, 100], |
72 "3dRenderingContext": 1, | 81 "3dRenderingContext": 1, |
73 "drawsContent": true, | 82 "drawsContent": true, |
74 "backgroundColor": "#00FF00CC", | 83 "backgroundColor": "#00FF00CC", |
75 "transform": [ | 84 "transform": [ |
76 [0, 0, 1, 0], | 85 [0, 0, 1, 0], |
77 [0, 1, 0, 0], | 86 [0, 1, 0, 0], |
78 [-1, 0, 0, 0], | 87 [-1, 0, 0, 0], |
79 [-50, 0, 0, 1] | 88 [-50, 0, 0, 1] |
80 ] | 89 ] |
81 }, | 90 }, |
82 { | 91 { |
| 92 "name": "LayoutBlockFlow (positioned) DIV class='side side
-5'", |
83 "bounds": [100, 100], | 93 "bounds": [100, 100], |
84 "3dRenderingContext": 1, | 94 "3dRenderingContext": 1, |
85 "drawsContent": true, | 95 "drawsContent": true, |
86 "backgroundColor": "#00FF00CC", | 96 "backgroundColor": "#00FF00CC", |
87 "transform": [ | 97 "transform": [ |
88 [1, 0, 0, 0], | 98 [1, 0, 0, 0], |
89 [0, 0, 1, 0], | 99 [0, 0, 1, 0], |
90 [0, -1, 0, 0], | 100 [0, -1, 0, 0], |
91 [0, -50, 0, 1] | 101 [0, -50, 0, 1] |
92 ] | 102 ] |
93 }, | 103 }, |
94 { | 104 { |
| 105 "name": "LayoutBlockFlow (positioned) DIV class='side side
-6'", |
95 "bounds": [100, 100], | 106 "bounds": [100, 100], |
96 "3dRenderingContext": 1, | 107 "3dRenderingContext": 1, |
97 "drawsContent": true, | 108 "drawsContent": true, |
98 "backgroundColor": "#00FF00CC", | 109 "backgroundColor": "#00FF00CC", |
99 "transform": [ | 110 "transform": [ |
100 [1, 0, 0, 0], | 111 [1, 0, 0, 0], |
101 [0, 0, -1, 0], | 112 [0, 0, -1, 0], |
102 [0, 1, 0, 0], | 113 [0, 1, 0, 0], |
103 [0, 50, 0, 1] | 114 [0, 50, 0, 1] |
104 ] | 115 ] |
105 } | 116 } |
106 ] | 117 ] |
107 } | 118 } |
108 ] | 119 ] |
109 } | 120 } |
110 ] | 121 ] |
111 } | 122 } |
112 ] | 123 ] |
113 } | 124 } |
114 ] | 125 ] |
115 } | 126 } |
116 | 127 |
117 After: | 128 After: |
118 { | 129 { |
| 130 "name": "Content Root Layer", |
119 "bounds": [800, 600], | 131 "bounds": [800, 600], |
120 "children": [ | 132 "children": [ |
121 { | 133 { |
| 134 "name": "LayoutView #document", |
122 "bounds": [800, 600], | 135 "bounds": [800, 600], |
123 "contentsOpaque": true, | 136 "contentsOpaque": true, |
124 "drawsContent": true, | 137 "drawsContent": true, |
125 "children": [ | 138 "children": [ |
126 { | 139 { |
| 140 "name": "LayoutBlockFlow (positioned) DIV id='green-box' class='center
box-container'", |
127 "position": [108, 108], | 141 "position": [108, 108], |
128 "children": [ | 142 "children": [ |
129 { | 143 { |
| 144 "name": "Child Transform Layer", |
130 "transformOrigin": [50, 50], | 145 "transformOrigin": [50, 50], |
131 "shouldFlattenTransform": false, | 146 "shouldFlattenTransform": false, |
132 "transform": [ | 147 "transform": [ |
133 [1, 0, 0, 0], | 148 [1, 0, 0, 0], |
134 [0, 1, 0, 0], | 149 [0, 1, 0, 0], |
135 [0, 0, 1, -0.005], | 150 [0, 0, 1, -0.005], |
136 [0, 0, 0, 1] | 151 [0, 0, 0, 1] |
137 ], | 152 ], |
138 "children": [ | 153 "children": [ |
139 { | 154 { |
| 155 "name": "LayoutBlockFlow DIV id='camera' class='rotate-3d-star
t rotate-3d-end'", |
140 "transformOrigin": [50, 50], | 156 "transformOrigin": [50, 50], |
141 "shouldFlattenTransform": false, | 157 "shouldFlattenTransform": false, |
142 "3dRenderingContext": 1, | 158 "3dRenderingContext": 1, |
143 "transform": [ | 159 "transform": [ |
144 [0.707106781186548, 0.5, -0.5, 0], | 160 [0.707106781186548, 0.5, -0.5, 0], |
145 [0, 0.707106781186548, 0.707106781186548, 0], | 161 [0, 0.707106781186548, 0.707106781186548, 0], |
146 [0.707106781186548, -0.5, 0.5, 0], | 162 [0.707106781186548, -0.5, 0.5, 0], |
147 [0, 0, 0, 1] | 163 [0, 0, 0, 1] |
148 ], | 164 ], |
149 "children": [ | 165 "children": [ |
150 { | 166 { |
| 167 "name": "LayoutBlockFlow (positioned) DIV class='side side
-1'", |
151 "bounds": [100, 100], | 168 "bounds": [100, 100], |
152 "3dRenderingContext": 1, | 169 "3dRenderingContext": 1, |
153 "drawsContent": true, | 170 "drawsContent": true, |
154 "backgroundColor": "#00FF00CC", | 171 "backgroundColor": "#00FF00CC", |
155 "transform": [ | 172 "transform": [ |
156 [1, 0, 0, 0], | 173 [1, 0, 0, 0], |
157 [0, 1, 0, 0], | 174 [0, 1, 0, 0], |
158 [0, 0, 1, 0], | 175 [0, 0, 1, 0], |
159 [0, 0, 50, 1] | 176 [0, 0, 50, 1] |
160 ] | 177 ] |
161 }, | 178 }, |
162 { | 179 { |
| 180 "name": "LayoutBlockFlow (positioned) DIV class='side side
-2'", |
163 "bounds": [100, 100], | 181 "bounds": [100, 100], |
164 "3dRenderingContext": 1, | 182 "3dRenderingContext": 1, |
165 "drawsContent": true, | 183 "drawsContent": true, |
166 "backgroundColor": "#00FF00CC", | 184 "backgroundColor": "#00FF00CC", |
167 "transform": [ | 185 "transform": [ |
168 [0, 0, -1, 0], | 186 [0, 0, -1, 0], |
169 [0, 1, 0, 0], | 187 [0, 1, 0, 0], |
170 [1, 0, 0, 0], | 188 [1, 0, 0, 0], |
171 [50, 0, 0, 1] | 189 [50, 0, 0, 1] |
172 ] | 190 ] |
173 }, | 191 }, |
174 { | 192 { |
| 193 "name": "LayoutBlockFlow (positioned) DIV class='side side
-3'", |
175 "bounds": [100, 100], | 194 "bounds": [100, 100], |
176 "3dRenderingContext": 1, | 195 "3dRenderingContext": 1, |
177 "drawsContent": true, | 196 "drawsContent": true, |
178 "backgroundColor": "#00FF00CC", | 197 "backgroundColor": "#00FF00CC", |
179 "transform": [ | 198 "transform": [ |
180 [-1, 0, 0, 0], | 199 [-1, 0, 0, 0], |
181 [0, 1, 0, 0], | 200 [0, 1, 0, 0], |
182 [0, 0, -1, 0], | 201 [0, 0, -1, 0], |
183 [0, 0, -50, 1] | 202 [0, 0, -50, 1] |
184 ] | 203 ] |
185 }, | 204 }, |
186 { | 205 { |
| 206 "name": "LayoutBlockFlow (positioned) DIV class='side side
-4'", |
187 "bounds": [100, 100], | 207 "bounds": [100, 100], |
188 "3dRenderingContext": 1, | 208 "3dRenderingContext": 1, |
189 "drawsContent": true, | 209 "drawsContent": true, |
190 "backgroundColor": "#00FF00CC", | 210 "backgroundColor": "#00FF00CC", |
191 "transform": [ | 211 "transform": [ |
192 [0, 0, 1, 0], | 212 [0, 0, 1, 0], |
193 [0, 1, 0, 0], | 213 [0, 1, 0, 0], |
194 [-1, 0, 0, 0], | 214 [-1, 0, 0, 0], |
195 [-50, 0, 0, 1] | 215 [-50, 0, 0, 1] |
196 ] | 216 ] |
197 }, | 217 }, |
198 { | 218 { |
| 219 "name": "LayoutBlockFlow (positioned) DIV class='side side
-5'", |
199 "bounds": [100, 100], | 220 "bounds": [100, 100], |
200 "3dRenderingContext": 1, | 221 "3dRenderingContext": 1, |
201 "drawsContent": true, | 222 "drawsContent": true, |
202 "backgroundColor": "#00FF00CC", | 223 "backgroundColor": "#00FF00CC", |
203 "transform": [ | 224 "transform": [ |
204 [1, 0, 0, 0], | 225 [1, 0, 0, 0], |
205 [0, 0, 1, 0], | 226 [0, 0, 1, 0], |
206 [0, -1, 0, 0], | 227 [0, -1, 0, 0], |
207 [0, -50, 0, 1] | 228 [0, -50, 0, 1] |
208 ] | 229 ] |
209 }, | 230 }, |
210 { | 231 { |
| 232 "name": "LayoutBlockFlow (positioned) DIV class='side side
-6'", |
211 "bounds": [100, 100], | 233 "bounds": [100, 100], |
212 "3dRenderingContext": 1, | 234 "3dRenderingContext": 1, |
213 "drawsContent": true, | 235 "drawsContent": true, |
214 "backgroundColor": "#00FF00CC", | 236 "backgroundColor": "#00FF00CC", |
215 "transform": [ | 237 "transform": [ |
216 [1, 0, 0, 0], | 238 [1, 0, 0, 0], |
217 [0, 0, -1, 0], | 239 [0, 0, -1, 0], |
218 [0, 1, 0, 0], | 240 [0, 1, 0, 0], |
219 [0, 50, 0, 1] | 241 [0, 50, 0, 1] |
220 ] | 242 ] |
221 } | 243 } |
222 ] | 244 ] |
223 } | 245 } |
224 ] | 246 ] |
225 } | 247 } |
226 ] | 248 ] |
227 }, | 249 }, |
228 { | 250 { |
| 251 "name": "Squashing Containment Layer", |
229 "shouldFlattenTransform": false, | 252 "shouldFlattenTransform": false, |
230 "children": [ | 253 "children": [ |
231 { | 254 { |
| 255 "name": "LayoutBlockFlow (positioned) DIV class='box top left'", |
232 "position": [8, 8], | 256 "position": [8, 8], |
233 "bounds": [100, 150], | 257 "bounds": [100, 150], |
234 "contentsOpaque": true, | 258 "contentsOpaque": true, |
235 "drawsContent": true, | 259 "drawsContent": true, |
236 "backgroundColor": "#808080" | 260 "backgroundColor": "#808080" |
237 }, | 261 }, |
238 { | 262 { |
| 263 "name": "Squashing Layer (first squashed layer: LayoutBlockFlow (p
ositioned) DIV class='box top right')", |
239 "position": [8, 8], | 264 "position": [8, 8], |
240 "bounds": [300, 300], | 265 "bounds": [300, 300], |
241 "drawsContent": true | 266 "drawsContent": true |
242 } | 267 } |
243 ] | 268 ] |
244 } | 269 } |
245 ] | 270 ] |
246 } | 271 } |
247 ] | 272 ] |
248 } | 273 } |
249 | 274 |
OLD | NEW |