1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
This scenario verifies that the green "container" element and lime "innerScrolling" element scroll properly even though there is a blue fixed-position element layered in between them.
The catch is that the squashing requirements should be computed in correct paint order, so that the green container does not accidentally position itself with respect to the wrong layer and not scroll.
CASE 1, original layer tree:
{
"bounds": [785, 4100],
"children": [
{
"bounds": [785, 4100],
"contentsOpaque": true,
"drawsContent": true,
"children": [
{
"bounds": [400, 400],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#808080"
},
{
"position": [100, 100],
"bounds": [100, 4000],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#008000",
"children": [
{
"position": [0, 50],
"bounds": [200, 100],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#0000FF"
},
{
"position": [100, 0],
"bounds": [100, 100],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#00FF00"
}
]
}
]
}
]
}
CASE 2, scrolling y by 10 pixels, both the "container" and "inner" should scroll properly.
{
"bounds": [785, 4100],
"children": [
{
"bounds": [785, 4100],
"contentsOpaque": true,
"drawsContent": true,
"children": [
{
"position": [0, 10],
"bounds": [400, 400],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#808080"
},
{
"position": [100, 100],
"bounds": [100, 4000],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#008000",
"children": [
{
"position": [0, 60],
"bounds": [200, 100],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#0000FF"
},
{
"position": [100, 0],
"bounds": [100, 100],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#00FF00"
}
]
}
]
}
]
}
CASE 3, scrolling y further so that "inner" no longer overlaps the fixed-pos layer, then the stacking context of "container" includes the "innerScrolling" layer, and doubles in width:
{
"bounds": [785, 4100],
"children": [
{
"bounds": [785, 4100],
"contentsOpaque": true,
"drawsContent": true,
"children": [
{
"position": [0, 110],
"bounds": [400, 400],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#808080"
},
{
"position": [100, 100],
"bounds": [200, 4000],
"drawsContent": true,
"backgroundColor": "#008000",
"repaintRects": [
[100, 0, 100, 100]
],
"children": [
{
"position": [0, 160],
"bounds": [200, 100],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#0000FF"
}
]
}
]
}
]
}
|
