| OLD | NEW |
| 1 CASE 1, original layer tree | 1 CASE 1, original layer tree |
| 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 class='composited box behind
'", |
| 11 "position": [100, 100], | 14 "position": [100, 100], |
| 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 }, | 19 }, |
| 17 { | 20 { |
| 21 "name": "Squashing Containment Layer", |
| 18 "shouldFlattenTransform": false, | 22 "shouldFlattenTransform": false, |
| 19 "children": [ | 23 "children": [ |
| 20 { | 24 { |
| 25 "name": "LayoutBlockFlow (positioned) DIV class='box middle'", |
| 21 "position": [20, 20], | 26 "position": [20, 20], |
| 22 "bounds": [100, 100], | 27 "bounds": [100, 100], |
| 23 "contentsOpaque": true, | 28 "contentsOpaque": true, |
| 24 "drawsContent": true, | 29 "drawsContent": true, |
| 25 "backgroundColor": "#00FF00", | 30 "backgroundColor": "#00FF00", |
| 26 "transform": [ | 31 "transform": [ |
| 27 [0.707106781186548, 0.707106781186548, 0, 0], | 32 [0.707106781186548, 0.707106781186548, 0, 0], |
| 28 [-0.707106781186548, 0.707106781186548, 0, 0], | 33 [-0.707106781186548, 0.707106781186548, 0, 0], |
| 29 [0, 0, 1, 0], | 34 [0, 0, 1, 0], |
| 30 [0, 0, 0, 1] | 35 [0, 0, 0, 1] |
| 31 ] | 36 ] |
| 32 }, | 37 }, |
| 33 { | 38 { |
| 39 "name": "Squashing Layer (first squashed layer: LayoutBlockFlow (p
ositioned) DIV class='box top')", |
| 34 "position": [180, 180], | 40 "position": [180, 180], |
| 35 "bounds": [100, 100], | 41 "bounds": [100, 100], |
| 36 "drawsContent": true | 42 "drawsContent": true |
| 37 } | 43 } |
| 38 ] | 44 ] |
| 39 } | 45 } |
| 40 ] | 46 ] |
| 41 } | 47 } |
| 42 ] | 48 ] |
| 43 } | 49 } |
| 44 CASE 2, hovering over the outer div | 50 CASE 2, hovering over the outer div |
| 45 { | 51 { |
| 52 "name": "Content Root Layer", |
| 46 "bounds": [800, 600], | 53 "bounds": [800, 600], |
| 47 "children": [ | 54 "children": [ |
| 48 { | 55 { |
| 56 "name": "LayoutView #document", |
| 49 "bounds": [800, 600], | 57 "bounds": [800, 600], |
| 50 "contentsOpaque": true, | 58 "contentsOpaque": true, |
| 51 "drawsContent": true, | 59 "drawsContent": true, |
| 52 "children": [ | 60 "children": [ |
| 53 { | 61 { |
| 62 "name": "LayoutBlockFlow (positioned) DIV class='composited box behind
'", |
| 54 "position": [100, 100], | 63 "position": [100, 100], |
| 55 "bounds": [100, 100], | 64 "bounds": [100, 100], |
| 56 "contentsOpaque": true, | 65 "contentsOpaque": true, |
| 57 "drawsContent": true, | 66 "drawsContent": true, |
| 58 "backgroundColor": "#0000FF" | 67 "backgroundColor": "#0000FF" |
| 59 }, | 68 }, |
| 60 { | 69 { |
| 70 "name": "Squashing Containment Layer", |
| 61 "shouldFlattenTransform": false, | 71 "shouldFlattenTransform": false, |
| 62 "children": [ | 72 "children": [ |
| 63 { | 73 { |
| 74 "name": "LayoutBlockFlow (positioned) DIV class='box middle'", |
| 64 "position": [20, 20], | 75 "position": [20, 20], |
| 65 "bounds": [100, 100], | 76 "bounds": [100, 100], |
| 66 "contentsOpaque": true, | 77 "contentsOpaque": true, |
| 67 "drawsContent": true, | 78 "drawsContent": true, |
| 68 "backgroundColor": "#008000", | 79 "backgroundColor": "#008000", |
| 69 "transform": [ | 80 "transform": [ |
| 70 [0.707106781186548, 0.707106781186548, 0, 0], | 81 [0.707106781186548, 0.707106781186548, 0, 0], |
| 71 [-0.707106781186548, 0.707106781186548, 0, 0], | 82 [-0.707106781186548, 0.707106781186548, 0, 0], |
| 72 [0, 0, 1, 0], | 83 [0, 0, 1, 0], |
| 73 [0, 0, 0, 1] | 84 [0, 0, 0, 1] |
| 74 ], | 85 ], |
| 75 "paintInvalidations": [ | 86 "paintInvalidations": [ |
| 76 { | 87 { |
| 77 "object": "LayoutBlockFlow (positioned) DIV class='box middle'
", | 88 "object": "LayoutBlockFlow (positioned) DIV class='box middle'
", |
| 78 "rect": [0, 0, 100, 100], | 89 "rect": [0, 0, 100, 100], |
| 79 "reason": "style change" | 90 "reason": "style change" |
| 80 } | 91 } |
| 81 ] | 92 ] |
| 82 }, | 93 }, |
| 83 { | 94 { |
| 95 "name": "Squashing Layer (first squashed layer: LayoutBlockFlow (p
ositioned) DIV class='box top')", |
| 84 "position": [180, 180], | 96 "position": [180, 180], |
| 85 "bounds": [100, 100], | 97 "bounds": [100, 100], |
| 86 "drawsContent": true | 98 "drawsContent": true |
| 87 } | 99 } |
| 88 ] | 100 ] |
| 89 } | 101 } |
| 90 ] | 102 ] |
| 91 } | 103 } |
| 104 ], |
| 105 "objectPaintInvalidations": [ |
| 106 { |
| 107 "object": "LayoutBlockFlow (positioned) DIV class='box middle'", |
| 108 "reason": "style change" |
| 109 } |
| 92 ] | 110 ] |
| 93 } | 111 } |
| 94 CASE 3, hovering over the inner div | 112 CASE 3, hovering over the inner div |
| 95 { | 113 { |
| 114 "name": "Content Root Layer", |
| 96 "bounds": [800, 600], | 115 "bounds": [800, 600], |
| 97 "children": [ | 116 "children": [ |
| 98 { | 117 { |
| 118 "name": "LayoutView #document", |
| 99 "bounds": [800, 600], | 119 "bounds": [800, 600], |
| 100 "contentsOpaque": true, | 120 "contentsOpaque": true, |
| 101 "drawsContent": true, | 121 "drawsContent": true, |
| 102 "children": [ | 122 "children": [ |
| 103 { | 123 { |
| 124 "name": "LayoutBlockFlow (positioned) DIV class='composited box behind
'", |
| 104 "position": [100, 100], | 125 "position": [100, 100], |
| 105 "bounds": [100, 100], | 126 "bounds": [100, 100], |
| 106 "contentsOpaque": true, | 127 "contentsOpaque": true, |
| 107 "drawsContent": true, | 128 "drawsContent": true, |
| 108 "backgroundColor": "#0000FF" | 129 "backgroundColor": "#0000FF" |
| 109 }, | 130 }, |
| 110 { | 131 { |
| 132 "name": "Squashing Containment Layer", |
| 111 "shouldFlattenTransform": false, | 133 "shouldFlattenTransform": false, |
| 112 "children": [ | 134 "children": [ |
| 113 { | 135 { |
| 136 "name": "LayoutBlockFlow (positioned) DIV class='box middle'", |
| 114 "position": [20, 20], | 137 "position": [20, 20], |
| 115 "bounds": [100, 100], | 138 "bounds": [100, 100], |
| 116 "contentsOpaque": true, | 139 "contentsOpaque": true, |
| 117 "drawsContent": true, | 140 "drawsContent": true, |
| 118 "backgroundColor": "#008000", | 141 "backgroundColor": "#008000", |
| 119 "transform": [ | 142 "transform": [ |
| 120 [0.707106781186548, 0.707106781186548, 0, 0], | 143 [0.707106781186548, 0.707106781186548, 0, 0], |
| 121 [-0.707106781186548, 0.707106781186548, 0, 0], | 144 [-0.707106781186548, 0.707106781186548, 0, 0], |
| 122 [0, 0, 1, 0], | 145 [0, 0, 1, 0], |
| 123 [0, 0, 0, 1] | 146 [0, 0, 0, 1] |
| 124 ], | 147 ], |
| 125 "paintInvalidations": [ | 148 "paintInvalidations": [ |
| 126 { | 149 { |
| 127 "object": "LayoutBlockFlow (positioned) DIV class='box middle'
", | 150 "object": "LayoutBlockFlow (positioned) DIV class='box middle'
", |
| 128 "rect": [0, 0, 100, 100], | 151 "rect": [0, 0, 100, 100], |
| 129 "reason": "style change" | 152 "reason": "style change" |
| 130 }, | 153 }, |
| 131 { | 154 { |
| 132 "object": "LayoutBlockFlow (positioned) DIV class='smallbox'", | 155 "object": "LayoutBlockFlow (positioned) DIV class='smallbox'", |
| 133 "rect": [20, 25, 50, 50], | 156 "rect": [20, 25, 50, 50], |
| 134 "reason": "style change" | 157 "reason": "style change" |
| 135 } | 158 } |
| 136 ] | 159 ] |
| 137 }, | 160 }, |
| 138 { | 161 { |
| 162 "name": "Squashing Layer (first squashed layer: LayoutBlockFlow (p
ositioned) DIV class='box top')", |
| 139 "position": [180, 180], | 163 "position": [180, 180], |
| 140 "bounds": [100, 100], | 164 "bounds": [100, 100], |
| 141 "drawsContent": true | 165 "drawsContent": true |
| 142 } | 166 } |
| 143 ] | 167 ] |
| 144 } | 168 } |
| 145 ] | 169 ] |
| 146 } | 170 } |
| 171 ], |
| 172 "objectPaintInvalidations": [ |
| 173 { |
| 174 "object": "LayoutBlockFlow (positioned) DIV class='box middle'", |
| 175 "reason": "style change" |
| 176 }, |
| 177 { |
| 178 "object": "LayoutBlockFlow (positioned) DIV class='smallbox'", |
| 179 "reason": "style change" |
| 180 } |
| 147 ] | 181 ] |
| 148 } | 182 } |
| 149 | 183 |
| OLD | NEW |