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

LibWeb: Don't resolve calc'd opacity percentages at parse time

Browse source 
This behaviour should only apply to literal percentages as clarified
here: 4ee8429

We were also doing this wrong by converting the numeric type of the calc
to Length which was causing values to be defaulted to 1 instead (hence
the new passing tests for computed values as well)
This commit is contained in:
Callum Law 2025-09-07 23:32:06 +12:00 • committed by Tim Ledbetter
commit 246a1c41ff
Notes: github-actions[bot] 2025-09-08 10:07:16 +00:00
6 changed files with 29 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -3844,15 +3844,6 @@ RefPtr<StyleValue const> Parser::parse_opacity_value(PropertyID property_id, Tok
// Percentages map to the range [0,1] for opacity values // Percentages map to the range [0,1] for opacity values
if (value->is_percentage()) if (value->is_percentage())
value = NumberStyleValue::create(value->as_percentage().percentage().as_fraction()); value = NumberStyleValue::create(value->as_percentage().percentage().as_fraction());
if (value->is_calculated() && value->as_calculated().resolves_to_percentage()) {
auto maybe_percentage = value->as_calculated().resolve_percentage_deprecated({});
if (maybe_percentage.has_value()) {
auto resolved_percentage = maybe_percentage->as_fraction();
CalculationContext context {};
auto calc_node = NumericCalculationNode::create(Number { Number::Type::Number, resolved_percentage }, context);
value = CalculatedStyleValue::create(move(calc_node), NumericType { NumericType::BaseType::Length, 1 }, context);
}
}
return value; return value;
} }

4
Tests/LibWeb/Text/expected/css/calc-coverage.txt
View file

@ -138,8 +138,8 @@ ry: 'calc(2%)' -> '2%'
ry: 'calc(2% * var(--n))' -> '4%' ry: 'calc(2% * var(--n))' -> '4%'
stop-opacity: 'calc(2)' -> '1' stop-opacity: 'calc(2)' -> '1'
stop-opacity: 'calc(2 * var(--n))' -> '1' stop-opacity: 'calc(2 * var(--n))' -> '1'
stroke-opacity: 'calc(2%)' -> '1' stroke-opacity: 'calc(2%)' -> '0.02'
stroke-opacity: 'calc(2% * var(--n))' -> '1' stroke-opacity: 'calc(2% * var(--n))' -> '0.04'
stroke-width: 'calc(2px)' -> '2px' stroke-width: 'calc(2px)' -> '2px'
stroke-width: 'calc(2px * var(--n))' -> '4px' stroke-width: 'calc(2px * var(--n))' -> '4px'
tab-size: 'calc(2px)' -> '2px' tab-size: 'calc(2px)' -> '2px'

23
Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/opacity-computed.txt
View file

@ -2,8 +2,7 @@ Harness status: OK
Found 30 tests Found 30 tests
20 Pass 30 Pass
10 Fail
Pass Property opacity value '1' Pass Property opacity value '1'
Pass Property opacity value '0.5' Pass Property opacity value '0.5'
Pass Property opacity value '0' Pass Property opacity value '0'
@ -12,20 +11,20 @@ Pass Property opacity value '3'
Pass Property opacity value '-100%' Pass Property opacity value '-100%'
Pass Property opacity value '50%' Pass Property opacity value '50%'
Pass Property opacity value '300%' Pass Property opacity value '300%'
Fail Property opacity value 'calc(-50% - 50%)' Pass Property opacity value 'calc(-50% - 50%)'
Fail Property opacity value 'calc(25% * 2)' Pass Property opacity value 'calc(25% * 2)'
Pass Property opacity value 'calc(100% + 100%)' Pass Property opacity value 'calc(100% + 100%)'
Pass Property opacity value 'calc(-0.5 - 0.5)' Pass Property opacity value 'calc(-0.5 - 0.5)'
Pass Property opacity value 'calc(0.25 * 2)' Pass Property opacity value 'calc(0.25 * 2)'
Pass Property opacity value 'calc(1 + 1)' Pass Property opacity value 'calc(1 + 1)'
Fail Property opacity value 'clamp(50%, 0%, 70%)' Pass Property opacity value 'clamp(50%, 0%, 70%)'
Fail Property opacity value 'clamp(50%, 80%, 70%)' Pass Property opacity value 'clamp(50%, 80%, 70%)'
Fail Property opacity value 'clamp(50%, 60%, 70%)' Pass Property opacity value 'clamp(50%, 60%, 70%)'
Fail Property opacity value 'min(50%, 0%)' Pass Property opacity value 'min(50%, 0%)'
Fail Property opacity value 'min(0%, 50%)' Pass Property opacity value 'min(0%, 50%)'
Fail Property opacity value 'max(50%, 0%)' Pass Property opacity value 'max(50%, 0%)'
Fail Property opacity value 'max(0%, 50%)' Pass Property opacity value 'max(0%, 50%)'
Fail Property opacity value 'min(-40%, 50%)' Pass Property opacity value 'min(-40%, 50%)'
Pass Property opacity value 'clamp(0.5, 0, 0.7)' Pass Property opacity value 'clamp(0.5, 0, 0.7)'
Pass Property opacity value 'clamp(0.5, 0.8, 0.7)' Pass Property opacity value 'clamp(0.5, 0.8, 0.7)'
Pass Property opacity value 'clamp(0.5, 0.6, 0.7)' Pass Property opacity value 'clamp(0.5, 0.6, 0.7)'

25
Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/opacity-valid.txt
View file

@ -2,8 +2,7 @@ Harness status: OK
Found 30 tests Found 30 tests
19 Pass 30 Pass
11 Fail
Pass e.style['opacity'] = "1" should set the property value Pass e.style['opacity'] = "1" should set the property value
Pass e.style['opacity'] = "0.5" should set the property value Pass e.style['opacity'] = "0.5" should set the property value
Pass e.style['opacity'] = "0" should set the property value Pass e.style['opacity'] = "0" should set the property value
@ -12,20 +11,20 @@ Pass e.style['opacity'] = "3" should set the property value
Pass e.style['opacity'] = "-100%" should set the property value Pass e.style['opacity'] = "-100%" should set the property value
Pass e.style['opacity'] = "50%" should set the property value Pass e.style['opacity'] = "50%" should set the property value
Pass e.style['opacity'] = "300%" should set the property value Pass e.style['opacity'] = "300%" should set the property value
Fail e.style['opacity'] = "calc(-50% - 50%)" should set the property value Pass e.style['opacity'] = "calc(-50% - 50%)" should set the property value
Fail e.style['opacity'] = "calc(25% * 2)" should set the property value Pass e.style['opacity'] = "calc(25% * 2)" should set the property value
Fail e.style['opacity'] = "calc(100% + 100%)" should set the property value Pass e.style['opacity'] = "calc(100% + 100%)" should set the property value
Pass e.style['opacity'] = "calc(-0.5 - 0.5)" should set the property value Pass e.style['opacity'] = "calc(-0.5 - 0.5)" should set the property value
Pass e.style['opacity'] = "calc(0.25 * 2)" should set the property value Pass e.style['opacity'] = "calc(0.25 * 2)" should set the property value
Pass e.style['opacity'] = "calc(1 + 1)" should set the property value Pass e.style['opacity'] = "calc(1 + 1)" should set the property value
Fail e.style['opacity'] = "clamp(50%, 0%, 70%)" should set the property value Pass e.style['opacity'] = "clamp(50%, 0%, 70%)" should set the property value
Fail e.style['opacity'] = "clamp(50%, 80%, 70%)" should set the property value Pass e.style['opacity'] = "clamp(50%, 80%, 70%)" should set the property value
Fail e.style['opacity'] = "clamp(50%, 60%, 70%)" should set the property value Pass e.style['opacity'] = "clamp(50%, 60%, 70%)" should set the property value
Fail e.style['opacity'] = "min(50%, 0%)" should set the property value Pass e.style['opacity'] = "min(50%, 0%)" should set the property value
Fail e.style['opacity'] = "min(0%, 50%)" should set the property value Pass e.style['opacity'] = "min(0%, 50%)" should set the property value
Fail e.style['opacity'] = "max(50%, 0%)" should set the property value Pass e.style['opacity'] = "max(50%, 0%)" should set the property value
Fail e.style['opacity'] = "max(0%, 50%)" should set the property value Pass e.style['opacity'] = "max(0%, 50%)" should set the property value
Fail e.style['opacity'] = "min(-40%, 50%)" should set the property value Pass e.style['opacity'] = "min(-40%, 50%)" should set the property value
Pass e.style['opacity'] = "clamp(0.5, 0, 0.7)" should set the property value Pass e.style['opacity'] = "clamp(0.5, 0, 0.7)" should set the property value
Pass e.style['opacity'] = "clamp(0.5, 0.8, 0.7)" should set the property value Pass e.style['opacity'] = "clamp(0.5, 0.8, 0.7)" should set the property value
Pass e.style['opacity'] = "clamp(0.5, 0.6, 0.7)" should set the property value Pass e.style['opacity'] = "clamp(0.5, 0.6, 0.7)" should set the property value

5
Tests/LibWeb/Text/expected/wpt-import/css/css-values/calc-numbers.txt
View file

@ -2,14 +2,13 @@ Harness status: OK
Found 12 tests Found 12 tests
11 Pass 12 Pass
1 Fail
Pass testing tab-size: calc(2 * 3) Pass testing tab-size: calc(2 * 3)
Pass testing tab-size: calc(2 * -4) Pass testing tab-size: calc(2 * -4)
Pass testing opacity: calc(2 / 4) Pass testing opacity: calc(2 / 4)
Pass testing tab-size: calc(2 / 4) Pass testing tab-size: calc(2 / 4)
Pass testing opacity: calc(2 / 4) * 1px Pass testing opacity: calc(2 / 4) * 1px
Fail testing opacity: calc(90%) Pass testing opacity: calc(90%)
Pass testing tab-size: calc(1 + 1px) Pass testing tab-size: calc(1 + 1px)
Pass testing tab-size: calc(1 + 100%) Pass testing tab-size: calc(1 + 100%)
Pass testing tab-size: calc(100%) Pass testing tab-size: calc(100%)

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

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