mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-07-28 11:49:44 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 10

LibWeb: Handle flood-opacity in line with other opacity properties

Browse source 
We now do the proper thing in terms of:
 - Allowing percentages
 - Returning the computed value in getComputedStyle
 - Handling values out of the [0,1] range

Gains us 13 WPT passes in the imported tests.
This commit is contained in:
Callum Law 2025-07-18 22:37:12 +12:00 • committed by Alexander Kalenik
commit 4ee8110449
Notes: github-actions[bot] 2025-07-18 15:06:07 +00:00
7 changed files with 84 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

4
Libraries/LibWeb/CSS/CSSStyleProperties.cpp
View file

@ -830,6 +830,10 @@ RefPtr<CSSStyleValue const> CSSStyleProperties::style_value_for_computed_propert
auto opacity = layout_node.computed_values().stroke_opacity();
return NumberStyleValue::create(opacity);
}
case PropertyID::FloodOpacity: {
auto opacity = layout_node.computed_values().flood_opacity();
return NumberStyleValue::create(opacity);
}
case PropertyID::OutlineWidth: {
auto outline_width = layout_node.computed_values().outline_width();
return LengthStyleValue::create(outline_width);

1
Libraries/LibWeb/CSS/Parser/PropertyParsing.cpp
View file

@ -662,6 +662,7 @@ Parser::ParseErrorOr<NonnullRefPtr<CSSStyleValue const>> Parser::parse_css_value
return ParseError::SyntaxError;
case PropertyID::Opacity:
case PropertyID::FillOpacity:
case PropertyID::FloodOpacity:
case PropertyID::StopOpacity:
case PropertyID::StrokeOpacity:
if (auto parsed_value = parse_opacity_value(property_id, tokens); parsed_value && !tokens.has_next_token())

3
Libraries/LibWeb/CSS/Properties.json
View file

@ -1561,7 +1561,8 @@
"inherited": false,
"initial": "1",
"valid-types": [
"number [0,1]"
"number [-∞,∞]",
"percentage [-∞,∞]"
]
},
"font": {

14
Tests/LibWeb/Text/expected/wpt-import/css/filter-effects/parsing/flood-opacity-computed.txt Normal file
View file

@ -0,0 +1,14 @@
Harness status: OK
Found 8 tests
6 Pass
2 Fail
Pass Property flood-opacity value '-1'
Pass Property flood-opacity value '0.5'
Pass Property flood-opacity value '3'
Pass Property flood-opacity value '-100%'
Pass Property flood-opacity value '50%'
Pass Property flood-opacity value '300%'
Fail Property flood-opacity value 'calc(0.5 * sign(10em - 1px))'
Fail Property flood-opacity value 'calc(50% * sign(10em - 1px))'

12
Tests/LibWeb/Text/expected/wpt-import/css/filter-effects/parsing/flood-opacity-valid.txt Normal file
View file

@ -0,0 +1,12 @@
Harness status: OK
Found 7 tests
7 Pass
Pass e.style['flood-opacity'] = "-1" should set the property value
Pass e.style['flood-opacity'] = "0.5" should set the property value
Pass e.style['flood-opacity'] = "3" should set the property value
Pass e.style['flood-opacity'] = "-100%" should set the property value
Pass e.style['flood-opacity'] = "50%" should set the property value
Pass e.style['flood-opacity'] = "300%" should set the property value
Pass e.style['flood-opacity'] = "calc(0.5 * sign(10em - 1px))" should set the property value

26
Tests/LibWeb/Text/input/wpt-import/css/filter-effects/parsing/flood-opacity-computed.svg Normal file
View file

@ -0,0 +1,26 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:h="http://www.w3.org/1999/xhtml"
width="800px" height="800px">
<title>Filter Effects Module Level 1: getComputedStyle().floodOpacity</title>
<metadata>
<h:link rel="help" href="https://drafts.fxtf.org/filter-effects/#propdef-flood-opacity"/>
<h:meta name="assert" content="flood-opacity computed value is clamped to the range [0,1]."/>
</metadata>
<g id="target"></g>
<h:script src="../../../resources/testharness.js"/>
<h:script src="../../../resources/testharnessreport.js"/>
<h:script src="../../../css/support/computed-testcommon.js"/>
<script><![CDATA[
test_computed_value("flood-opacity", "-1", "0");
test_computed_value("flood-opacity", "0.5");
test_computed_value("flood-opacity", "3", "1");
test_computed_value("flood-opacity", "-100%", "0");
test_computed_value("flood-opacity", "50%", "0.5");
test_computed_value("flood-opacity", "300%", "1");
test_computed_value("flood-opacity", "calc(0.5 * sign(10em - 1px))", "0.5");
test_computed_value("flood-opacity", "calc(50% * sign(10em - 1px))", "0.5");
]]></script>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

25
Tests/LibWeb/Text/input/wpt-import/css/filter-effects/parsing/flood-opacity-valid.svg Normal file
View file

@ -0,0 +1,25 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:h="http://www.w3.org/1999/xhtml"
width="800px" height="800px">
<title>Filter Effects Module Level 1: parsing flood-opacity with valid values</title>
<metadata>
<h:link rel="help" href="https://drafts.fxtf.org/filter-effects/#propdef-flood-opacity"/>
<h:meta name="assert" content="flood-opacity supports the full grammar 'alpha-value'."/>
</metadata>
<g id="target"></g>
<h:script src="../../../resources/testharness.js"/>
<h:script src="../../../resources/testharnessreport.js"/>
<h:script src="../../../css/support/parsing-testcommon.js"/>
<script><![CDATA[
test_valid_value("flood-opacity", "-1");
test_valid_value("flood-opacity", "0.5");
test_valid_value("flood-opacity", "3");
test_valid_value("flood-opacity", "-100%", "-1");
test_valid_value("flood-opacity", "50%", "0.5");
test_valid_value("flood-opacity", "300%", "3");
test_valid_value("flood-opacity", "calc(0.5 * sign(10em - 1px))");
]]></script>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB