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

LibWeb: Use correct colors for SVGFEFloodElement::flood_color

Browse source 
Previously we would always render floods as black, we now use the
computed color.

We also now support relative lengths within any `calc`s present.
This commit is contained in:
Callum Law 2025-07-19 16:31:03 +12:00 • committed by Sam Atkins
commit 344d6199da
Notes: github-actions[bot] 2025-08-04 10:30:18 +00:00
7 changed files with 46 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

10
Libraries/LibWeb/CSS/ComputedProperties.cpp
View file

@ -446,16 +446,6 @@ ClipRule ComputedProperties::clip_rule() const
return keyword_to_fill_rule(value.to_keyword()).release_value();
}
Color ComputedProperties::flood_color(Layout::NodeWithStyle const& node) const
{
auto const& value = property(PropertyID::FloodColor);
if (value.has_color()) {
return value.to_color(ColorResolutionContext::for_layout_node_with_style(node)).value();
}
return InitialValues::flood_color();
}
float ComputedProperties::flood_opacity() const
{
auto const& value = property(PropertyID::FloodOpacity);

1
Libraries/LibWeb/CSS/ComputedProperties.h
View file

@ -193,7 +193,6 @@ public:
float stroke_opacity() const;
FillRule fill_rule() const;
ClipRule clip_rule() const;
Color flood_color(Layout::NodeWithStyle const&) const;
float flood_opacity() const;
Gfx::FontCascadeList const& computed_font_list() const

2
Libraries/LibWeb/Layout/Node.cpp
View file

@ -666,7 +666,7 @@ void NodeWithStyle::apply_style(CSS::ComputedProperties const& computed_style)
if (computed_style.filter().has_filters())
computed_values.set_filter(resolve_filter(computed_style.filter()));
computed_values.set_flood_color(computed_style.flood_color(*this));
computed_values.set_flood_color(computed_style.color_or_fallback(CSS::PropertyID::FloodColor, CSS::ColorResolutionContext::for_layout_node_with_style(*this), CSS::InitialValues::flood_color()));
computed_values.set_flood_opacity(computed_style.flood_opacity());
computed_values.set_justify_content(computed_style.justify_content());

8
Libraries/LibWeb/SVG/SVGFEFloodElement.cpp
View file

@ -38,11 +38,11 @@ GC::Ptr<Layout::Node> SVGFEFloodElement::create_layout_node(GC::Ref<CSS::Compute
}
// https://www.w3.org/TR/filter-effects-1/#FloodColorProperty
Gfx::Color SVGFEFloodElement::flood_color() const
Gfx::Color SVGFEFloodElement::flood_color()
{
// FIXME: Find a way to get the Gfx::Color of the flood_color property
// without having a layout node.
return Color::Black;
if (this->computed_properties())
return this->computed_properties()->color_or_fallback(CSS::PropertyID::FloodColor, CSS::ColorResolutionContext::for_element({ *this }), CSS::InitialValues::flood_color());
return CSS::InitialValues::flood_color();
}
// https://www.w3.org/TR/filter-effects-1/#FloodOpacityProperty

2
Libraries/LibWeb/SVG/SVGFEFloodElement.h
View file

@ -23,7 +23,7 @@ public:
virtual GC::Ptr<Layout::Node> create_layout_node(GC::Ref<CSS::ComputedProperties>) override;
Gfx::Color flood_color() const;
Gfx::Color flood_color();
float flood_opacity() const;
private:

12
Tests/LibWeb/Ref/expected/flood-color-ref.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<svg width="200" height="200">
<rect x="0" y="0" width="200" height="200" fill="#FF0000" />
</svg>
<svg width="200" height="200">
<rect x="0" y="0" width="200" height="200" fill="#008000" />
</svg>
<svg width="200" height="200">
<rect x="0" y="0" width="200" height="200" fill="#0000FF" />
</svg>
</html>

28
Tests/LibWeb/Ref/input/flood-color.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html style="color: green">
<link rel="match" href="../expected/flood-color-ref.html" />
<svg width="200" height="200">
<defs>
<filter id="floodFilter1" filterUnits="userSpaceOnUse">
<feFlood x="0" y="0" flood-color="red" />
</filter>
</defs>
<use filter="url(#floodFilter1)" />
</svg>
<svg width="200" height="200">
<defs>
<filter id="floodFilter2" filterUnits="userSpaceOnUse">
<feFlood x="0" y="0" flood-color="currentcolor" />
</filter>
</defs>
<use filter="url(#floodFilter2)" />
</svg>
<svg width="200" height="200">
<defs>
<filter id="floodFilter3" filterUnits="userSpaceOnUse">
<feFlood x="0" y="0" flood-color="rgb(0 0 calc(255 * sign(1em - 1px)))" />
</filter>
</defs>
<use filter="url(#floodFilter3)" />
</svg>
</html>