mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-09-21 16:58: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,91 +109,109 @@ void SVGPathPaintable::paint(DisplayListRecordingContext& context, PaintPhase ph
|
|||
.paint_transform = paint_transform,
|
||||
};
|
||||
|
||||
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()) {
|
||||
context.display_list_recorder().fill_path({
|
||||
.path = closed_path(),
|
||||
.opacity = fill_opacity,
|
||||
.paint_style_or_color = *paint_style,
|
||||
.winding_rule = winding_rule,
|
||||
.should_anti_alias = should_anti_alias(),
|
||||
});
|
||||
} else if (auto fill_color = graphics_element.fill_color(); fill_color.has_value()) {
|
||||
context.display_list_recorder().fill_path({
|
||||
.path = closed_path(),
|
||||
.paint_style_or_color = fill_color->with_opacity(fill_opacity),
|
||||
.winding_rule = winding_rule,
|
||||
.should_anti_alias = should_anti_alias(),
|
||||
});
|
||||
}
|
||||
|
||||
Gfx::Path::CapStyle cap_style;
|
||||
switch (graphics_element.stroke_linecap().value_or(CSS::InitialValues::stroke_linecap())) {
|
||||
case CSS::StrokeLinecap::Butt:
|
||||
cap_style = Gfx::Path::CapStyle::Butt;
|
||||
break;
|
||||
case CSS::StrokeLinecap::Round:
|
||||
cap_style = Gfx::Path::CapStyle::Round;
|
||||
break;
|
||||
case CSS::StrokeLinecap::Square:
|
||||
cap_style = Gfx::Path::CapStyle::Square;
|
||||
break;
|
||||
}
|
||||
|
||||
Gfx::Path::JoinStyle join_style;
|
||||
switch (graphics_element.stroke_linejoin().value_or(CSS::InitialValues::stroke_linejoin())) {
|
||||
case CSS::StrokeLinejoin::Miter:
|
||||
join_style = Gfx::Path::JoinStyle::Miter;
|
||||
break;
|
||||
case CSS::StrokeLinejoin::Round:
|
||||
join_style = Gfx::Path::JoinStyle::Round;
|
||||
break;
|
||||
case CSS::StrokeLinejoin::Bevel:
|
||||
join_style = Gfx::Path::JoinStyle::Bevel;
|
||||
break;
|
||||
}
|
||||
|
||||
CSS::CalculationResolutionContext calculation_context {
|
||||
.length_resolution_context = CSS::Length::ResolutionContext::for_layout_node(layout_node()),
|
||||
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()) {
|
||||
context.display_list_recorder().fill_path({
|
||||
.path = closed_path(),
|
||||
.opacity = fill_opacity,
|
||||
.paint_style_or_color = *paint_style,
|
||||
.winding_rule = winding_rule,
|
||||
.should_anti_alias = should_anti_alias(),
|
||||
});
|
||||
} else if (auto fill_color = graphics_element.fill_color(); fill_color.has_value()) {
|
||||
context.display_list_recorder().fill_path({
|
||||
.path = closed_path(),
|
||||
.paint_style_or_color = fill_color->with_opacity(fill_opacity),
|
||||
.winding_rule = winding_rule,
|
||||
.should_anti_alias = should_anti_alias(),
|
||||
});
|
||||
}
|
||||
};
|
||||
auto miter_limit = graphics_element.stroke_miterlimit().value_or(CSS::InitialValues::stroke_miterlimit()).resolved(calculation_context).value_or(0);
|
||||
|
||||
auto stroke_opacity = graphics_element.stroke_opacity().value_or(1);
|
||||
auto paint_stroke = [&] {
|
||||
Gfx::Path::CapStyle cap_style;
|
||||
switch (graphics_element.stroke_linecap().value_or(CSS::InitialValues::stroke_linecap())) {
|
||||
case CSS::StrokeLinecap::Butt:
|
||||
cap_style = Gfx::Path::CapStyle::Butt;
|
||||
break;
|
||||
case CSS::StrokeLinecap::Round:
|
||||
cap_style = Gfx::Path::CapStyle::Round;
|
||||
break;
|
||||
case CSS::StrokeLinecap::Square:
|
||||
cap_style = Gfx::Path::CapStyle::Square;
|
||||
break;
|
||||
}
|
||||
|
||||
// Note: This is assuming .x_scale() == .y_scale() (which it does currently).
|
||||
auto viewbox_scale = paint_transform.x_scale();
|
||||
float stroke_thickness = graphics_element.stroke_width().value_or(1) * viewbox_scale;
|
||||
auto stroke_dasharray = graphics_element.stroke_dasharray();
|
||||
for (auto& value : stroke_dasharray)
|
||||
value *= viewbox_scale;
|
||||
float stroke_dashoffset = graphics_element.stroke_dashoffset().value_or(0) * viewbox_scale;
|
||||
Gfx::Path::JoinStyle join_style;
|
||||
switch (graphics_element.stroke_linejoin().value_or(CSS::InitialValues::stroke_linejoin())) {
|
||||
case CSS::StrokeLinejoin::Miter:
|
||||
join_style = Gfx::Path::JoinStyle::Miter;
|
||||
break;
|
||||
case CSS::StrokeLinejoin::Round:
|
||||
join_style = Gfx::Path::JoinStyle::Round;
|
||||
break;
|
||||
case CSS::StrokeLinejoin::Bevel:
|
||||
join_style = Gfx::Path::JoinStyle::Bevel;
|
||||
break;
|
||||
}
|
||||
|
||||
if (auto paint_style = graphics_element.stroke_paint_style(paint_context); paint_style.has_value()) {
|
||||
context.display_list_recorder().stroke_path({
|
||||
.cap_style = cap_style,
|
||||
.join_style = join_style,
|
||||
.miter_limit = static_cast<float>(miter_limit),
|
||||
.dash_array = stroke_dasharray,
|
||||
.dash_offset = stroke_dashoffset,
|
||||
.path = path,
|
||||
.opacity = stroke_opacity,
|
||||
.paint_style_or_color = *paint_style,
|
||||
.thickness = stroke_thickness,
|
||||
.should_anti_alias = should_anti_alias(),
|
||||
});
|
||||
} else if (auto stroke_color = graphics_element.stroke_color(); stroke_color.has_value()) {
|
||||
context.display_list_recorder().stroke_path({
|
||||
.cap_style = cap_style,
|
||||
.join_style = join_style,
|
||||
.miter_limit = static_cast<float>(miter_limit),
|
||||
.dash_array = stroke_dasharray,
|
||||
.dash_offset = stroke_dashoffset,
|
||||
.path = path,
|
||||
.paint_style_or_color = stroke_color->with_opacity(stroke_opacity),
|
||||
.thickness = stroke_thickness,
|
||||
.should_anti_alias = should_anti_alias(),
|
||||
});
|
||||
CSS::CalculationResolutionContext calculation_context {
|
||||
.length_resolution_context = CSS::Length::ResolutionContext::for_layout_node(layout_node()),
|
||||
};
|
||||
auto miter_limit = graphics_element.stroke_miterlimit().value_or(CSS::InitialValues::stroke_miterlimit()).resolved(calculation_context).value_or(0);
|
||||
|
||||
auto stroke_opacity = graphics_element.stroke_opacity().value_or(1);
|
||||
|
||||
// Note: This is assuming .x_scale() == .y_scale() (which it does currently).
|
||||
auto viewbox_scale = paint_transform.x_scale();
|
||||
float stroke_thickness = graphics_element.stroke_width().value_or(1) * viewbox_scale;
|
||||
auto stroke_dasharray = graphics_element.stroke_dasharray();
|
||||
for (auto& value : stroke_dasharray)
|
||||
value *= viewbox_scale;
|
||||
float stroke_dashoffset = graphics_element.stroke_dashoffset().value_or(0) * viewbox_scale;
|
||||
|
||||
if (auto paint_style = graphics_element.stroke_paint_style(paint_context); paint_style.has_value()) {
|
||||
context.display_list_recorder().stroke_path({
|
||||
.cap_style = cap_style,
|
||||
.join_style = join_style,
|
||||
.miter_limit = static_cast<float>(miter_limit),
|
||||
.dash_array = stroke_dasharray,
|
||||
.dash_offset = stroke_dashoffset,
|
||||
.path = path,
|
||||
.opacity = stroke_opacity,
|
||||
.paint_style_or_color = *paint_style,
|
||||
.thickness = stroke_thickness,
|
||||
.should_anti_alias = should_anti_alias(),
|
||||
});
|
||||
} else if (auto stroke_color = graphics_element.stroke_color(); stroke_color.has_value()) {
|
||||
context.display_list_recorder().stroke_path({
|
||||
.cap_style = cap_style,
|
||||
.join_style = join_style,
|
||||
.miter_limit = static_cast<float>(miter_limit),
|
||||
.dash_array = stroke_dasharray,
|
||||
.dash_offset = stroke_dashoffset,
|
||||
.path = path,
|
||||
.paint_style_or_color = stroke_color->with_opacity(stroke_opacity),
|
||||
.thickness = stroke_thickness,
|
||||
.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();
|
||||
}
|
||||
|
||||
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())
|
||||
|
|
|
|||
|
|
@ -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
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