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

LibWeb: Apply corner clip before scroll offset for PaintableWithLines

Browse source 
Fixes bug when corner clip mask moves along with the scrolled text.
This commit is contained in:
Aliaksandr Kalenik 2024-05-25 19:07:58 +01:00 • committed by Andreas Kling
commit e2b2b2439c
Notes: sideshowbarker 2024-07-16 23:55:09 +09:00
3 changed files with 68 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

36
Tests/LibWeb/Ref/reference/scrolled-text-with-clipped-corners-ref.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<style>
* {
scrollbar-width: none;
}
#container {
width: 300px;
height: 300px;
border: 5px solid black;
border-radius: 50%;
overflow: hidden;
}
#text-container {
overflow: scroll;
width: 300px;
height: 300px;
font-size: 40px;
}
</style>
<div id="container">
<div id="text-container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices neque eu nisi facilisis
viverra. Integer lacinia, lacus vel condimentum suscipit, lacus felis porta nulla, eget
lacinia sem neque ut neque. In sagittis, eros vel interdum porta, quam ex rhoncus lectus,
vitae suscipit risus orci sit amet velit. Praesent imperdiet condimentum rutrum. Cras vitae
nisl sapien. Curabitur ligula diam, tincidunt congue tincidunt nec, sodales nec orci.
Vestibulum tincidunt non elit in vehicula. Etiam malesuada neque eu porta rhoncus. Curabitur
vel nunc finibus ligula posuere venenatis.
</div>
</div>
<script>
const scrollContainer = document.getElementById("text-container");
scrollContainer.scrollTop = 300;
</script>

29
Tests/LibWeb/Ref/scrolled-text-with-clipped-corners.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<link rel="match" href="reference/scrolled-text-with-clipped-corners-ref.html" />
<style>
* {
scrollbar-width: none;
}
#container {
width: 300px;
height: 300px;
border: 5px solid black;
border-radius: 50%;
overflow: scroll;
font-size: 40px;
}
</style>
<div id="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices neque eu nisi facilisis
viverra. Integer lacinia, lacus vel condimentum suscipit, lacus felis porta nulla, eget lacinia
sem neque ut neque. In sagittis, eros vel interdum porta, quam ex rhoncus lectus, vitae suscipit
risus orci sit amet velit. Praesent imperdiet condimentum rutrum. Cras vitae nisl sapien.
Curabitur ligula diam, tincidunt congue tincidunt nec, sodales nec orci. Vestibulum tincidunt
non elit in vehicula. Etiam malesuada neque eu porta rhoncus. Curabitur vel nunc finibus ligula
posuere venenatis.
</div>
<script>
const scrollContainer = document.getElementById("container");
scrollContainer.scrollTop = 300;
</script>

5
Userland/Libraries/LibWeb/Painting/PaintableBox.cpp
View file

@ -679,8 +679,6 @@ void PaintableWithLines::paint(PaintContext& context, PaintPhase phase) const
context.recording_painter().save(); context.recording_painter().save();
// FIXME: Handle overflow-x and overflow-y being different values. // FIXME: Handle overflow-x and overflow-y being different values.
context.recording_painter().add_clip_rect(context.rounded_device_rect(clip_box).to_type<int>()); context.recording_painter().add_clip_rect(context.rounded_device_rect(clip_box).to_type<int>());
auto scroll_offset = context.rounded_device_point(this->scroll_offset());
context.recording_painter().translate(-scroll_offset.to_type<int>());
auto border_radii = normalized_border_radii_data(ShrinkRadiiForBorders::Yes); auto border_radii = normalized_border_radii_data(ShrinkRadiiForBorders::Yes);
CornerRadii corner_radii { CornerRadii corner_radii {
@ -693,6 +691,9 @@ void PaintableWithLines::paint(PaintContext& context, PaintPhase phase) const
corner_clip_id = context.allocate_corner_clipper_id(); corner_clip_id = context.allocate_corner_clipper_id();
context.recording_painter().sample_under_corners(*corner_clip_id, corner_radii, context.rounded_device_rect(clip_box).to_type<int>(), CornerClip::Outside); context.recording_painter().sample_under_corners(*corner_clip_id, corner_radii, context.rounded_device_rect(clip_box).to_type<int>(), CornerClip::Outside);
} }
auto scroll_offset = context.rounded_device_point(this->scroll_offset());
context.recording_painter().translate(-scroll_offset.to_type<int>());
} }
// Text shadows // Text shadows