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 |