| 123456Before: |
| { |
| "layers": [ |
| { |
| "name": "LayoutView #document", |
| "bounds": [800, 600], |
| "contentsOpaque": true, |
| "backgroundColor": "#FFFFFF" |
| }, |
| { |
| "name": "LayoutBlockFlow (positioned) DIV id='green-box' class='center box-container'", |
| "position": [108, 108], |
| "contentsOpaque": true, |
| "drawsContent": false |
| }, |
| { |
| "name": "Child Transform Layer", |
| "drawsContent": false, |
| "transform": 2 |
| }, |
| { |
| "name": "LayoutBlockFlow DIV id='camera' class='rotate-3d-start'", |
| "contentsOpaque": true, |
| "drawsContent": false, |
| "transform": 3 |
| }, |
| { |
| "name": "LayoutBlockFlow (positioned) DIV class='side side-1'", |
| "bounds": [100, 100], |
| "backgroundColor": "#00FF00CC", |
| "transform": 4 |
| }, |
| { |
| "name": "LayoutBlockFlow (positioned) DIV class='side side-2'", |
| "bounds": [100, 100], |
| "backgroundColor": "#00FF00CC", |
| "transform": 5 |
| }, |
| { |
| "name": "LayoutBlockFlow (positioned) DIV class='side side-3'", |
| "bounds": [100, 100], |
| "backgroundColor": "#00FF00CC", |
| "transform": 6 |
| }, |
| { |
| "name": "LayoutBlockFlow (positioned) DIV class='side side-4'", |
| "bounds": [100, 100], |
| "backgroundColor": "#00FF00CC", |
| "transform": 7 |
| }, |
| { |
| "name": "LayoutBlockFlow (positioned) DIV class='side side-5'", |
| "bounds": [100, 100], |
| "backgroundColor": "#00FF00CC", |
| "transform": 8 |
| }, |
| { |
| "name": "LayoutBlockFlow (positioned) DIV class='side side-6'", |
| "bounds": [100, 100], |
| "backgroundColor": "#00FF00CC", |
| "transform": 9 |
| } |
| ], |
| "transforms": [ |
| { |
| "id": 1, |
| "transform": [ |
| [1, 0, 0, 0], |
| [0, 1, 0, 0], |
| [0, 0, 1, 0], |
| [108, 108, 0, 1] |
| ] |
| }, |
| { |
| "id": 2, |
| "parent": 1, |
| "transform": [ |
| [1, 0, 0, 0], |
| [0, 1, 0, 0], |
| [0, 0, 1, -0.005], |
| [0, 0, 0, 1] |
| ], |
| "origin": [50, 50] |
| }, |
| { |
| "id": 3, |
| "parent": 2, |
| "transform": [ |
| [0.353553390593274, 0.25, -0.5, 0], |
| [0, 0.353553390593274, 0.707106781186548, 0], |
| [0.353553390593274, -0.25, 0.5, 0], |
| [0, 0, 0, 1] |
| ], |
| "origin": [50, 50], |
| "flattenInheritedTransform": false, |
| "renderingContext": 1 |
| }, |
| { |
| "id": 4, |
| "parent": 3, |
| "transform": [ |
| [1, 0, 0, 0], |
| [0, 1, 0, 0], |
| [0, 0, 1, 0], |
| [0, 0, 50, 1] |
| ], |
| "flattenInheritedTransform": false, |
| "renderingContext": 1 |
| }, |
| { |
| "id": 5, |
| "parent": 3, |
| "transform": [ |
| [0, 0, -1, 0], |
| [0, 1, 0, 0], |
| [1, 0, 0, 0], |
| [50, 0, 0, 1] |
| ], |
| "origin": [50, 50], |
| "flattenInheritedTransform": false, |
| "renderingContext": 1 |
| }, |
| { |
| "id": 6, |
| "parent": 3, |
| "transform": [ |
| [-1, 0, 0, 0], |
| [0, 1, 0, 0], |
| [0, 0, -1, 0], |
| [0, 0, -50, 1] |
| ], |
| "origin": [50, 50], |
| "flattenInheritedTransform": false, |
| "renderingContext": 1 |
| }, |
| { |
| "id": 7, |
| "parent": 3, |
| "transform": [ |
| [0, 0, 1, 0], |
| [0, 1, 0, 0], |
| [-1, 0, 0, 0], |
| [-50, 0, 0, 1] |
| ], |
| "origin": [50, 50], |
| "flattenInheritedTransform": false, |
| "renderingContext": 1 |
| }, |
| { |
| "id": 8, |
| "parent": 3, |
| "transform": [ |
| [1, 0, 0, 0], |
| [0, 0, 1, 0], |
| [0, -1, 0, 0], |
| [0, -50, 0, 1] |
| ], |
| "origin": [50, 50], |
| "flattenInheritedTransform": false, |
| "renderingContext": 1 |
| }, |
| { |
| "id": 9, |
| "parent": 3, |
| "transform": [ |
| [1, 0, 0, 0], |
| [0, 0, -1, 0], |
| [0, 1, 0, 0], |
| [0, 50, 0, 1] |
| ], |
| "origin": [50, 50], |
| "flattenInheritedTransform": false, |
| "renderingContext": 1 |
| } |
| ] |
| } |
| |
| After: |
| { |
| "layers": [ |
| { |
| "name": "LayoutView #document", |
| "bounds": [800, 600], |
| "contentsOpaque": true, |
| "backgroundColor": "#FFFFFF" |
| }, |
| { |
| "name": "LayoutBlockFlow (positioned) DIV id='green-box' class='center box-container'", |
| "position": [108, 108], |
| "contentsOpaque": true, |
| "drawsContent": false |
| }, |
| { |
| "name": "Child Transform Layer", |
| "drawsContent": false, |
| "transform": 2 |
| }, |
| { |
| "name": "LayoutBlockFlow DIV id='camera' class='rotate-3d-start rotate-3d-end'", |
| "contentsOpaque": true, |
| "drawsContent": false, |
| "transform": 3 |
| }, |
| { |
| "name": "LayoutBlockFlow (positioned) DIV class='side side-1'", |
| "bounds": [100, 100], |
| "backgroundColor": "#00FF00CC", |
| "transform": 4 |
| }, |
| { |
| "name": "LayoutBlockFlow (positioned) DIV class='side side-2'", |
| "bounds": [100, 100], |
| "backgroundColor": "#00FF00CC", |
| "transform": 5 |
| }, |
| { |
| "name": "LayoutBlockFlow (positioned) DIV class='side side-3'", |
| "bounds": [100, 100], |
| "backgroundColor": "#00FF00CC", |
| "transform": 6 |
| }, |
| { |
| "name": "LayoutBlockFlow (positioned) DIV class='side side-4'", |
| "bounds": [100, 100], |
| "backgroundColor": "#00FF00CC", |
| "transform": 7 |
| }, |
| { |
| "name": "LayoutBlockFlow (positioned) DIV class='side side-5'", |
| "bounds": [100, 100], |
| "backgroundColor": "#00FF00CC", |
| "transform": 8 |
| }, |
| { |
| "name": "LayoutBlockFlow (positioned) DIV class='side side-6'", |
| "bounds": [100, 100], |
| "backgroundColor": "#00FF00CC", |
| "transform": 9 |
| }, |
| { |
| "name": "Squashing Containment Layer", |
| "drawsContent": false |
| }, |
| { |
| "name": "LayoutBlockFlow (positioned) DIV class='box top left'", |
| "position": [8, 8], |
| "bounds": [100, 150], |
| "contentsOpaque": true, |
| "backgroundColor": "#808080" |
| }, |
| { |
| "name": "Squashing Layer (first squashed layer: LayoutBlockFlow (positioned) DIV class='box top right')", |
| "position": [8, 8], |
| "bounds": [300, 300] |
| } |
| ], |
| "transforms": [ |
| { |
| "id": 1, |
| "transform": [ |
| [1, 0, 0, 0], |
| [0, 1, 0, 0], |
| [0, 0, 1, 0], |
| [108, 108, 0, 1] |
| ] |
| }, |
| { |
| "id": 2, |
| "parent": 1, |
| "transform": [ |
| [1, 0, 0, 0], |
| [0, 1, 0, 0], |
| [0, 0, 1, -0.005], |
| [0, 0, 0, 1] |
| ], |
| "origin": [50, 50] |
| }, |
| { |
| "id": 3, |
| "parent": 2, |
| "transform": [ |
| [0.707106781186548, 0.5, -0.5, 0], |
| [0, 0.707106781186548, 0.707106781186548, 0], |
| [0.707106781186548, -0.5, 0.5, 0], |
| [0, 0, 0, 1] |
| ], |
| "origin": [50, 50], |
| "flattenInheritedTransform": false, |
| "renderingContext": 1 |
| }, |
| { |
| "id": 4, |
| "parent": 3, |
| "transform": [ |
| [1, 0, 0, 0], |
| [0, 1, 0, 0], |
| [0, 0, 1, 0], |
| [0, 0, 50, 1] |
| ], |
| "flattenInheritedTransform": false, |
| "renderingContext": 1 |
| }, |
| { |
| "id": 5, |
| "parent": 3, |
| "transform": [ |
| [0, 0, -1, 0], |
| [0, 1, 0, 0], |
| [1, 0, 0, 0], |
| [50, 0, 0, 1] |
| ], |
| "origin": [50, 50], |
| "flattenInheritedTransform": false, |
| "renderingContext": 1 |
| }, |
| { |
| "id": 6, |
| "parent": 3, |
| "transform": [ |
| [-1, 0, 0, 0], |
| [0, 1, 0, 0], |
| [0, 0, -1, 0], |
| [0, 0, -50, 1] |
| ], |
| "origin": [50, 50], |
| "flattenInheritedTransform": false, |
| "renderingContext": 1 |
| }, |
| { |
| "id": 7, |
| "parent": 3, |
| "transform": [ |
| [0, 0, 1, 0], |
| [0, 1, 0, 0], |
| [-1, 0, 0, 0], |
| [-50, 0, 0, 1] |
| ], |
| "origin": [50, 50], |
| "flattenInheritedTransform": false, |
| "renderingContext": 1 |
| }, |
| { |
| "id": 8, |
| "parent": 3, |
| "transform": [ |
| [1, 0, 0, 0], |
| [0, 0, 1, 0], |
| [0, -1, 0, 0], |
| [0, -50, 0, 1] |
| ], |
| "origin": [50, 50], |
| "flattenInheritedTransform": false, |
| "renderingContext": 1 |
| }, |
| { |
| "id": 9, |
| "parent": 3, |
| "transform": [ |
| [1, 0, 0, 0], |
| [0, 0, -1, 0], |
| [0, 1, 0, 0], |
| [0, 50, 0, 1] |
| ], |
| "origin": [50, 50], |
| "flattenInheritedTransform": false, |
| "renderingContext": 1 |
| } |
| ] |
| } |
| |