mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-08-01 13:49:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb/Painting: Apply clip and mask operations that are off-screen

Browse source 
These operations should still apply even if they are off screen, because
they affect painting of things outside of their bounding rectangles.

This commit makes us always apply these, regardless of if they are in
the visible region. However, if they are outside that region, we
replace them with simple clip-rect commands, which have the same
effect (not painting anything) but are cheaper than computing a full
mask bitmap.
This commit is contained in:
Sam Atkins 2024-11-13 12:29:17 +00:00 • committed by Alexander Kalenik
commit a6822986bb
Notes: github-actions[bot] 2024-11-13 15:11:18 +00:00
4 changed files with 83 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

2
Tests/LibWeb/Ref/expected/clip-offscreen-ref.html Normal file
View file

@ -0,0 +1,2 @@
<!DOCTYPE html>
(This space intentionally left blank)

57
Tests/LibWeb/Ref/input/clip-offscreen.html Normal file
View file

@ -0,0 +1,57 @@
<!DOCTYPE html>
<link rel="match" href="../expected/clip-offscreen-ref.html" />
<style>
.wrapper {
border: 1px solid black;
height: 50px;
position: absolute;
top: -100px;
overflow: auto;
}
</style>
<div class="wrapper">
<div>
01) Overflow<br/>
02) Overflow<br/>
03) Overflow<br/>
04) Overflow<br/>
05) Overflow<br/>
06) Overflow<br/>
07) Overflow<br/>
08) Overflow<br/>
09) Overflow<br/>
10) Overflow<br/>
</div>
</div>
<div class="wrapper" style="left: 200px; border-radius: 10px">
<div>
01) Border-radius overflow<br/>
02) Border-radius overflow<br/>
03) Border-radius overflow<br/>
04) Border-radius overflow<br/>
05) Border-radius overflow<br/>
06) Border-radius overflow<br/>
07) Border-radius overflow<br/>
08) Border-radius overflow<br/>
09) Border-radius overflow<br/>
10) Border-radius overflow<br/>
</div>
</div>
<div class="wrapper" style="left: 400px; clip-path: polygon(65px 0px, 35px 80px, 105px 30px, 25px 30px, 95px 80px)">
<div>
01) Masked overflow<br/>
02) Masked overflow<br/>
03) Masked overflow<br/>
04) Masked overflow<br/>
05) Masked overflow<br/>
06) Masked overflow<br/>
07) Masked overflow<br/>
08) Masked overflow<br/>
09) Masked overflow<br/>
10) Masked overflow<br/>
</div>
</div>
(This space intentionally left blank)