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 ✅

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())

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;

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
+10 Pass
-3 Fail
+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)'

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
+7 Pass
-2 Fail
+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)'

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
+12 Pass
-4 Fail
 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)'

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
+8 Pass
-2 Fail
 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'

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
+10 Pass
-3 Fail
+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))'

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
+10 Pass
-3 Fail
+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))'

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
+9 Pass
-3 Fail
+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))'

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
+9 Pass
-3 Fail
+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))'

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
+7 Pass
-2 Fail
+Pass	testing width: calc(5px * 10lh / 1px)
-Fail	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)

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
+209 Pass
-27 Fail
+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

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
+7 Pass
-2 Fail
+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))'