| 1 |
| 2 |
| 3 |
| 4 |
| 5 |
| 6 |
| Before: |
| { |
| "layers": [ |
| { |
| "name": "Scrolling Contents Layer", |
| "bounds": [800, 600], |
| "contentsOpaque": true, |
| "backgroundColor": "#FFFFFF" |
| }, |
| { |
| "name": "LayoutNGBlockFlow (positioned) DIV class='side side-1'", |
| "bounds": [100, 100], |
| "backgroundColor": "#00FF00CC", |
| "transform": 5 |
| }, |
| { |
| "name": "LayoutNGBlockFlow (positioned) DIV class='side side-2'", |
| "bounds": [100, 100], |
| "backgroundColor": "#00FF00CC", |
| "transform": 8 |
| }, |
| { |
| "name": "LayoutNGBlockFlow (positioned) DIV class='side side-3'", |
| "bounds": [100, 100], |
| "backgroundColor": "#00FF00CC", |
| "transform": 11 |
| }, |
| { |
| "name": "LayoutNGBlockFlow (positioned) DIV class='side side-4'", |
| "bounds": [100, 100], |
| "backgroundColor": "#00FF00CC", |
| "transform": 14 |
| }, |
| { |
| "name": "LayoutNGBlockFlow (positioned) DIV class='side side-5'", |
| "bounds": [100, 100], |
| "backgroundColor": "#00FF00CC", |
| "transform": 17 |
| }, |
| { |
| "name": "LayoutNGBlockFlow (positioned) DIV class='side side-6'", |
| "bounds": [100, 100], |
| "backgroundColor": "#00FF00CC", |
| "transform": 20 |
| } |
| ], |
| "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, |
| "flattenInheritedTransform": false, |
| "renderingContext": 1 |
| }, |
| { |
| "id": 5, |
| "parent": 4, |
| "transform": [ |
| [1, 0, 0, 0], |
| [0, 1, 0, 0], |
| [0, 0, 1, 0], |
| [0, 0, 50, 1] |
| ], |
| "flattenInheritedTransform": false, |
| "renderingContext": 1 |
| }, |
| { |
| "id": 6, |
| "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": 7, |
| "parent": 6, |
| "flattenInheritedTransform": false, |
| "renderingContext": 1 |
| }, |
| { |
| "id": 8, |
| "parent": 7, |
| "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": 9, |
| "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": 10, |
| "parent": 9, |
| "flattenInheritedTransform": false, |
| "renderingContext": 1 |
| }, |
| { |
| "id": 11, |
| "parent": 10, |
| "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": 12, |
| "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": 13, |
| "parent": 12, |
| "flattenInheritedTransform": false, |
| "renderingContext": 1 |
| }, |
| { |
| "id": 14, |
| "parent": 13, |
| "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": 15, |
| "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": 16, |
| "parent": 15, |
| "flattenInheritedTransform": false, |
| "renderingContext": 1 |
| }, |
| { |
| "id": 17, |
| "parent": 16, |
| "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": 18, |
| "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": 19, |
| "parent": 18, |
| "flattenInheritedTransform": false, |
| "renderingContext": 1 |
| }, |
| { |
| "id": 20, |
| "parent": 19, |
| "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": "Scrolling Contents Layer", |
| "bounds": [800, 600], |
| "contentsOpaque": true, |
| "backgroundColor": "#FFFFFF" |
| }, |
| { |
| "name": "LayoutNGBlockFlow (positioned) DIV class='side side-1'", |
| "bounds": [100, 100], |
| "backgroundColor": "#00FF00CC", |
| "transform": 5 |
| }, |
| { |
| "name": "LayoutNGBlockFlow (positioned) DIV class='side side-2'", |
| "bounds": [100, 100], |
| "backgroundColor": "#00FF00CC", |
| "transform": 8 |
| }, |
| { |
| "name": "LayoutNGBlockFlow (positioned) DIV class='side side-3'", |
| "bounds": [100, 100], |
| "backgroundColor": "#00FF00CC", |
| "transform": 11 |
| }, |
| { |
| "name": "LayoutNGBlockFlow (positioned) DIV class='side side-4'", |
| "bounds": [100, 100], |
| "backgroundColor": "#00FF00CC", |
| "transform": 14 |
| }, |
| { |
| "name": "LayoutNGBlockFlow (positioned) DIV class='side side-5'", |
| "bounds": [100, 100], |
| "backgroundColor": "#00FF00CC", |
| "transform": 17 |
| }, |
| { |
| "name": "LayoutNGBlockFlow (positioned) DIV class='side side-6'", |
| "bounds": [100, 100], |
| "backgroundColor": "#00FF00CC", |
| "transform": 20 |
| }, |
| { |
| "name": "LayoutNGBlockFlow (positioned) DIV class='box top left'", |
| "bounds": [100, 150], |
| "contentsOpaque": true, |
| "backgroundColor": "#808080", |
| "transform": 21 |
| }, |
| { |
| "name": "Squashing Layer (first squashed layer: LayoutNGBlockFlow (positioned) DIV class='box top right')", |
| "bounds": [300, 300], |
| "transform": 22 |
| } |
| ], |
| "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, |
| "flattenInheritedTransform": false, |
| "renderingContext": 1 |
| }, |
| { |
| "id": 5, |
| "parent": 4, |
| "transform": [ |
| [1, 0, 0, 0], |
| [0, 1, 0, 0], |
| [0, 0, 1, 0], |
| [0, 0, 50, 1] |
| ], |
| "flattenInheritedTransform": false, |
| "renderingContext": 1 |
| }, |
| { |
| "id": 6, |
| "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": 7, |
| "parent": 6, |
| "flattenInheritedTransform": false, |
| "renderingContext": 1 |
| }, |
| { |
| "id": 8, |
| "parent": 7, |
| "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": 9, |
| "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": 10, |
| "parent": 9, |
| "flattenInheritedTransform": false, |
| "renderingContext": 1 |
| }, |
| { |
| "id": 11, |
| "parent": 10, |
| "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": 12, |
| "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": 13, |
| "parent": 12, |
| "flattenInheritedTransform": false, |
| "renderingContext": 1 |
| }, |
| { |
| "id": 14, |
| "parent": 13, |
| "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": 15, |
| "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": 16, |
| "parent": 15, |
| "flattenInheritedTransform": false, |
| "renderingContext": 1 |
| }, |
| { |
| "id": 17, |
| "parent": 16, |
| "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": 18, |
| "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": 19, |
| "parent": 18, |
| "flattenInheritedTransform": false, |
| "renderingContext": 1 |
| }, |
| { |
| "id": 20, |
| "parent": 19, |
| "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": 21, |
| "transform": [ |
| [1, 0, 0, 0], |
| [0, 1, 0, 0], |
| [0, 0, 1, 0], |
| [8, 8, 0, 1] |
| ] |
| }, |
| { |
| "id": 22, |
| "transform": [ |
| [1, 0, 0, 0], |
| [0, 1, 0, 0], |
| [0, 0, 1, 0], |
| [8, 8, 0, 1] |
| ] |
| } |
| ] |
| } |
| |