mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-09-24 02:08:58 +00:00
LibWeb/SVG: Respect paint-order when painting SVG paths
This commit is contained in:
Tim Ledbetter
Sam Atkins
parent
a87a9156d5
commit
277b81ca97
Notes:
github-actions[bot]
2025-08-28 09:32:27 +00:00
Author: https://github.com/tcl3
Commit: 277b81ca97
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/5977
Reviewed-by: https://github.com/AtkinsSJ ✅
5 changed files with 155 additions and 81 deletions
|
|
@ -109,6 +109,7 @@ void SVGPathPaintable::paint(DisplayListRecordingContext& context, PaintPhase ph
|
||||||
.paint_transform = paint_transform,
|
.paint_transform = paint_transform,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
auto paint_fill = [&] {
|
||||||
auto fill_opacity = graphics_element.fill_opacity().value_or(1);
|
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));
|
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()) {
|
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(),
|
.should_anti_alias = should_anti_alias(),
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
auto paint_stroke = [&] {
|
||||||
Gfx::Path::CapStyle cap_style;
|
Gfx::Path::CapStyle cap_style;
|
||||||
switch (graphics_element.stroke_linecap().value_or(CSS::InitialValues::stroke_linecap())) {
|
switch (graphics_element.stroke_linecap().value_or(CSS::InitialValues::stroke_linecap())) {
|
||||||
case CSS::StrokeLinecap::Butt:
|
case CSS::StrokeLinecap::Butt:
|
||||||
|
|
@ -195,6 +198,21 @@ void SVGPathPaintable::paint(DisplayListRecordingContext& context, PaintPhase ph
|
||||||
.should_anti_alias = should_anti_alias(),
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -202,6 +202,13 @@ Optional<float> SVGGraphicsElement::fill_opacity() const
|
||||||
return layout_node()->computed_values().fill_opacity();
|
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
|
Optional<CSS::StrokeLinecap> SVGGraphicsElement::stroke_linecap() const
|
||||||
{
|
{
|
||||||
if (!layout_node())
|
if (!layout_node())
|
||||||
|
|
|
||||||
|
|
@ -39,6 +39,7 @@ public:
|
||||||
Optional<float> stroke_dashoffset() const;
|
Optional<float> stroke_dashoffset() const;
|
||||||
Optional<float> stroke_width() const;
|
Optional<float> stroke_width() const;
|
||||||
Optional<float> fill_opacity() const;
|
Optional<float> fill_opacity() const;
|
||||||
|
CSS::PaintOrderList paint_order() const;
|
||||||
Optional<CSS::StrokeLinecap> stroke_linecap() const;
|
Optional<CSS::StrokeLinecap> stroke_linecap() const;
|
||||||
Optional<CSS::StrokeLinejoin> stroke_linejoin() const;
|
Optional<CSS::StrokeLinejoin> stroke_linejoin() const;
|
||||||
Optional<CSS::NumberOrCalculated> stroke_miterlimit() const;
|
Optional<CSS::NumberOrCalculated> stroke_miterlimit() const;
|
||||||
|
|
|
||||||
31
Tests/LibWeb/Ref/expected/svg/paint-order-ref.html
Normal file
31
Tests/LibWeb/Ref/expected/svg/paint-order-ref.html
Normal 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
17
Tests/LibWeb/Ref/input/svg/paint-order.html
Normal 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>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue