Skip to content

Commit 96deabf

Browse files
smfrsmfr
committed
Scroll through content hidden with clip-path does not propagate below
https://bugs.webkit.org/show_bug.cgi?id=233084 rdar://85634077 Reviewed by Antti Koivisto. Failing to take clip-path into account for event region building results in async scrolling failing to find the right target in some configurations. This is an initial fix which uses the clip path bounding-box to clip the event region, for non-reference clip-paths. RenderLayer::setupClipPath() is enhanced to apply the event-region clip, passing a EventRegionContextStateSaver to correctly pop the clip. EventRegion and EventRegionContextStateSaver gain `pushClip(const Path&, WindRule)`, which for now just use the bounding box of the path. Rasterizing the path into a Region is complex code which will have to be done later. * LayoutTests/fast/scrolling/mac/event-region-clip-path-expected.txt: Added. * LayoutTests/fast/scrolling/mac/event-region-clip-path.html: Added. * Source/WebCore/rendering/EventRegion.cpp: (WebCore::EventRegionContext::pushClip): * Source/WebCore/rendering/EventRegion.h: (WebCore::EventRegionContextStateSaver::pushClip): * Source/WebCore/rendering/RenderLayer.cpp: (WebCore::RenderLayer::setupClipPath): (WebCore::RenderLayer::paintLayerContents): (WebCore::RenderLayer::collectEventRegionForFragments): (WebCore::RenderLayer::calculateClipRects const): * Source/WebCore/rendering/RenderLayer.h: Canonical link: https://commits.webkit.org/259368@main
1 parent 33240da commit 96deabf

File tree

6 files changed

+413
-6
lines changed

6 files changed

+413
-6
lines changed

‎LayoutTests/fast/scrolling/mac/event-region-clip-path-expected.txt‎

Lines changed: 328 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,328 @@
1+
(GraphicsLayer
2+
(anchor 0.00 0.00)
3+
(bounds 785.00 897.00)
4+
(children 1
5+
(GraphicsLayer
6+
(bounds 785.00 897.00)
7+
(contentsOpaque 1)
8+
(children 5
9+
(GraphicsLayer
10+
(position 28.00 33.00)
11+
(bounds 202.00 402.00)
12+
(drawsContent 1)
13+
(mask layer)
14+
(GraphicsLayer
15+
(bounds 202.00 402.00)
16+
)
17+
(event region
18+
(rect (0,0) width=202 height=202)
19+
)
20+
(children 2
21+
(GraphicsLayer
22+
(offsetFromRenderer width=1 height=1)
23+
(position 1.00 1.00)
24+
(bounds 185.00 385.00)
25+
(event region
26+
(rect (0,0) width=185 height=385)
27+
)
28+
(children 1
29+
(GraphicsLayer
30+
(offsetFromRenderer width=1 height=1)
31+
(anchor 0.00 0.00)
32+
(bounds 185.00 770.00)
33+
(drawsContent 1)
34+
(event region
35+
(rect (0,0) width=185 height=770)
36+
)
37+
)
38+
)
39+
)
40+
(GraphicsLayer
41+
(position 1.00 1.00)
42+
(bounds 200.00 400.00)
43+
(children 3
44+
(GraphicsLayer
45+
(position 0.00 385.00)
46+
(bounds 185.00 15.00)
47+
(drawsContent 1)
48+
(event region
49+
(rect (0,0) width=185 height=15)
50+
)
51+
)
52+
(GraphicsLayer
53+
(position 185.00 0.00)
54+
(bounds 15.00 385.00)
55+
(drawsContent 1)
56+
(event region
57+
(rect (0,0) width=15 height=385)
58+
)
59+
)
60+
(GraphicsLayer
61+
(position 185.00 385.00)
62+
(bounds 15.00 15.00)
63+
(drawsContent 1)
64+
(event region
65+
(rect (0,0) width=15 height=15)
66+
)
67+
)
68+
)
69+
)
70+
)
71+
)
72+
(GraphicsLayer
73+
(position 270.00 33.00)
74+
(bounds 202.00 402.00)
75+
(drawsContent 1)
76+
(mask layer)
77+
(GraphicsLayer
78+
(bounds 202.00 402.00)
79+
)
80+
(event region
81+
(rect (40,10) width=160 height=160)
82+
)
83+
(children 2
84+
(GraphicsLayer
85+
(offsetFromRenderer width=1 height=1)
86+
(position 1.00 1.00)
87+
(bounds 185.00 385.00)
88+
(event region
89+
(rect (0,0) width=185 height=385)
90+
)
91+
(children 1
92+
(GraphicsLayer
93+
(offsetFromRenderer width=1 height=1)
94+
(anchor 0.00 0.00)
95+
(bounds 185.00 770.00)
96+
(drawsContent 1)
97+
(event region
98+
(rect (0,0) width=185 height=770)
99+
)
100+
)
101+
)
102+
)
103+
(GraphicsLayer
104+
(position 1.00 1.00)
105+
(bounds 200.00 400.00)
106+
(children 3
107+
(GraphicsLayer
108+
(position 0.00 385.00)
109+
(bounds 185.00 15.00)
110+
(drawsContent 1)
111+
(event region
112+
(rect (0,0) width=185 height=15)
113+
)
114+
)
115+
(GraphicsLayer
116+
(position 185.00 0.00)
117+
(bounds 15.00 385.00)
118+
(drawsContent 1)
119+
(event region
120+
(rect (0,0) width=15 height=385)
121+
)
122+
)
123+
(GraphicsLayer
124+
(position 185.00 385.00)
125+
(bounds 15.00 15.00)
126+
(drawsContent 1)
127+
(event region
128+
(rect (0,0) width=15 height=15)
129+
)
130+
)
131+
)
132+
)
133+
)
134+
)
135+
(GraphicsLayer
136+
(position 512.00 33.00)
137+
(bounds 202.00 402.00)
138+
(drawsContent 1)
139+
(mask layer)
140+
(GraphicsLayer
141+
(bounds 202.00 402.00)
142+
)
143+
(event region
144+
(rect (0,10) width=202 height=160)
145+
)
146+
(children 2
147+
(GraphicsLayer
148+
(offsetFromRenderer width=1 height=1)
149+
(position 1.00 1.00)
150+
(bounds 185.00 385.00)
151+
(event region
152+
(rect (0,0) width=185 height=385)
153+
)
154+
(children 1
155+
(GraphicsLayer
156+
(offsetFromRenderer width=1 height=1)
157+
(anchor 0.00 0.00)
158+
(bounds 185.00 770.00)
159+
(drawsContent 1)
160+
(event region
161+
(rect (0,0) width=185 height=770)
162+
)
163+
)
164+
)
165+
)
166+
(GraphicsLayer
167+
(position 1.00 1.00)
168+
(bounds 200.00 400.00)
169+
(children 3
170+
(GraphicsLayer
171+
(position 0.00 385.00)
172+
(bounds 185.00 15.00)
173+
(drawsContent 1)
174+
(event region
175+
(rect (0,0) width=185 height=15)
176+
)
177+
)
178+
(GraphicsLayer
179+
(position 185.00 0.00)
180+
(bounds 15.00 385.00)
181+
(drawsContent 1)
182+
(event region
183+
(rect (0,0) width=15 height=385)
184+
)
185+
)
186+
(GraphicsLayer
187+
(position 185.00 385.00)
188+
(bounds 15.00 15.00)
189+
(drawsContent 1)
190+
(event region
191+
(rect (0,0) width=15 height=15)
192+
)
193+
)
194+
)
195+
)
196+
)
197+
)
198+
(GraphicsLayer
199+
(position 28.00 475.00)
200+
(bounds 202.00 402.00)
201+
(drawsContent 1)
202+
(mask layer)
203+
(GraphicsLayer
204+
(bounds 202.00 402.00)
205+
)
206+
(event region
207+
(rect (0,20) width=182 height=181)
208+
)
209+
(children 2
210+
(GraphicsLayer
211+
(offsetFromRenderer width=1 height=1)
212+
(position 1.00 1.00)
213+
(bounds 185.00 385.00)
214+
(event region
215+
(rect (0,0) width=185 height=385)
216+
)
217+
(children 1
218+
(GraphicsLayer
219+
(offsetFromRenderer width=1 height=1)
220+
(anchor 0.00 0.00)
221+
(bounds 185.00 770.00)
222+
(drawsContent 1)
223+
(event region
224+
(rect (0,0) width=185 height=770)
225+
)
226+
)
227+
)
228+
)
229+
(GraphicsLayer
230+
(position 1.00 1.00)
231+
(bounds 200.00 400.00)
232+
(children 3
233+
(GraphicsLayer
234+
(position 0.00 385.00)
235+
(bounds 185.00 15.00)
236+
(drawsContent 1)
237+
(event region
238+
(rect (0,0) width=185 height=15)
239+
)
240+
)
241+
(GraphicsLayer
242+
(position 185.00 0.00)
243+
(bounds 15.00 385.00)
244+
(drawsContent 1)
245+
(event region
246+
(rect (0,0) width=15 height=385)
247+
)
248+
)
249+
(GraphicsLayer
250+
(position 185.00 385.00)
251+
(bounds 15.00 15.00)
252+
(drawsContent 1)
253+
(event region
254+
(rect (0,0) width=15 height=15)
255+
)
256+
)
257+
)
258+
)
259+
)
260+
)
261+
(GraphicsLayer
262+
(position 270.00 475.00)
263+
(bounds 202.00 402.00)
264+
(drawsContent 1)
265+
(mask layer)
266+
(GraphicsLayer
267+
(bounds 202.00 402.00)
268+
)
269+
(event region
270+
(rect (80,40) width=80 height=80)
271+
)
272+
(children 2
273+
(GraphicsLayer
274+
(offsetFromRenderer width=1 height=1)
275+
(position 1.00 1.00)
276+
(bounds 185.00 385.00)
277+
(event region
278+
(rect (0,0) width=185 height=385)
279+
)
280+
(children 1
281+
(GraphicsLayer
282+
(offsetFromRenderer width=1 height=1)
283+
(anchor 0.00 0.00)
284+
(bounds 185.00 770.00)
285+
(drawsContent 1)
286+
(event region
287+
(rect (0,0) width=185 height=770)
288+
)
289+
)
290+
)
291+
)
292+
(GraphicsLayer
293+
(position 1.00 1.00)
294+
(bounds 200.00 400.00)
295+
(children 3
296+
(GraphicsLayer
297+
(position 0.00 385.00)
298+
(bounds 185.00 15.00)
299+
(drawsContent 1)
300+
(event region
301+
(rect (0,0) width=185 height=15)
302+
)
303+
)
304+
(GraphicsLayer
305+
(position 185.00 0.00)
306+
(bounds 15.00 385.00)
307+
(drawsContent 1)
308+
(event region
309+
(rect (0,0) width=15 height=385)
310+
)
311+
)
312+
(GraphicsLayer
313+
(position 185.00 385.00)
314+
(bounds 15.00 15.00)
315+
(drawsContent 1)
316+
(event region
317+
(rect (0,0) width=15 height=15)
318+
)
319+
)
320+
)
321+
)
322+
)
323+
)
324+
)
325+
)
326+
)
327+
)
328+

‎LayoutTests/fast/scrolling/mac/event-region-clip-path.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html> <!-- webkit-test-runner [ AsyncOverflowScrollingEnabled=true ] -->
2+
<html>
3+
<head>
4+
<style>
5+
.box {
6+
float: left;
7+
margin: 20px;
8+
width: 200px;
9+
height: 400px;
10+
overflow: scroll;
11+
border: 1px solid black;
12+
background-color: silver;
13+
}
14+
15+
.content {
16+
height: 200%;
17+
}
18+
19+
.composited {
20+
transform: translateZ(0);
21+
}
22+
23+
</style>
24+
<script>
25+
window.onload = function () {
26+
if (!window.internals)
27+
return;
28+
29+
if (window.testRunner)
30+
testRunner.dumpAsText();
31+
32+
const results = document.getElementById('results');
33+
results.innerText = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_EVENT_REGION);
34+
}
35+
</script>
36+
</head>
37+
<body>
38+
<div class="composited box" style="clip-path: inset(0 0 200px 0);"><div class="content"></div></div>
39+
<div class="composited box" style="clip-path: circle(80px at 120px 90px);"><div class="content"></div></div>
40+
<div class="composited box" style="clip-path: ellipse(120px 80px at 120px 90px);"><div class="content"></div></div>
41+
<div class="composited box" style="clip-path: polygon(nonzero, 10% 5%, 80% 15%, 90% 50%, 0% 50%);"><div class="content"></div></div>
42+
<div class="composited box" style="clip-path: path(evenodd, 'M100,40l20,0 0,60 20,0 0,-20 -60,0 0,-20 80,0 0,60 -60,0 0,-80z')"><div class="content"></div></div>
43+
<pre id="results"></pre>
44+
</body>
45+
</html>

0 commit comments

Comments
 (0)