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

LibWeb: Fix scroll offset application for SVG root box

Browse source 
Now we use `before_paint()` and `after_paint()` calls for SVG root box
to make sure that both clip and scroll are applied.

Fixes painting of SVG arrows on www.ubereats.com
This commit is contained in:
Aliaksandr Kalenik 2025-03-26 19:01:11 +00:00 • committed by Alexander Kalenik
commit e655b77393
Notes: github-actions[bot] 2025-03-26 20:13:44 +00:00
3 changed files with 29 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

4
Libraries/LibWeb/Painting/StackingContext.cpp
View file

@ -103,11 +103,11 @@ void StackingContext::paint_svg(PaintContext& context, PaintableBox const& paint
if (phase != PaintPhase::Foreground)
return;
paintable.apply_clip_overflow_rect(context, PaintPhase::Foreground);
paintable.before_paint(context, PaintPhase::Foreground);
paint_node(paintable, context, PaintPhase::Background);
paint_node(paintable, context, PaintPhase::Border);
SVGSVGPaintable::paint_svg_box(context, paintable, phase);
paintable.clear_clip_overflow_rect(context, PaintPhase::Foreground);
paintable.after_paint(context, PaintPhase::Foreground);
}
void StackingContext::paint_descendants(PaintContext& context, Paintable const& paintable, StackingContextPaintPhase phase)

12
Tests/LibWeb/Ref/expected/scrolled-svg-path-with-transform.html Normal file
View file

@ -0,0 +1,12 @@
<!doctype html>
<style>
body {
margin: 0px;
height: 5000px;
transform: translate(0, -100px);
}
.rotate {
transform: rotate(180deg);
outline: 1px solid black;
}
</style><body style="overflow: auto"><svg class="rotate"><path d="M22 13.5H6.3l5.5 7.5H8.3l-6.5-9 6.5-9h3.5l-5.5 7.5H22v3z">

15
Tests/LibWeb/Ref/input/scrolled-svg-path-with-transform.html Normal file
View file

@ -0,0 +1,15 @@
<!doctype html>
<link rel="match" href="../expected/scrolled-svg-path-with-transform.html" />
<style>
body {
margin: 0px;
height: 5000px;
}
.rotate {
transform: rotate(180deg);
outline: 1px solid black;
}
</style><body style="overflow: auto"><svg class="rotate"><path d="M22 13.5H6.3l5.5 7.5H8.3l-6.5-9 6.5-9h3.5l-5.5 7.5H22v3z">
<script>
window.scrollBy(0, 100);
</script>