mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-09-22 17:29:01 +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,
|
.paint_transform = paint_transform,
|
||||||
};
|
};
|
||||||
|
|
||||||
auto fill_opacity = graphics_element.fill_opacity().value_or(1);
|
auto paint_fill = [&] {
|
||||||
auto winding_rule = to_gfx_winding_rule(graphics_element.fill_rule().value_or(SVG::FillRule::Nonzero));
|
auto fill_opacity = graphics_element.fill_opacity().value_or(1);
|
||||||
if (auto paint_style = graphics_element.fill_paint_style(paint_context); paint_style.has_value()) {
|
auto winding_rule = to_gfx_winding_rule(graphics_element.fill_rule().value_or(SVG::FillRule::Nonzero));
|
||||||
context.display_list_recorder().fill_path({
|
if (auto paint_style = graphics_element.fill_paint_style(paint_context); paint_style.has_value()) {
|
||||||
.path = closed_path(),
|
context.display_list_recorder().fill_path({
|
||||||
.opacity = fill_opacity,
|
.path = closed_path(),
|
||||||
.paint_style_or_color = *paint_style,
|
.opacity = fill_opacity,
|
||||||
.winding_rule = winding_rule,
|
.paint_style_or_color = *paint_style,
|
||||||
.should_anti_alias = should_anti_alias(),
|
.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({
|
} else if (auto fill_color = graphics_element.fill_color(); fill_color.has_value()) {
|
||||||
.path = closed_path(),
|
context.display_list_recorder().fill_path({
|
||||||
.paint_style_or_color = fill_color->with_opacity(fill_opacity),
|
.path = closed_path(),
|
||||||
.winding_rule = winding_rule,
|
.paint_style_or_color = fill_color->with_opacity(fill_opacity),
|
||||||
.should_anti_alias = should_anti_alias(),
|
.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 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).
|
Gfx::Path::JoinStyle join_style;
|
||||||
auto viewbox_scale = paint_transform.x_scale();
|
switch (graphics_element.stroke_linejoin().value_or(CSS::InitialValues::stroke_linejoin())) {
|
||||||
float stroke_thickness = graphics_element.stroke_width().value_or(1) * viewbox_scale;
|
case CSS::StrokeLinejoin::Miter:
|
||||||
auto stroke_dasharray = graphics_element.stroke_dasharray();
|
join_style = Gfx::Path::JoinStyle::Miter;
|
||||||
for (auto& value : stroke_dasharray)
|
break;
|
||||||
value *= viewbox_scale;
|
case CSS::StrokeLinejoin::Round:
|
||||||
float stroke_dashoffset = graphics_element.stroke_dashoffset().value_or(0) * viewbox_scale;
|
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()) {
|
CSS::CalculationResolutionContext calculation_context {
|
||||||
context.display_list_recorder().stroke_path({
|
.length_resolution_context = CSS::Length::ResolutionContext::for_layout_node(layout_node()),
|
||||||
.cap_style = cap_style,
|
};
|
||||||
.join_style = join_style,
|
auto miter_limit = graphics_element.stroke_miterlimit().value_or(CSS::InitialValues::stroke_miterlimit()).resolved(calculation_context).value_or(0);
|
||||||
.miter_limit = static_cast<float>(miter_limit),
|
|
||||||
.dash_array = stroke_dasharray,
|
auto stroke_opacity = graphics_element.stroke_opacity().value_or(1);
|
||||||
.dash_offset = stroke_dashoffset,
|
|
||||||
.path = path,
|
// Note: This is assuming .x_scale() == .y_scale() (which it does currently).
|
||||||
.opacity = stroke_opacity,
|
auto viewbox_scale = paint_transform.x_scale();
|
||||||
.paint_style_or_color = *paint_style,
|
float stroke_thickness = graphics_element.stroke_width().value_or(1) * viewbox_scale;
|
||||||
.thickness = stroke_thickness,
|
auto stroke_dasharray = graphics_element.stroke_dasharray();
|
||||||
.should_anti_alias = should_anti_alias(),
|
for (auto& value : stroke_dasharray)
|
||||||
});
|
value *= viewbox_scale;
|
||||||
} else if (auto stroke_color = graphics_element.stroke_color(); stroke_color.has_value()) {
|
float stroke_dashoffset = graphics_element.stroke_dashoffset().value_or(0) * viewbox_scale;
|
||||||
context.display_list_recorder().stroke_path({
|
|
||||||
.cap_style = cap_style,
|
if (auto paint_style = graphics_element.stroke_paint_style(paint_context); paint_style.has_value()) {
|
||||||
.join_style = join_style,
|
context.display_list_recorder().stroke_path({
|
||||||
.miter_limit = static_cast<float>(miter_limit),
|
.cap_style = cap_style,
|
||||||
.dash_array = stroke_dasharray,
|
.join_style = join_style,
|
||||||
.dash_offset = stroke_dashoffset,
|
.miter_limit = static_cast<float>(miter_limit),
|
||||||
.path = path,
|
.dash_array = stroke_dasharray,
|
||||||
.paint_style_or_color = stroke_color->with_opacity(stroke_opacity),
|
.dash_offset = stroke_dashoffset,
|
||||||
.thickness = stroke_thickness,
|
.path = path,
|
||||||
.should_anti_alias = should_anti_alias(),
|
.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();
|
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