| OLD | NEW |
| 1 Test overlap is rendered correctly when hovering over elements | 1 Test overlap is rendered correctly when hovering over elements |
| 2 | 2 |
| 3 Case 1, original layer tree: | 3 Case 1, original layer tree: |
| 4 { | 4 { |
| 5 "name": "Content Root Layer", |
| 5 "bounds": [800, 600], | 6 "bounds": [800, 600], |
| 6 "children": [ | 7 "children": [ |
| 7 { | 8 { |
| 9 "name": "LayoutView #document", |
| 8 "bounds": [800, 600], | 10 "bounds": [800, 600], |
| 9 "contentsOpaque": true, | 11 "contentsOpaque": true, |
| 10 "drawsContent": true, | 12 "drawsContent": true, |
| 11 "children": [ | 13 "children": [ |
| 12 { | 14 { |
| 15 "name": "LayoutBlockFlow DIV class='composited'", |
| 13 "position": [8, 8], | 16 "position": [8, 8], |
| 14 "bounds": [784, 0] | 17 "bounds": [784, 0] |
| 15 }, | 18 }, |
| 16 { | 19 { |
| 20 "name": "Squashing Containment Layer", |
| 17 "shouldFlattenTransform": false, | 21 "shouldFlattenTransform": false, |
| 18 "children": [ | 22 "children": [ |
| 19 { | 23 { |
| 24 "name": "LayoutBlockFlow (positioned) DIV class='composited box be
hind'", |
| 20 "position": [100, 100], | 25 "position": [100, 100], |
| 21 "bounds": [100, 100], | 26 "bounds": [100, 100], |
| 22 "contentsOpaque": true, | 27 "contentsOpaque": true, |
| 23 "drawsContent": true, | 28 "drawsContent": true, |
| 24 "backgroundColor": "#0000FF" | 29 "backgroundColor": "#0000FF" |
| 25 }, | 30 }, |
| 26 { | 31 { |
| 32 "name": "Squashing Layer (first squashed layer: LayoutBlockFlow (p
ositioned) DIV class='box middle')", |
| 27 "position": [180, 180], | 33 "position": [180, 180], |
| 28 "bounds": [260, 260], | 34 "bounds": [260, 260], |
| 29 "drawsContent": true | 35 "drawsContent": true |
| 30 } | 36 } |
| 31 ] | 37 ] |
| 32 } | 38 } |
| 33 ] | 39 ] |
| 34 } | 40 } |
| 35 ] | 41 ] |
| 36 } | 42 } |
| 37 Case 2: hovering over the "middle" element (causes that div to become its own co
mposited layer) | 43 Case 2: hovering over the "middle" element (causes that div to become its own co
mposited layer) |
| 38 { | 44 { |
| 45 "name": "Content Root Layer", |
| 39 "bounds": [800, 600], | 46 "bounds": [800, 600], |
| 40 "children": [ | 47 "children": [ |
| 41 { | 48 { |
| 49 "name": "LayoutView #document", |
| 42 "bounds": [800, 600], | 50 "bounds": [800, 600], |
| 43 "contentsOpaque": true, | 51 "contentsOpaque": true, |
| 44 "drawsContent": true, | 52 "drawsContent": true, |
| 45 "children": [ | 53 "children": [ |
| 46 { | 54 { |
| 55 "name": "LayoutBlockFlow DIV class='composited'", |
| 47 "position": [8, 8], | 56 "position": [8, 8], |
| 48 "bounds": [784, 0] | 57 "bounds": [784, 0] |
| 49 }, | 58 }, |
| 50 { | 59 { |
| 60 "name": "LayoutBlockFlow (positioned) DIV class='composited box behind
'", |
| 51 "position": [100, 100], | 61 "position": [100, 100], |
| 52 "bounds": [100, 100], | 62 "bounds": [100, 100], |
| 53 "contentsOpaque": true, | 63 "contentsOpaque": true, |
| 54 "drawsContent": true, | 64 "drawsContent": true, |
| 55 "backgroundColor": "#0000FF" | 65 "backgroundColor": "#0000FF" |
| 56 }, | 66 }, |
| 57 { | 67 { |
| 68 "name": "Squashing Containment Layer", |
| 58 "shouldFlattenTransform": false, | 69 "shouldFlattenTransform": false, |
| 59 "children": [ | 70 "children": [ |
| 60 { | 71 { |
| 72 "name": "LayoutBlockFlow (positioned) DIV class='box middle'", |
| 61 "position": [180, 180], | 73 "position": [180, 180], |
| 62 "bounds": [100, 100], | 74 "bounds": [100, 100], |
| 63 "contentsOpaque": true, | 75 "contentsOpaque": true, |
| 64 "drawsContent": true, | 76 "drawsContent": true, |
| 65 "backgroundColor": "#008000" | 77 "backgroundColor": "#008000" |
| 66 }, | 78 }, |
| 67 { | 79 { |
| 80 "name": "Squashing Layer (first squashed layer: LayoutBlockFlow (p
ositioned) DIV class='box middle2')", |
| 68 "position": [260, 260], | 81 "position": [260, 260], |
| 69 "bounds": [180, 180], | 82 "bounds": [180, 180], |
| 70 "drawsContent": true | 83 "drawsContent": true |
| 71 } | 84 } |
| 72 ] | 85 ] |
| 73 } | 86 } |
| 74 ] | 87 ] |
| 75 } | 88 } |
| 76 ] | 89 ] |
| 77 } | 90 } |
| 78 Case 3: hovering over the "middle2" element (causes that div to become its own c
omposited layer) | 91 Case 3: hovering over the "middle2" element (causes that div to become its own c
omposited layer) |
| 79 { | 92 { |
| 93 "name": "Content Root Layer", |
| 80 "bounds": [800, 600], | 94 "bounds": [800, 600], |
| 81 "children": [ | 95 "children": [ |
| 82 { | 96 { |
| 97 "name": "LayoutView #document", |
| 83 "bounds": [800, 600], | 98 "bounds": [800, 600], |
| 84 "contentsOpaque": true, | 99 "contentsOpaque": true, |
| 85 "drawsContent": true, | 100 "drawsContent": true, |
| 86 "children": [ | 101 "children": [ |
| 87 { | 102 { |
| 103 "name": "LayoutBlockFlow DIV class='composited'", |
| 88 "position": [8, 8], | 104 "position": [8, 8], |
| 89 "bounds": [784, 0] | 105 "bounds": [784, 0] |
| 90 }, | 106 }, |
| 91 { | 107 { |
| 108 "name": "Squashing Containment Layer", |
| 92 "shouldFlattenTransform": false, | 109 "shouldFlattenTransform": false, |
| 93 "children": [ | 110 "children": [ |
| 94 { | 111 { |
| 112 "name": "LayoutBlockFlow (positioned) DIV class='composited box be
hind'", |
| 95 "position": [100, 100], | 113 "position": [100, 100], |
| 96 "bounds": [100, 100], | 114 "bounds": [100, 100], |
| 97 "contentsOpaque": true, | 115 "contentsOpaque": true, |
| 98 "drawsContent": true, | 116 "drawsContent": true, |
| 99 "backgroundColor": "#0000FF" | 117 "backgroundColor": "#0000FF" |
| 100 }, | 118 }, |
| 101 { | 119 { |
| 120 "name": "Squashing Layer (first squashed layer: LayoutBlockFlow (p
ositioned) DIV class='box middle')", |
| 102 "position": [180, 180], | 121 "position": [180, 180], |
| 103 "bounds": [100, 100], | 122 "bounds": [100, 100], |
| 104 "drawsContent": true | 123 "drawsContent": true |
| 105 } | 124 } |
| 106 ] | 125 ] |
| 107 }, | 126 }, |
| 108 { | 127 { |
| 128 "name": "Squashing Containment Layer", |
| 109 "shouldFlattenTransform": false, | 129 "shouldFlattenTransform": false, |
| 110 "children": [ | 130 "children": [ |
| 111 { | 131 { |
| 132 "name": "LayoutBlockFlow (positioned) DIV class='box middle2'", |
| 112 "position": [260, 260], | 133 "position": [260, 260], |
| 113 "bounds": [100, 100], | 134 "bounds": [100, 100], |
| 114 "contentsOpaque": true, | 135 "contentsOpaque": true, |
| 115 "drawsContent": true, | 136 "drawsContent": true, |
| 116 "backgroundColor": "#008000" | 137 "backgroundColor": "#008000" |
| 117 }, | 138 }, |
| 118 { | 139 { |
| 140 "name": "Squashing Layer (first squashed layer: LayoutBlockFlow (p
ositioned) DIV class='box top')", |
| 119 "position": [340, 340], | 141 "position": [340, 340], |
| 120 "bounds": [100, 100], | 142 "bounds": [100, 100], |
| 121 "drawsContent": true | 143 "drawsContent": true |
| 122 } | 144 } |
| 123 ] | 145 ] |
| 124 } | 146 } |
| 125 ] | 147 ] |
| 126 } | 148 } |
| 127 ] | 149 ] |
| 128 } | 150 } |
| 129 Case 4: hovering over the "top" element (causes that div to become its own compo
sited layer) | 151 Case 4: hovering over the "top" element (causes that div to become its own compo
sited layer) |
| 130 { | 152 { |
| 153 "name": "Content Root Layer", |
| 131 "bounds": [800, 600], | 154 "bounds": [800, 600], |
| 132 "children": [ | 155 "children": [ |
| 133 { | 156 { |
| 157 "name": "LayoutView #document", |
| 134 "bounds": [800, 600], | 158 "bounds": [800, 600], |
| 135 "contentsOpaque": true, | 159 "contentsOpaque": true, |
| 136 "drawsContent": true, | 160 "drawsContent": true, |
| 137 "children": [ | 161 "children": [ |
| 138 { | 162 { |
| 163 "name": "LayoutBlockFlow DIV class='composited'", |
| 139 "position": [8, 8], | 164 "position": [8, 8], |
| 140 "bounds": [784, 0] | 165 "bounds": [784, 0] |
| 141 }, | 166 }, |
| 142 { | 167 { |
| 168 "name": "Squashing Containment Layer", |
| 143 "shouldFlattenTransform": false, | 169 "shouldFlattenTransform": false, |
| 144 "children": [ | 170 "children": [ |
| 145 { | 171 { |
| 172 "name": "LayoutBlockFlow (positioned) DIV class='composited box be
hind'", |
| 146 "position": [100, 100], | 173 "position": [100, 100], |
| 147 "bounds": [100, 100], | 174 "bounds": [100, 100], |
| 148 "contentsOpaque": true, | 175 "contentsOpaque": true, |
| 149 "drawsContent": true, | 176 "drawsContent": true, |
| 150 "backgroundColor": "#0000FF" | 177 "backgroundColor": "#0000FF" |
| 151 }, | 178 }, |
| 152 { | 179 { |
| 180 "name": "Squashing Layer (first squashed layer: LayoutBlockFlow (p
ositioned) DIV class='box middle')", |
| 153 "position": [180, 180], | 181 "position": [180, 180], |
| 154 "bounds": [180, 180], | 182 "bounds": [180, 180], |
| 155 "drawsContent": true | 183 "drawsContent": true |
| 156 } | 184 } |
| 157 ] | 185 ] |
| 158 }, | 186 }, |
| 159 { | 187 { |
| 188 "name": "LayoutBlockFlow (positioned) DIV class='box top'", |
| 160 "position": [340, 340], | 189 "position": [340, 340], |
| 161 "bounds": [100, 100], | 190 "bounds": [100, 100], |
| 162 "contentsOpaque": true, | 191 "contentsOpaque": true, |
| 163 "drawsContent": true, | 192 "drawsContent": true, |
| 164 "backgroundColor": "#008000" | 193 "backgroundColor": "#008000" |
| 165 } | 194 } |
| 166 ] | 195 ] |
| 167 } | 196 } |
| 168 ] | 197 ] |
| 169 } | 198 } |
| 170 Case 5: back to situation in case 1 | 199 Case 5: back to situation in case 1 |
| 171 { | 200 { |
| 201 "name": "Content Root Layer", |
| 172 "bounds": [800, 600], | 202 "bounds": [800, 600], |
| 173 "children": [ | 203 "children": [ |
| 174 { | 204 { |
| 205 "name": "LayoutView #document", |
| 175 "bounds": [800, 600], | 206 "bounds": [800, 600], |
| 176 "contentsOpaque": true, | 207 "contentsOpaque": true, |
| 177 "drawsContent": true, | 208 "drawsContent": true, |
| 178 "children": [ | 209 "children": [ |
| 179 { | 210 { |
| 211 "name": "LayoutBlockFlow DIV class='composited'", |
| 180 "position": [8, 8], | 212 "position": [8, 8], |
| 181 "bounds": [784, 0] | 213 "bounds": [784, 0] |
| 182 }, | 214 }, |
| 183 { | 215 { |
| 216 "name": "Squashing Containment Layer", |
| 184 "shouldFlattenTransform": false, | 217 "shouldFlattenTransform": false, |
| 185 "children": [ | 218 "children": [ |
| 186 { | 219 { |
| 220 "name": "LayoutBlockFlow (positioned) DIV class='composited box be
hind'", |
| 187 "position": [100, 100], | 221 "position": [100, 100], |
| 188 "bounds": [100, 100], | 222 "bounds": [100, 100], |
| 189 "contentsOpaque": true, | 223 "contentsOpaque": true, |
| 190 "drawsContent": true, | 224 "drawsContent": true, |
| 191 "backgroundColor": "#0000FF" | 225 "backgroundColor": "#0000FF" |
| 192 }, | 226 }, |
| 193 { | 227 { |
| 228 "name": "Squashing Layer (first squashed layer: LayoutBlockFlow (p
ositioned) DIV class='box middle')", |
| 194 "position": [180, 180], | 229 "position": [180, 180], |
| 195 "bounds": [260, 260], | 230 "bounds": [260, 260], |
| 196 "drawsContent": true | 231 "drawsContent": true |
| 197 } | 232 } |
| 198 ] | 233 ] |
| 199 } | 234 } |
| 200 ] | 235 ] |
| 201 } | 236 } |
| 202 ] | 237 ] |
| 203 } | 238 } |
| 204 | 239 |
| OLD | NEW |