From 246a1c41ff96aeba6bedd95a68a7445e025e31d6 Mon Sep 17 00:00:00 2001 From: Callum Law Date: Sun, 7 Sep 2025 23:32:06 +1200 Subject: [PATCH] LibWeb: Don't resolve calc'd opacity percentages at parse time This behaviour should only apply to literal percentages as clarified here: https://github.com/w3c/csswg-drafts/commit/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) --- .../LibWeb/CSS/Parser/PropertyParsing.cpp | 9 ------- .../Text/expected/css/calc-coverage.txt | 4 +-- .../css-color/parsing/opacity-computed.txt | 23 ++++++++--------- .../css/css-color/parsing/opacity-valid.txt | 25 +++++++++---------- .../css/css-values/calc-numbers.txt | 5 ++-- .../parsing/flood-opacity-computed.txt | 5 ++-- 6 files changed, 29 insertions(+), 42 deletions(-) diff --git a/Libraries/LibWeb/CSS/Parser/PropertyParsing.cpp b/Libraries/LibWeb/CSS/Parser/PropertyParsing.cpp index ab03502d5f6..c4c47fc0b46 100644 --- a/Libraries/LibWeb/CSS/Parser/PropertyParsing.cpp +++ b/Libraries/LibWeb/CSS/Parser/PropertyParsing.cpp @@ -3844,15 +3844,6 @@ RefPtr Parser::parse_opacity_value(PropertyID property_id, Tok // Percentages map to the range [0,1] for opacity values if (value->is_percentage()) 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; } diff --git a/Tests/LibWeb/Text/expected/css/calc-coverage.txt b/Tests/LibWeb/Text/expected/css/calc-coverage.txt index 163dac5834b..6074fc07d89 100644 --- a/Tests/LibWeb/Text/expected/css/calc-coverage.txt +++ b/Tests/LibWeb/Text/expected/css/calc-coverage.txt @@ -138,8 +138,8 @@ ry: 'calc(2%)' -> '2%' ry: 'calc(2% * var(--n))' -> '4%' stop-opacity: 'calc(2)' -> '1' stop-opacity: 'calc(2 * var(--n))' -> '1' -stroke-opacity: 'calc(2%)' -> '1' -stroke-opacity: 'calc(2% * var(--n))' -> '1' +stroke-opacity: 'calc(2%)' -> '0.02' +stroke-opacity: 'calc(2% * var(--n))' -> '0.04' stroke-width: 'calc(2px)' -> '2px' stroke-width: 'calc(2px * var(--n))' -> '4px' tab-size: 'calc(2px)' -> '2px' diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/opacity-computed.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/opacity-computed.txt index 20b40286f26..c77633acb79 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/opacity-computed.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/opacity-computed.txt @@ -2,8 +2,7 @@ Harness status: OK Found 30 tests -20 Pass -10 Fail +30 Pass Pass Property opacity value '1' Pass Property opacity value '0.5' Pass Property opacity value '0' @@ -12,20 +11,20 @@ Pass Property opacity value '3' Pass Property opacity value '-100%' Pass Property opacity value '50%' Pass Property opacity value '300%' -Fail Property opacity value 'calc(-50% - 50%)' -Fail Property opacity value 'calc(25% * 2)' +Pass Property opacity value 'calc(-50% - 50%)' +Pass Property opacity value 'calc(25% * 2)' Pass Property opacity value 'calc(100% + 100%)' Pass Property opacity value 'calc(-0.5 - 0.5)' Pass Property opacity value 'calc(0.25 * 2)' Pass Property opacity value 'calc(1 + 1)' -Fail Property opacity value 'clamp(50%, 0%, 70%)' -Fail Property opacity value 'clamp(50%, 80%, 70%)' -Fail Property opacity value 'clamp(50%, 60%, 70%)' -Fail Property opacity value 'min(50%, 0%)' -Fail Property opacity value 'min(0%, 50%)' -Fail Property opacity value 'max(50%, 0%)' -Fail Property opacity value 'max(0%, 50%)' -Fail Property opacity value 'min(-40%, 50%)' +Pass Property opacity value 'clamp(50%, 0%, 70%)' +Pass Property opacity value 'clamp(50%, 80%, 70%)' +Pass Property opacity value 'clamp(50%, 60%, 70%)' +Pass Property opacity value 'min(50%, 0%)' +Pass Property opacity value 'min(0%, 50%)' +Pass Property opacity value 'max(50%, 0%)' +Pass Property opacity value 'max(0%, 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.8, 0.7)' Pass Property opacity value 'clamp(0.5, 0.6, 0.7)' diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/opacity-valid.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/opacity-valid.txt index 35039d7c724..127b69ab336 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/opacity-valid.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/opacity-valid.txt @@ -2,8 +2,7 @@ Harness status: OK Found 30 tests -19 Pass -11 Fail +30 Pass 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" 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'] = "50%" 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 -Fail 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(-50% - 50%)" should set the property value +Pass e.style['opacity'] = "calc(25% * 2)" 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.25 * 2)" 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 -Fail 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 -Fail e.style['opacity'] = "min(50%, 0%)" should set the property value -Fail e.style['opacity'] = "min(0%, 50%)" should set the property value -Fail e.style['opacity'] = "max(50%, 0%)" should set the property value -Fail 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'] = "clamp(50%, 0%, 70%)" should set the property value +Pass e.style['opacity'] = "clamp(50%, 80%, 70%)" should set the property value +Pass e.style['opacity'] = "clamp(50%, 60%, 70%)" should set the property value +Pass e.style['opacity'] = "min(50%, 0%)" should set the property value +Pass e.style['opacity'] = "min(0%, 50%)" should set the property value +Pass e.style['opacity'] = "max(50%, 0%)" should set the property value +Pass e.style['opacity'] = "max(0%, 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.8, 0.7)" should set the property value Pass e.style['opacity'] = "clamp(0.5, 0.6, 0.7)" should set the property value diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-values/calc-numbers.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-values/calc-numbers.txt index 2fcacbc73cf..564fa657da0 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-values/calc-numbers.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-values/calc-numbers.txt @@ -2,14 +2,13 @@ Harness status: OK Found 12 tests -11 Pass -1 Fail +12 Pass Pass testing tab-size: calc(2 * 3) Pass testing tab-size: calc(2 * -4) Pass testing opacity: calc(2 / 4) Pass testing tab-size: calc(2 / 4) 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 + 100%) Pass testing tab-size: calc(100%) diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/filter-effects/parsing/flood-opacity-computed.txt b/Tests/LibWeb/Text/expected/wpt-import/css/filter-effects/parsing/flood-opacity-computed.txt index 37d13c6c366..c90bb27c4fc 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/filter-effects/parsing/flood-opacity-computed.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/filter-effects/parsing/flood-opacity-computed.txt @@ -2,8 +2,7 @@ Harness status: OK Found 8 tests -7 Pass -1 Fail +8 Pass Pass Property flood-opacity value '-1' Pass Property flood-opacity value '0.5' 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 '300%' Pass Property flood-opacity value 'calc(0.5 * sign(10em - 1px))' -Fail Property flood-opacity value 'calc(50% * sign(10em - 1px))' \ No newline at end of file +Pass Property flood-opacity value 'calc(50% * sign(10em - 1px))' \ No newline at end of file