mirror of
https://github.com/SerenityOS/serenity
synced 2024-07-22 02:26:11 +00:00
LibWeb: Apply corner clip before scroll offset for PaintableWithLines
Fixes bug when corner clip mask moves along with the scrolled text.
This commit is contained in:
parent
ba5192b2e7
commit
e2b2b2439c
|
@ -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
29
Tests/LibWeb/Ref/scrolled-text-with-clipped-corners.html
Normal 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>
|
|
@ -679,8 +679,6 @@ void PaintableWithLines::paint(PaintContext& context, PaintPhase phase) const
|
|||
context.recording_painter().save();
|
||||
// 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>());
|
||||
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);
|
||||
CornerRadii corner_radii {
|
||||
|
@ -693,6 +691,9 @@ void PaintableWithLines::paint(PaintContext& context, PaintPhase phase) const
|
|||
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);
|
||||
}
|
||||
|
||||
auto scroll_offset = context.rounded_device_point(this->scroll_offset());
|
||||
context.recording_painter().translate(-scroll_offset.to_type<int>());
|
||||
}
|
||||
|
||||
// Text shadows
|
||||
|
|
Loading…
Reference in a new issue