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

LibWeb: Make SVGs respect their CSS transforms

Browse source
This commit is contained in:
Psychpsyo 2024-11-22 21:04:18 +01:00 • committed by Alexander Kalenik
commit 6f52064c4f
Notes: github-actions[bot] 2024-11-24 13:32:12 +00:00
5 changed files with 76 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

17
Libraries/LibWeb/Painting/SVGSVGPaintable.cpp
View file

@ -51,15 +51,11 @@ static Gfx::FloatMatrix4x4 matrix_with_scaled_translation(Gfx::FloatMatrix4x4 ma
return matrix; return matrix;
} }
void SVGSVGPaintable::paint_descendants(PaintContext& context, PaintableBox const& paintable, PaintPhase phase) void SVGSVGPaintable::paint_svg_box(PaintContext& context, PaintableBox const& svg_box, PaintPhase phase)
{ {
if (phase != PaintPhase::Foreground)
return;
auto paint_svg_box = [&](auto& svg_box) {
auto const& computed_values = svg_box.computed_values(); auto const& computed_values = svg_box.computed_values();
auto filters = paintable.computed_values().filter(); auto filters = svg_box.computed_values().filter();
auto masking_area = svg_box.get_masking_area(); auto masking_area = svg_box.get_masking_area();
auto needs_to_save_state = computed_values.opacity() < 1 || svg_box.has_css_transform() || svg_box.get_masking_area().has_value() || !filters.is_none(); auto needs_to_save_state = computed_values.opacity() < 1 || svg_box.has_css_transform() || svg_box.get_masking_area().has_value() || !filters.is_none();
@ -100,11 +96,16 @@ void SVGSVGPaintable::paint_descendants(PaintContext& context, PaintableBox cons
if (needs_to_save_state) { if (needs_to_save_state) {
context.display_list_recorder().restore(); context.display_list_recorder().restore();
} }
}; }
void SVGSVGPaintable::paint_descendants(PaintContext& context, PaintableBox const& paintable, PaintPhase phase)
{
if (phase != PaintPhase::Foreground)
return;
paintable.before_children_paint(context, PaintPhase::Foreground); paintable.before_children_paint(context, PaintPhase::Foreground);
paintable.for_each_child_of_type<PaintableBox>([&](PaintableBox& child) { paintable.for_each_child_of_type<PaintableBox>([&](PaintableBox& child) {
paint_svg_box(child); paint_svg_box(context, child, phase);
return IterationDecision::Continue; return IterationDecision::Continue;
}); });
paintable.after_children_paint(context, PaintPhase::Foreground); paintable.after_children_paint(context, PaintPhase::Foreground);

1
Libraries/LibWeb/Painting/SVGSVGPaintable.h
View file

@ -23,6 +23,7 @@ public:
Layout::SVGSVGBox const& layout_box() const; Layout::SVGSVGBox const& layout_box() const;
static void paint_svg_box(PaintContext& context, PaintableBox const& svg_box, PaintPhase phase);
static void paint_descendants(PaintContext& context, PaintableBox const& paintable, PaintPhase phase); static void paint_descendants(PaintContext& context, PaintableBox const& paintable, PaintPhase phase);
protected: protected:

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

@ -104,7 +104,7 @@ void StackingContext::paint_svg(PaintContext& context, PaintableBox const& paint
paintable.apply_clip_overflow_rect(context, PaintPhase::Foreground); paintable.apply_clip_overflow_rect(context, PaintPhase::Foreground);
paint_node(paintable, context, PaintPhase::Background); paint_node(paintable, context, PaintPhase::Background);
paint_node(paintable, context, PaintPhase::Border); paint_node(paintable, context, PaintPhase::Border);
SVGSVGPaintable::paint_descendants(context, paintable, phase); SVGSVGPaintable::paint_svg_box(context, paintable, phase);
paintable.clear_clip_overflow_rect(context, PaintPhase::Foreground); paintable.clear_clip_overflow_rect(context, PaintPhase::Foreground);
} }

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

@ -0,0 +1,12 @@
<!DOCTYPE html>
<style>
svg {
position: absolute;
top: 50px;
left: 50px;
}
</style>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<rect width="100" height="100" />
</svg>

14
Tests/LibWeb/Ref/input/svg-with-css-transform.html Normal file
View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<link rel="match" href="../expected/svg-with-css-transform.html" />
<style>
body {
margin: 0;
}
svg {
transform: translate(50px, 50px);
}
</style>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<rect width="100" height="100" />
</svg>