| OLD | NEW |
| 1 { | 1 { |
| 2 "name": "Content Root Layer", |
| 2 "bounds": [800, 600], | 3 "bounds": [800, 600], |
| 3 "children": [ | 4 "children": [ |
| 4 { | 5 { |
| 6 "name": "LayoutView #document", |
| 5 "bounds": [800, 600], | 7 "bounds": [800, 600], |
| 6 "contentsOpaque": true, | 8 "contentsOpaque": true, |
| 7 "drawsContent": true, | 9 "drawsContent": true, |
| 8 "children": [ | 10 "children": [ |
| 9 { | 11 { |
| 12 "name": "Ancestor Clipping Layer", |
| 10 "position": [48, 38], | 13 "position": [48, 38], |
| 11 "bounds": [60, 70], | 14 "bounds": [60, 70], |
| 12 "shouldFlattenTransform": false, | 15 "shouldFlattenTransform": false, |
| 13 "children": [ | 16 "children": [ |
| 14 { | 17 { |
| 18 "name": "LayoutBlockFlow DIV class='box'", |
| 15 "position": [2, 12], | 19 "position": [2, 12], |
| 16 "bounds": [100, 150], | 20 "bounds": [100, 150], |
| 17 "contentsOpaque": true, | 21 "contentsOpaque": true, |
| 18 "drawsContent": true, | 22 "drawsContent": true, |
| 19 "backgroundColor": "#808080", | 23 "backgroundColor": "#808080", |
| 20 "transform": [ | 24 "transform": [ |
| 21 [1, 0, 0, 0], | 25 [1, 0, 0, 0], |
| 22 [0, 1, 0, 0], | 26 [0, 1, 0, 0], |
| 23 [0, 0, 1, 0], | 27 [0, 0, 1, 0], |
| 24 [0, 0, 1, 1] | 28 [0, 0, 1, 1] |
| 25 ] | 29 ] |
| 26 } | 30 } |
| 27 ] | 31 ] |
| 28 }, | 32 }, |
| 29 { | 33 { |
| 34 "name": "Ancestor Clipping Layer", |
| 30 "position": [240, 38], | 35 "position": [240, 38], |
| 31 "bounds": [60, 70], | 36 "bounds": [60, 70], |
| 32 "shouldFlattenTransform": false, | 37 "shouldFlattenTransform": false, |
| 33 "children": [ | 38 "children": [ |
| 34 { | 39 { |
| 40 "name": "LayoutBlockFlow DIV class='box'", |
| 35 "position": [2, 12], | 41 "position": [2, 12], |
| 36 "bounds": [100, 150], | 42 "bounds": [100, 150], |
| 37 "contentsOpaque": true, | 43 "contentsOpaque": true, |
| 38 "drawsContent": true, | 44 "drawsContent": true, |
| 39 "backgroundColor": "#808080", | 45 "backgroundColor": "#808080", |
| 40 "transform": [ | 46 "transform": [ |
| 41 [1, 0, 0, 0], | 47 [1, 0, 0, 0], |
| 42 [0, 1, 0, 0], | 48 [0, 1, 0, 0], |
| 43 [0, 0, 1, 0], | 49 [0, 0, 1, 0], |
| 44 [0, 0, 1, 1] | 50 [0, 0, 1, 1] |
| 45 ] | 51 ] |
| 46 } | 52 } |
| 47 ] | 53 ] |
| 48 }, | 54 }, |
| 49 { | 55 { |
| 56 "name": "LayoutBlockFlow (positioned) DIV class='container'", |
| 50 "position": [48, 230], | 57 "position": [48, 230], |
| 51 "bounds": [60, 70], | 58 "bounds": [60, 70], |
| 52 "drawsContent": true, | 59 "drawsContent": true, |
| 53 "children": [ | 60 "children": [ |
| 54 { | 61 { |
| 62 "name": "Child Containment Layer", |
| 55 "bounds": [60, 70], | 63 "bounds": [60, 70], |
| 56 "children": [ | 64 "children": [ |
| 57 { | 65 { |
| 66 "name": "LayoutBlockFlow DIV class='box'", |
| 58 "position": [2, 12], | 67 "position": [2, 12], |
| 59 "bounds": [100, 150], | 68 "bounds": [100, 150], |
| 60 "contentsOpaque": true, | 69 "contentsOpaque": true, |
| 61 "drawsContent": true, | 70 "drawsContent": true, |
| 62 "backgroundColor": "#808080", | 71 "backgroundColor": "#808080", |
| 63 "transform": [ | 72 "transform": [ |
| 64 [1, 0, 0, 0], | 73 [1, 0, 0, 0], |
| 65 [0, 1, 0, 0], | 74 [0, 1, 0, 0], |
| 66 [0, 0, 1, 0], | 75 [0, 0, 1, 0], |
| 67 [0, 0, 1, 1] | 76 [0, 0, 1, 1] |
| 68 ] | 77 ] |
| 69 } | 78 } |
| 70 ] | 79 ] |
| 71 } | 80 } |
| 72 ] | 81 ] |
| 73 }, | 82 }, |
| 74 { | 83 { |
| 84 "name": "LayoutBlockFlow (positioned) DIV class='container'", |
| 75 "position": [240, 230], | 85 "position": [240, 230], |
| 76 "bounds": [60, 70], | 86 "bounds": [60, 70], |
| 77 "drawsContent": true, | 87 "drawsContent": true, |
| 78 "children": [ | 88 "children": [ |
| 79 { | 89 { |
| 90 "name": "Child Containment Layer", |
| 80 "bounds": [60, 70], | 91 "bounds": [60, 70], |
| 81 "children": [ | 92 "children": [ |
| 82 { | 93 { |
| 94 "name": "LayoutBlockFlow DIV class='box'", |
| 83 "position": [2, 12], | 95 "position": [2, 12], |
| 84 "bounds": [100, 150], | 96 "bounds": [100, 150], |
| 85 "contentsOpaque": true, | 97 "contentsOpaque": true, |
| 86 "drawsContent": true, | 98 "drawsContent": true, |
| 87 "backgroundColor": "#808080", | 99 "backgroundColor": "#808080", |
| 88 "transform": [ | 100 "transform": [ |
| 89 [1, 0, 0, 0], | 101 [1, 0, 0, 0], |
| 90 [0, 1, 0, 0], | 102 [0, 1, 0, 0], |
| 91 [0, 0, 1, 0], | 103 [0, 0, 1, 0], |
| 92 [0, 0, 1, 1] | 104 [0, 0, 1, 1] |
| 93 ] | 105 ] |
| 94 } | 106 } |
| 95 ] | 107 ] |
| 96 } | 108 } |
| 97 ] | 109 ] |
| 98 } | 110 } |
| 99 ] | 111 ] |
| 100 } | 112 } |
| 101 ] | 113 ] |
| 102 } | 114 } |
| 103 | 115 |
| OLD | NEW |