LibWeb: Absolutize CalculatedSVs in StyleComputer::absolutize_values

Author: https://github.com/Calme1709 Commit: a2ceed27e2 Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/5699 Reviewed-by: https://github.com/AtkinsSJ ✅
2025-08-29 13:46:31 +00:00 · 2025-08-04 15:53:14 +12:00 · 2025-08-04 15:53:14 +12:00 · a2ceed27e2 · 2025-08-06 16:46:20 +00:00
commit a2ceed27e2
parent 9db3c66a85
13 changed files with 49 additions and 40 deletions
--- a/Libraries/LibWeb/CSS/StyleValues/CalculatedStyleValue.cpp
+++ b/Libraries/LibWeb/CSS/StyleValues/CalculatedStyleValue.cpp
@ -2661,6 +2661,17 @@ String CalculatedStyleValue::to_string(SerializationMode serialization_mode) con
    return serialize_a_math_function(m_calculation, m_context, serialization_mode);
 }

+ValueComparingNonnullRefPtr<CSSStyleValue const> CalculatedStyleValue::absolutized(CSSPixelRect const& viewport_rect, Length::FontMetrics const& font_metrics, Length::FontMetrics const& root_font_metrics) const
+{
+    Length::ResolutionContext length_resolution_context {
+        .viewport_rect = viewport_rect,
+        .font_metrics = font_metrics,
+        .root_font_metrics = root_font_metrics
+    };
+
+    return CalculatedStyleValue::create(simplify_a_calculation_tree(m_calculation, m_context, { .length_resolution_context = length_resolution_context }), m_resolved_type, m_context);
+}
+
 bool CalculatedStyleValue::equals(CSSStyleValue const& other) const
 {
    if (type() != other.type())
--- a/Libraries/LibWeb/CSS/StyleValues/CalculatedStyleValue.h
+++ b/Libraries/LibWeb/CSS/StyleValues/CalculatedStyleValue.h
@ -68,6 +68,7 @@ public:
    }

    virtual String to_string(SerializationMode) const override;
+    virtual ValueComparingNonnullRefPtr<CSSStyleValue const> absolutized(CSSPixelRect const& viewport_rect, Length::FontMetrics const& font_metrics, Length::FontMetrics const& root_font_metrics) const override;
    virtual bool equals(CSSStyleValue const& other) const override;

    Optional<CalculationResult> resolve_value(CalculationResolutionContext const&) const;
--- a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-basis-computed.txt
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-basis-computed.txt
@ -2,8 +2,8 @@ Harness status: OK

 Found 12 tests

-9 Pass
-3 Fail
+10 Pass
+2 Fail
 Pass	Property flex-basis value '1px'
 Pass	Property flex-basis value '400%'
 Pass	Property flex-basis value 'auto'
@ -11,7 +11,7 @@ Pass	Property flex-basis value 'content'
 Pass	Property flex-basis value 'fit-content'
 Pass	Property flex-basis value 'min-content'
 Pass	Property flex-basis value 'max-content'
-Fail	Property flex-basis value 'calc(10px + 0.5em)'
+Pass	Property flex-basis value 'calc(10px + 0.5em)'
 Fail	Property flex-basis value 'calc(10px - 0.5em)'
 Pass	Property flex-basis value 'calc(10%)'
 Pass	Property flex-basis value 'calc(0% + 10px)'
--- a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-computed.txt
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-computed.txt
@ -2,13 +2,13 @@ Harness status: OK

 Found 8 tests

-6 Pass
-2 Fail
+7 Pass
+1 Fail
 Pass	Property flex value 'none'
 Pass	Property flex value '1'
 Pass	Property flex value '2 3'
 Pass	Property flex value '4 5 6px'
 Pass	Property flex value '7% 8'
 Pass	Property flex value '8 auto'
-Fail	Property flex value 'calc(10px + 0.5em)'
+Pass	Property flex value 'calc(10px + 0.5em)'
 Fail	Property flex value 'calc(10px - 0.5em)'
--- a/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/inset-block-inline-computed.txt
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/inset-block-inline-computed.txt
@ -2,17 +2,16 @@ Harness status: OK

 Found 12 tests

-8 Pass
-4 Fail
+12 Pass
 Pass	Property inset-block-start value 'auto'
 Pass	Property inset-block-end value '-10px'
 Pass	Property inset-inline-start value '-20%'
-Fail	Property inset-inline-end value 'calc(10px - 0.5em)'
+Pass	Property inset-inline-end value 'calc(10px - 0.5em)'
 Pass	Property inset-block value 'auto'
 Pass	Property inset-block value '-10px'
-Fail	Property inset-block value 'calc(10px - 0.5em) -20%'
+Pass	Property inset-block value 'calc(10px - 0.5em) -20%'
 Pass	Property inset-block value 'auto auto'
 Pass	Property inset-inline value '-20%'
-Fail	Property inset-inline value 'calc(10px - 0.5em)'
+Pass	Property inset-inline value 'calc(10px - 0.5em)'
 Pass	Property inset-inline value '-10px auto'
-Fail	Property inset-inline value 'auto calc(10px + 0.5em)'
+Pass	Property inset-inline value 'auto calc(10px + 0.5em)'
--- a/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/inset-computed.txt
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/inset-computed.txt
@ -2,13 +2,12 @@ Harness status: OK

 Found 8 tests

-6 Pass
-2 Fail
+8 Pass
 Pass	Property inset value 'auto'
 Pass	Property inset value '-10px'
-Fail	Property inset value 'calc(10px - 0.5em) -20%'
+Pass	Property inset value 'calc(10px - 0.5em) -20%'
 Pass	Property inset value 'auto auto'
-Fail	Property inset value '10px calc(10px - 0.5em) -30px'
+Pass	Property inset value '10px calc(10px - 0.5em) -30px'
 Pass	Property inset value 'auto auto auto'
 Pass	Property inset value '10px 20px auto -30px'
 Pass	Property inset value 'auto auto auto auto'
--- a/Tests/LibWeb/Text/expected/wpt-import/css/css-sizing/parsing/max-height-computed.txt
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-sizing/parsing/max-height-computed.txt
@ -2,8 +2,8 @@ Harness status: OK

 Found 12 tests

-9 Pass
-3 Fail
+10 Pass
+2 Fail
 Pass	Property max-height value 'none'
 Pass	Property max-height value 'min-content'
 Pass	Property max-height value 'max-content'
@ -11,7 +11,7 @@ Pass	Property max-height value '10px'
 Pass	Property max-height value '20%'
 Pass	Property max-height value 'calc(10% + 40px)'
 Fail	Property max-height value 'calc(10px - 0.5em)'
-Fail	Property max-height value 'calc(10px + 0.5em)'
+Pass	Property max-height value 'calc(10px + 0.5em)'
 Pass	Property max-height value 'fit-content(10px)'
 Pass	Property max-height value 'fit-content(20%)'
 Pass	Property max-height value 'fit-content(calc(10% + 40px))'
--- a/Tests/LibWeb/Text/expected/wpt-import/css/css-sizing/parsing/max-width-computed.txt
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-sizing/parsing/max-width-computed.txt
@ -2,8 +2,8 @@ Harness status: OK

 Found 12 tests

-9 Pass
-3 Fail
+10 Pass
+2 Fail
 Pass	Property max-width value 'none'
 Pass	Property max-width value 'min-content'
 Pass	Property max-width value 'max-content'
@ -11,7 +11,7 @@ Pass	Property max-width value '10px'
 Pass	Property max-width value '20%'
 Pass	Property max-width value 'calc(10% + 40px)'
 Fail	Property max-width value 'calc(10px - 0.5em)'
-Fail	Property max-width value 'calc(10px + 0.5em)'
+Pass	Property max-width value 'calc(10px + 0.5em)'
 Pass	Property max-width value 'fit-content(10px)'
 Pass	Property max-width value 'fit-content(20%)'
 Pass	Property max-width value 'fit-content(calc(10% + 40px))'
--- a/Tests/LibWeb/Text/expected/wpt-import/css/css-sizing/parsing/min-height-computed.txt
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-sizing/parsing/min-height-computed.txt
@ -2,15 +2,15 @@ Harness status: OK

 Found 11 tests

-8 Pass
-3 Fail
+9 Pass
+2 Fail
 Pass	Property min-height value 'min-content'
 Pass	Property min-height value 'max-content'
 Pass	Property min-height value '10px'
 Pass	Property min-height value '20%'
 Pass	Property min-height value 'calc(10% + 40px)'
 Fail	Property min-height value 'calc(10px - 0.5em)'
-Fail	Property min-height value 'calc(10px + 0.5em)'
+Pass	Property min-height value 'calc(10px + 0.5em)'
 Pass	Property min-height value 'fit-content(10px)'
 Pass	Property min-height value 'fit-content(20%)'
 Pass	Property min-height value 'fit-content(calc(10% + 40px))'
--- a/Tests/LibWeb/Text/expected/wpt-import/css/css-sizing/parsing/min-width-computed.txt
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-sizing/parsing/min-width-computed.txt
@ -2,15 +2,15 @@ Harness status: OK

 Found 11 tests

-8 Pass
-3 Fail
+9 Pass
+2 Fail
 Pass	Property min-width value 'min-content'
 Pass	Property min-width value 'max-content'
 Pass	Property min-width value '10px'
 Pass	Property min-width value '20%'
 Pass	Property min-width value 'calc(10% + 40px)'
 Fail	Property min-width value 'calc(10px - 0.5em)'
-Fail	Property min-width value 'calc(10px + 0.5em)'
+Pass	Property min-width value 'calc(10px + 0.5em)'
 Pass	Property min-width value 'fit-content(10px)'
 Pass	Property min-width value 'fit-content(20%)'
 Pass	Property min-width value 'fit-content(calc(10% + 40px))'
--- a/Tests/LibWeb/Text/expected/wpt-import/css/css-values/getComputedStyle-calc-mixed-units-003.txt
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-values/getComputedStyle-calc-mixed-units-003.txt
@ -2,12 +2,11 @@ Harness status: OK

 Found 7 tests

-5 Pass
-2 Fail
-Fail	testing width: calc(5px * 10lh / 1px)
+7 Pass
+Pass	testing width: calc(5px * 10lh / 1px)
 Pass	testing width: calc(20% * 0.5em / 1px)
 Pass	testing width: calc(4px * 4em / 1px)
-Fail	testing width: calc(400px / 4lh * 1px)
+Pass	testing width: calc(400px / 4lh * 1px)
 Pass	testing width: calc(20% / 0.5em * 1px)
 Pass	testing width: calc(52px * 1px / 10%)
 Pass	testing width: calc(100px * 1px / 1px / 1)
--- a/Tests/LibWeb/Text/expected/wpt-import/css/css-values/signs-abs-computed.txt
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-values/signs-abs-computed.txt
@ -2,8 +2,8 @@ Harness status: OK

 Found 233 tests

-206 Pass
-27 Fail
+209 Pass
+24 Fail
 Pass	abs(1) should be used-value-equivalent to 1
 Pass	sign(1) should be used-value-equivalent to 1
 Pass	abs(-1) should be used-value-equivalent to 1
@ -208,14 +208,14 @@ Pass	abs(-1grad) should be used-value-equivalent to 1grad
 Pass	abs(-1rad) should be used-value-equivalent to 1rad
 Pass	abs(-1turn) should be used-value-equivalent to 1turn
 Pass	sign(10px - 1em) should be used-value-equivalent to 0; fontSize=10px
-Fail	sign(10px - 2em) should be used-value-equivalent to -1; fontSize=10px
+Pass	sign(10px - 2em) should be used-value-equivalent to -1; fontSize=10px
 Pass	calc(sign(10%) * 100px) should be used-value-equivalent to 100px
 Fail	calc(2.5 - sign(41px - 2em) / 2) should be used-value-equivalent to 2
 Fail	calc(2.5 - sign(40px - 2em) / 2) should be used-value-equivalent to 2.5
 Fail	calc(2.5 - sign(39px - 2em) / 2) should be used-value-equivalent to 3
-Fail	calc(3 + sign(42px - 2em)) should be used-value-equivalent to 4
+Pass	calc(3 + sign(42px - 2em)) should be used-value-equivalent to 4
 Pass	calc(3 + sign(40px - 2em)) should be used-value-equivalent to 3
-Fail	calc(3 + sign(38px - 2em)) should be used-value-equivalent to 2
+Pass	calc(3 + sign(38px - 2em)) should be used-value-equivalent to 2
 Pass	calc(50px + 100px * sign(42px - 2em)) should be used-value-equivalent to 150px
 Pass	calc(50px + 100px * sign(40px - 2em)) should be used-value-equivalent to 50px
 Pass	calc(50px + 100px * sign(38px - 2em)) should be used-value-equivalent to -50px
--- 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,13 +2,13 @@ Harness status: OK

 Found 8 tests

-6 Pass
-2 Fail
+7 Pass
+1 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))'
+Pass	Property flood-opacity value 'calc(0.5 * sign(10em - 1px))'
 Fail	Property flood-opacity value 'calc(50% * sign(10em - 1px))'