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