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.927183854566787, 0.374606593415912, 0, 0], | 32 [0.927183854566787, 0.374606593415912, 0, 0], |
28 [-0.374606593415912, 0.927183854566787, 0, 0], | 33 [-0.374606593415912, 0.927183854566787, 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.927183854566787, 0.374606593415912, 0, 0], | 81 [0.927183854566787, 0.374606593415912, 0, 0], |
71 [-0.374606593415912, 0.927183854566787, 0, 0], | 82 [-0.374606593415912, 0.927183854566787, 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.927183854566787, 0.374606593415912, 0, 0], | 143 [0.927183854566787, 0.374606593415912, 0, 0], |
121 [-0.374606593415912, 0.927183854566787, 0, 0], | 144 [-0.374606593415912, 0.927183854566787, 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": [12, 17, 66, 66], | 156 "rect": [12, 17, 66, 66], |
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 |