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

LibWeb/SVG: Respect paint-order when painting SVG paths

Browse source
This commit is contained in:
Tim Ledbetter 2025-08-24 15:05:57 +01:00 • committed by Sam Atkins
commit 277b81ca97
Notes: github-actions[bot] 2025-08-28 09:32:27 +00:00
5 changed files with 155 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

18
Libraries/LibWeb/Painting/SVGPathPaintable.cpp
View file

@ -109,6 +109,7 @@ void SVGPathPaintable::paint(DisplayListRecordingContext& context, PaintPhase ph
.paint_transform = paint_transform,
};
auto paint_fill = [&] {
auto fill_opacity = graphics_element.fill_opacity().value_or(1);
auto winding_rule = to_gfx_winding_rule(graphics_element.fill_rule().value_or(SVG::FillRule::Nonzero));
if (auto paint_style = graphics_element.fill_paint_style(paint_context); paint_style.has_value()) {
@ -127,7 +128,9 @@ void SVGPathPaintable::paint(DisplayListRecordingContext& context, PaintPhase ph
.should_anti_alias = should_anti_alias(),
});
}
};
auto paint_stroke = [&] {
Gfx::Path::CapStyle cap_style;
switch (graphics_element.stroke_linecap().value_or(CSS::InitialValues::stroke_linecap())) {
case CSS::StrokeLinecap::Butt:
@ -195,6 +198,21 @@ void SVGPathPaintable::paint(DisplayListRecordingContext& context, PaintPhase ph
.should_anti_alias = should_anti_alias(),
});
}
};
for (auto paint_order : graphics_element.paint_order()) {
switch (paint_order) {
case CSS::PaintOrder::Fill:
paint_fill();
break;
case CSS::PaintOrder::Stroke:
paint_stroke();
break;
case CSS::PaintOrder::Markers:
// FIXME: Implement marker painting
break;
}
}
}
}

7
Libraries/LibWeb/SVG/SVGGraphicsElement.cpp
View file

@ -202,6 +202,13 @@ Optional<float> SVGGraphicsElement::fill_opacity() const
return layout_node()->computed_values().fill_opacity();
}
CSS::PaintOrderList SVGGraphicsElement::paint_order() const
{
if (!layout_node())
return CSS::InitialValues::paint_order();
return layout_node()->computed_values().paint_order();
}
Optional<CSS::StrokeLinecap> SVGGraphicsElement::stroke_linecap() const
{
if (!layout_node())

1
Libraries/LibWeb/SVG/SVGGraphicsElement.h
View file

@ -39,6 +39,7 @@ public:
Optional<float> stroke_dashoffset() const;
Optional<float> stroke_width() const;
Optional<float> fill_opacity() const;
CSS::PaintOrderList paint_order() const;
Optional<CSS::StrokeLinecap> stroke_linecap() const;
Optional<CSS::StrokeLinejoin> stroke_linejoin() const;
Optional<CSS::NumberOrCalculated> stroke_miterlimit() const;

31
Tests/LibWeb/Ref/expected/svg/paint-order-ref.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<!-- Based on https://wpt.live/svg/painting/reftests/paint-order-001.svg with markers removed -->
<link rel="match" href="../../expected/svg/paint-order-ref.html" />
<svg id="svg-root" width="100%" height="100%" viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg">
<defs>
<rect id="rectangle" width="2" height="2" style="fill:blue" />
<path id="path" d="m -25,-25 0,50 50,0 0,-50 z"/>
</defs>
<g font-size="16" style="fill:lavender;stroke:green;stroke-width:5px">
<g href="#path" transform="translate(30,30)">
<use href="#path" />
</g>
<g href="#path" transform="translate(150,30)">
<use href="#path" />
</g>
<g href="#path" transform="translate(30, 150)">
<use href="#path" />
</g>
<g href="#path" transform="translate(150,150)">
<use href="#path" />
</g>
<g href="#path" transform="translate(30,270)">
<use href="#path" />
<use href="#path" style="stroke:none" />
</g>
<g href="#path" transform="translate(150,270)">
<use href="#path" />
<use href="#path" style="stroke:none" />
</g>
</g>
</svg>

17
Tests/LibWeb/Ref/input/svg/paint-order.html Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<!-- Based on https://wpt.live/svg/painting/reftests/paint-order-001.svg with markers removed -->
<link rel="match" href="../../expected/svg/paint-order-ref.html" />
<svg id="svg-root" width="100%" height="100%" viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg">
<defs>
<rect id="rectangle" width="2" height="2" style="fill:blue" />
<path id="path" d="m -25,-25 0,50 50,0 0,-50 z"/>
</defs>
<g font-size="16" style="fill:lavender;stroke:green;stroke-width:5px;">
<use href="#path" transform="translate(30,30)" />
<use href="#path" transform="translate(150,30)" style="paint-order:normal" />
<use href="#path" transform="translate(30, 150)" style="paint-order:fill" />
<use href="#path" transform="translate(150,150)" style="paint-order:fill stroke" />
<use href="#path" transform="translate(30,270)" style="paint-order:stroke" />
<use href="#path" transform="translate(150,270)" style="paint-order:stroke fill" />
</g>
</svg>