From 385c3d273a27bd8afb209f36151c877af7478177 Mon Sep 17 00:00:00 2001
From: Sam Atkins <sam@ladybird.org>
Date: Wed, 22 Jan 2025 15:00:13 +0000
Subject: [PATCH] LibWeb/CSS: Update CalculatedOr API to use
 CalculationResolutionContext

To be properly compatible with calc(), the resolved() methods all need:
- A length resolution context
- To return an Optional, as the calculation might not be resolvable

A bonus of this is that we can get rid of the overloads of `resolved()`
as they now all behave the same way.

A downside is a scattering of `value_or()` wherever these are used. It
might be the case that all unresolvable calculations have been rejected
before this point, but I'm not confident, and so I'll leave it like
this for now.
---
 Libraries/LibWeb/CSS/CalculatedOr.cpp         | 59 ++++++-------------
 Libraries/LibWeb/CSS/CalculatedOr.h           | 34 +++++------
 Libraries/LibWeb/CSS/MediaQuery.cpp           | 36 ++++++-----
 .../StyleValues/FilterValueListStyleValue.cpp |  4 +-
 Libraries/LibWeb/CSS/Transformation.cpp       | 10 +++-
 .../LibWeb/HTML/CanvasRenderingContext2D.cpp  | 10 +++-
 Libraries/LibWeb/HTML/SourceSet.cpp           |  4 +-
 .../LibWeb/Layout/InlineLevelIterator.cpp     | 18 +++---
 Libraries/LibWeb/Layout/Node.cpp              | 13 ++--
 .../LibWeb/Painting/SVGPathPaintable.cpp      |  5 +-
 Libraries/LibWeb/SVG/SVGGraphicsElement.cpp   |  5 +-
 11 files changed, 98 insertions(+), 100 deletions(-)

diff --git a/Libraries/LibWeb/CSS/CalculatedOr.cpp b/Libraries/LibWeb/CSS/CalculatedOr.cpp
index 4ffeb0a439f..470d5996df7 100644
--- a/Libraries/LibWeb/CSS/CalculatedOr.cpp
+++ b/Libraries/LibWeb/CSS/CalculatedOr.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2023, Sam Atkins <atkinssj@serenityos.org>
+ * Copyright (c) 2023-2025, Sam Atkins <sam@ladybird.org>
  *
  * SPDX-License-Identifier: BSD-2-Clause
  */
@@ -17,9 +17,9 @@
 
 namespace Web::CSS {
 
-Angle AngleOrCalculated::resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const& calculated, Layout::Node const& layout_node) const
+Optional<Angle> AngleOrCalculated::resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const& calculated, CalculationResolutionContext const& context) const
 {
-    return calculated->resolve_angle({ .length_resolution_context = Length::ResolutionContext::for_layout_node(layout_node) }).value();
+    return calculated->resolve_angle(context);
 }
 
 NonnullRefPtr<CSSStyleValue> AngleOrCalculated::create_style_value() const
@@ -27,9 +27,9 @@ NonnullRefPtr<CSSStyleValue> AngleOrCalculated::create_style_value() const
     return AngleStyleValue::create(value());
 }
 
-Flex FlexOrCalculated::resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const& calculated, Layout::Node const& layout_node) const
+Optional<Flex> FlexOrCalculated::resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const& calculated, CalculationResolutionContext const& context) const
 {
-    return calculated->resolve_flex({ .length_resolution_context = Length::ResolutionContext::for_layout_node(layout_node) }).value();
+    return calculated->resolve_flex(context);
 }
 
 NonnullRefPtr<CSSStyleValue> FlexOrCalculated::create_style_value() const
@@ -37,9 +37,9 @@ NonnullRefPtr<CSSStyleValue> FlexOrCalculated::create_style_value() const
     return FlexStyleValue::create(value());
 }
 
-Frequency FrequencyOrCalculated::resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const& calculated, Layout::Node const& layout_node) const
+Optional<Frequency> FrequencyOrCalculated::resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const& calculated, CalculationResolutionContext const& context) const
 {
-    return calculated->resolve_frequency({ .length_resolution_context = Length::ResolutionContext::for_layout_node(layout_node) }).value();
+    return calculated->resolve_frequency(context);
 }
 
 NonnullRefPtr<CSSStyleValue> FrequencyOrCalculated::create_style_value() const
@@ -47,16 +47,9 @@ NonnullRefPtr<CSSStyleValue> FrequencyOrCalculated::create_style_value() const
     return FrequencyStyleValue::create(value());
 }
 
-i64 IntegerOrCalculated::resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const& calculated, Layout::Node const& layout_node) const
+Optional<i64> IntegerOrCalculated::resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const& calculated, CalculationResolutionContext const& context) const
 {
-    return calculated->resolve_integer({ .length_resolution_context = Length::ResolutionContext::for_layout_node(layout_node) }).value();
-}
-
-i64 IntegerOrCalculated::resolved(Length::ResolutionContext const& context) const
-{
-    if (is_calculated())
-        return calculated()->resolve_integer({ .length_resolution_context = context }).value();
-    return value();
+    return calculated->resolve_integer(context);
 }
 
 NonnullRefPtr<CSSStyleValue> IntegerOrCalculated::create_style_value() const
@@ -64,16 +57,9 @@ NonnullRefPtr<CSSStyleValue> IntegerOrCalculated::create_style_value() const
     return IntegerStyleValue::create(value());
 }
 
-Length LengthOrCalculated::resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const& calculated, Layout::Node const& layout_node) const
+Optional<Length> LengthOrCalculated::resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const& calculated, CalculationResolutionContext const& context) const
 {
-    return calculated->resolve_length({ .length_resolution_context = Length::ResolutionContext::for_layout_node(layout_node) }).value();
-}
-
-Length LengthOrCalculated::resolved(Length::ResolutionContext const& context) const
-{
-    if (is_calculated())
-        return calculated()->resolve_length({ .length_resolution_context = context }).value();
-    return value();
+    return calculated->resolve_length(context);
 }
 
 NonnullRefPtr<CSSStyleValue> LengthOrCalculated::create_style_value() const
@@ -81,9 +67,9 @@ NonnullRefPtr<CSSStyleValue> LengthOrCalculated::create_style_value() const
     return LengthStyleValue::create(value());
 }
 
-double NumberOrCalculated::resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const& calculated, Layout::Node const& layout_node) const
+Optional<double> NumberOrCalculated::resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const& calculated, CalculationResolutionContext const& context) const
 {
-    return calculated->resolve_number({ .length_resolution_context = Length::ResolutionContext::for_layout_node(layout_node) }).value();
+    return calculated->resolve_number(context);
 }
 
 NonnullRefPtr<CSSStyleValue> NumberOrCalculated::create_style_value() const
@@ -91,9 +77,9 @@ NonnullRefPtr<CSSStyleValue> NumberOrCalculated::create_style_value() const
     return NumberStyleValue::create(value());
 }
 
-Percentage PercentageOrCalculated::resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const& calculated, Layout::Node const& layout_node) const
+Optional<Percentage> PercentageOrCalculated::resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const& calculated, CalculationResolutionContext const& context) const
 {
-    return calculated->resolve_percentage({ .length_resolution_context = Length::ResolutionContext::for_layout_node(layout_node) }).value();
+    return calculated->resolve_percentage(context);
 }
 
 NonnullRefPtr<CSSStyleValue> PercentageOrCalculated::create_style_value() const
@@ -101,16 +87,9 @@ NonnullRefPtr<CSSStyleValue> PercentageOrCalculated::create_style_value() const
     return PercentageStyleValue::create(value());
 }
 
-Resolution ResolutionOrCalculated::resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const& calculated, Layout::Node const& layout_node) const
+Optional<Resolution> ResolutionOrCalculated::resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const& calculated, CalculationResolutionContext const& context) const
 {
-    return calculated->resolve_resolution({ .length_resolution_context = Length::ResolutionContext::for_layout_node(layout_node) }).value();
-}
-
-Resolution ResolutionOrCalculated::resolved() const
-{
-    if (is_calculated())
-        return calculated()->resolve_resolution({}).value();
-    return value();
+    return calculated->resolve_resolution(context);
 }
 
 NonnullRefPtr<CSSStyleValue> ResolutionOrCalculated::create_style_value() const
@@ -118,9 +97,9 @@ NonnullRefPtr<CSSStyleValue> ResolutionOrCalculated::create_style_value() const
     return ResolutionStyleValue::create(value());
 }
 
-Time TimeOrCalculated::resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const& calculated, Layout::Node const& layout_node) const
+Optional<Time> TimeOrCalculated::resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const& calculated, CalculationResolutionContext const& context) const
 {
-    return calculated->resolve_time({ .length_resolution_context = Length::ResolutionContext::for_layout_node(layout_node) }).value();
+    return calculated->resolve_time(context);
 }
 
 NonnullRefPtr<CSSStyleValue> TimeOrCalculated::create_style_value() const
diff --git a/Libraries/LibWeb/CSS/CalculatedOr.h b/Libraries/LibWeb/CSS/CalculatedOr.h
index a1730069f93..dda9590d496 100644
--- a/Libraries/LibWeb/CSS/CalculatedOr.h
+++ b/Libraries/LibWeb/CSS/CalculatedOr.h
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2023, Sam Atkins <atkinssj@serenityos.org>
+ * Copyright (c) 2023-2025, Sam Atkins <sam@ladybird.org>
  *
  * SPDX-License-Identifier: BSD-2-Clause
  */
@@ -54,14 +54,14 @@ public:
         return m_value.template get<NonnullRefPtr<CalculatedStyleValue>>();
     }
 
-    T resolved(Layout::Node const& layout_node) const
+    Optional<T> resolved(CalculationResolutionContext const& context) const
     {
         return m_value.visit(
-            [&](T const& t) {
+            [&](T const& t) -> Optional<T> {
                 return t;
             },
             [&](NonnullRefPtr<CalculatedStyleValue> const& calculated) {
-                return resolve_calculated(calculated, layout_node);
+                return resolve_calculated(calculated, context);
             });
     }
 
@@ -81,7 +81,7 @@ public:
     }
 
 protected:
-    virtual T resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, Layout::Node const&) const = 0;
+    virtual Optional<T> resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, CalculationResolutionContext const&) const = 0;
     virtual NonnullRefPtr<CSSStyleValue> create_style_value() const = 0;
 
 private:
@@ -93,7 +93,7 @@ public:
     using CalculatedOr<Angle>::CalculatedOr;
 
 private:
-    virtual Angle resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, Layout::Node const&) const override;
+    virtual Optional<Angle> resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, CalculationResolutionContext const&) const override;
     virtual NonnullRefPtr<CSSStyleValue> create_style_value() const override;
 };
 
@@ -102,7 +102,7 @@ public:
     using CalculatedOr<Flex>::CalculatedOr;
 
 private:
-    virtual Flex resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, Layout::Node const&) const override;
+    virtual Optional<Flex> resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, CalculationResolutionContext const&) const override;
     virtual NonnullRefPtr<CSSStyleValue> create_style_value() const override;
 };
 
@@ -111,7 +111,7 @@ public:
     using CalculatedOr<Frequency>::CalculatedOr;
 
 private:
-    virtual Frequency resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, Layout::Node const&) const override;
+    virtual Optional<Frequency> resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, CalculationResolutionContext const&) const override;
     virtual NonnullRefPtr<CSSStyleValue> create_style_value() const override;
 };
 
@@ -119,10 +119,8 @@ class IntegerOrCalculated : public CalculatedOr<i64> {
 public:
     using CalculatedOr<i64>::CalculatedOr;
 
-    [[nodiscard]] i64 resolved(Length::ResolutionContext const&) const;
-
 private:
-    virtual i64 resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, Layout::Node const&) const override;
+    virtual Optional<i64> resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, CalculationResolutionContext const&) const override;
     virtual NonnullRefPtr<CSSStyleValue> create_style_value() const override;
 };
 
@@ -130,10 +128,8 @@ class LengthOrCalculated : public CalculatedOr<Length> {
 public:
     using CalculatedOr<Length>::CalculatedOr;
 
-    [[nodiscard]] Length resolved(Length::ResolutionContext const&) const;
-
 private:
-    virtual Length resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, Layout::Node const&) const override;
+    virtual Optional<Length> resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, CalculationResolutionContext const&) const override;
     virtual NonnullRefPtr<CSSStyleValue> create_style_value() const override;
 };
 
@@ -142,7 +138,7 @@ public:
     using CalculatedOr<double>::CalculatedOr;
 
 private:
-    virtual double resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, Layout::Node const&) const override;
+    virtual Optional<double> resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, CalculationResolutionContext const&) const override;
     virtual NonnullRefPtr<CSSStyleValue> create_style_value() const override;
 };
 
@@ -151,7 +147,7 @@ public:
     using CalculatedOr<Percentage>::CalculatedOr;
 
 private:
-    virtual Percentage resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, Layout::Node const&) const override;
+    virtual Optional<Percentage> resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, CalculationResolutionContext const&) const override;
     virtual NonnullRefPtr<CSSStyleValue> create_style_value() const override;
 };
 
@@ -159,10 +155,8 @@ class ResolutionOrCalculated : public CalculatedOr<Resolution> {
 public:
     using CalculatedOr<Resolution>::CalculatedOr;
 
-    [[nodiscard]] Resolution resolved() const;
-
 private:
-    virtual Resolution resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, Layout::Node const&) const override;
+    virtual Optional<Resolution> resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, CalculationResolutionContext const&) const override;
     virtual NonnullRefPtr<CSSStyleValue> create_style_value() const override;
 };
 
@@ -171,7 +165,7 @@ public:
     using CalculatedOr<Time>::CalculatedOr;
 
 private:
-    virtual Time resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, Layout::Node const&) const override;
+    virtual Optional<Time> resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, CalculationResolutionContext const&) const override;
     virtual NonnullRefPtr<CSSStyleValue> create_style_value() const override;
 };
 
diff --git a/Libraries/LibWeb/CSS/MediaQuery.cpp b/Libraries/LibWeb/CSS/MediaQuery.cpp
index 0a057865426..bd0b957cd9a 100644
--- a/Libraries/LibWeb/CSS/MediaQuery.cpp
+++ b/Libraries/LibWeb/CSS/MediaQuery.cpp
@@ -90,20 +90,22 @@ bool MediaFeature::evaluate(HTML::Window const& window) const
         return false;
     auto queried_value = maybe_queried_value.release_value();
 
-    auto resolution_context = Length::ResolutionContext::for_window(window);
+    CalculationResolutionContext calculation_context {
+        .length_resolution_context = Length::ResolutionContext::for_window(window),
+    };
     switch (m_type) {
     case Type::IsTrue:
         if (queried_value.is_integer())
-            return queried_value.integer().resolved(resolution_context) != 0;
+            return queried_value.integer().resolved(calculation_context) != 0;
         if (queried_value.is_length()) {
-            auto length = queried_value.length().resolved(resolution_context);
-            return length.raw_value() != 0;
+            auto length = queried_value.length().resolved(calculation_context);
+            return length->raw_value() != 0;
         }
         // FIXME: I couldn't figure out from the spec how ratios should be evaluated in a boolean context.
         if (queried_value.is_ratio())
             return !queried_value.ratio().is_degenerate();
         if (queried_value.is_resolution())
-            return queried_value.resolution().resolved().to_dots_per_pixel() != 0;
+            return queried_value.resolution().resolved(calculation_context).map([](auto& it) { return it.to_dots_per_pixel(); }).value_or(0) != 0;
         if (queried_value.is_ident()) {
             // NOTE: It is not technically correct to always treat `no-preference` as false, but every
             //       media-feature that accepts it as a value treats it as false, so good enough. :^)
@@ -148,19 +150,22 @@ bool MediaFeature::compare(HTML::Window const& window, MediaFeatureValue left, C
         return false;
     }
 
+    CalculationResolutionContext calculation_context {
+        .length_resolution_context = Length::ResolutionContext::for_window(window),
+    };
+
     if (left.is_integer()) {
-        auto resolution_context = Length::ResolutionContext::for_window(window);
         switch (comparison) {
         case Comparison::Equal:
-            return left.integer().resolved(resolution_context) == right.integer().resolved(resolution_context);
+            return left.integer().resolved(calculation_context).value_or(0) == right.integer().resolved(calculation_context).value_or(0);
         case Comparison::LessThan:
-            return left.integer().resolved(resolution_context) < right.integer().resolved(resolution_context);
+            return left.integer().resolved(calculation_context).value_or(0) < right.integer().resolved(calculation_context).value_or(0);
         case Comparison::LessThanOrEqual:
-            return left.integer().resolved(resolution_context) <= right.integer().resolved(resolution_context);
+            return left.integer().resolved(calculation_context).value_or(0) <= right.integer().resolved(calculation_context).value_or(0);
         case Comparison::GreaterThan:
-            return left.integer().resolved(resolution_context) > right.integer().resolved(resolution_context);
+            return left.integer().resolved(calculation_context).value_or(0) > right.integer().resolved(calculation_context).value_or(0);
         case Comparison::GreaterThanOrEqual:
-            return left.integer().resolved(resolution_context) >= right.integer().resolved(resolution_context);
+            return left.integer().resolved(calculation_context).value_or(0) >= right.integer().resolved(calculation_context).value_or(0);
         }
         VERIFY_NOT_REACHED();
     }
@@ -168,9 +173,8 @@ bool MediaFeature::compare(HTML::Window const& window, MediaFeatureValue left, C
     if (left.is_length()) {
         CSSPixels left_px;
         CSSPixels right_px;
-        auto resolution_context = Length::ResolutionContext::for_window(window);
-        auto left_length = left.length().resolved(resolution_context);
-        auto right_length = right.length().resolved(resolution_context);
+        auto left_length = left.length().resolved(calculation_context).value_or(Length::make_px(0));
+        auto right_length = right.length().resolved(calculation_context).value_or(Length::make_px(0));
         // Save ourselves some work if neither side is a relative length.
         if (left_length.is_absolute() && right_length.is_absolute()) {
             left_px = left_length.absolute_length_to_px();
@@ -222,8 +226,8 @@ bool MediaFeature::compare(HTML::Window const& window, MediaFeatureValue left, C
     }
 
     if (left.is_resolution()) {
-        auto left_dppx = left.resolution().resolved().to_dots_per_pixel();
-        auto right_dppx = right.resolution().resolved().to_dots_per_pixel();
+        auto left_dppx = left.resolution().resolved(calculation_context).map([](auto& it) { return it.to_dots_per_pixel(); }).value_or(0);
+        auto right_dppx = right.resolution().resolved(calculation_context).map([](auto& it) { return it.to_dots_per_pixel(); }).value_or(0);
 
         switch (comparison) {
         case Comparison::Equal:
diff --git a/Libraries/LibWeb/CSS/StyleValues/FilterValueListStyleValue.cpp b/Libraries/LibWeb/CSS/StyleValues/FilterValueListStyleValue.cpp
index 7e05201bef2..32fd2621d58 100644
--- a/Libraries/LibWeb/CSS/StyleValues/FilterValueListStyleValue.cpp
+++ b/Libraries/LibWeb/CSS/StyleValues/FilterValueListStyleValue.cpp
@@ -16,7 +16,7 @@ namespace Web::CSS {
 float FilterOperation::Blur::resolved_radius(Layout::Node const& node) const
 {
     if (radius.has_value())
-        return radius->resolved(Length::ResolutionContext::for_layout_node(node)).to_px(node).to_float();
+        return radius->resolved({ .length_resolution_context = Length::ResolutionContext::for_layout_node(node) })->to_px(node).to_float();
 
     // Default value when omitted is 0px.
     return 0;
@@ -27,7 +27,7 @@ float FilterOperation::HueRotate::angle_degrees(Layout::Node const& node) const
     // Default value when omitted is 0deg.
     if (!angle.has_value())
         return 0.0f;
-    return angle->visit([&](AngleOrCalculated const& a) { return a.resolved(node).to_degrees(); }, [&](Zero) { return 0.0; });
+    return angle->visit([&](AngleOrCalculated const& a) { return a.resolved({ .length_resolution_context = Length::ResolutionContext::for_layout_node(node) })->to_degrees(); }, [&](Zero) { return 0.0; });
 }
 
 float FilterOperation::Color::resolved_amount() const
diff --git a/Libraries/LibWeb/CSS/Transformation.cpp b/Libraries/LibWeb/CSS/Transformation.cpp
index 30e16663d29..da5cd2126f0 100644
--- a/Libraries/LibWeb/CSS/Transformation.cpp
+++ b/Libraries/LibWeb/CSS/Transformation.cpp
@@ -20,8 +20,14 @@ ErrorOr<Gfx::FloatMatrix4x4> Transformation::to_matrix(Optional<Painting::Painta
 {
     auto count = m_values.size();
     auto value = [&](size_t index, CSSPixels const& reference_length = 0) -> ErrorOr<float> {
+        CalculationResolutionContext context {};
+        if (paintable_box.has_value())
+            context.length_resolution_context = Length::ResolutionContext::for_layout_node(paintable_box->layout_node());
+
         return m_values[index].visit(
             [&](CSS::LengthPercentage const& value) -> ErrorOr<float> {
+                context.percentage_basis = Length::make_px(reference_length);
+
                 if (paintable_box.has_value())
                     return value.resolved(paintable_box->layout_node(), reference_length).to_px(paintable_box->layout_node()).to_float();
                 if (value.is_length()) {
@@ -31,8 +37,8 @@ ErrorOr<Gfx::FloatMatrix4x4> Transformation::to_matrix(Optional<Painting::Painta
                 return Error::from_string_literal("Transform contains non absolute units");
             },
             [&](CSS::AngleOrCalculated const& value) -> ErrorOr<float> {
-                if (paintable_box.has_value())
-                    return value.resolved(paintable_box->layout_node()).to_radians();
+                if (auto resolved = value.resolved(context); resolved.has_value())
+                    return resolved->to_radians();
                 if (!value.is_calculated())
                     return value.value().to_radians();
                 return Error::from_string_literal("Transform contains non absolute units");
diff --git a/Libraries/LibWeb/HTML/CanvasRenderingContext2D.cpp b/Libraries/LibWeb/HTML/CanvasRenderingContext2D.cpp
index 488d236d20c..9e52b423e81 100644
--- a/Libraries/LibWeb/HTML/CanvasRenderingContext2D.cpp
+++ b/Libraries/LibWeb/HTML/CanvasRenderingContext2D.cpp
@@ -909,13 +909,17 @@ void CanvasRenderingContext2D::set_filter(String filter)
                 },
                 [&](CSS::FilterOperation::DropShadow const& drop_shadow) {
                     auto resolution_context = CSS::Length::ResolutionContext::for_layout_node(*layout_node);
+                    CSS::CalculationResolutionContext calculation_context {
+                        .length_resolution_context = resolution_context,
+                    };
+                    auto zero_px = CSS::Length::make_px(0);
 
-                    float offset_x = static_cast<float>(drop_shadow.offset_x.resolved(resolution_context).to_px(resolution_context));
-                    float offset_y = static_cast<float>(drop_shadow.offset_y.resolved(resolution_context).to_px(resolution_context));
+                    float offset_x = static_cast<float>(drop_shadow.offset_x.resolved(calculation_context).value_or(zero_px).to_px(resolution_context));
+                    float offset_y = static_cast<float>(drop_shadow.offset_y.resolved(calculation_context).value_or(zero_px).to_px(resolution_context));
 
                     float radius = 0.0f;
                     if (drop_shadow.radius.has_value()) {
-                        radius = static_cast<float>(drop_shadow.radius->resolved(resolution_context).to_px(resolution_context));
+                        radius = static_cast<float>(drop_shadow.radius->resolved(calculation_context).value_or(zero_px).to_px(resolution_context));
                     };
 
                     auto color = drop_shadow.color.value_or(Gfx::Color { 0, 0, 0, 255 });
diff --git a/Libraries/LibWeb/HTML/SourceSet.cpp b/Libraries/LibWeb/HTML/SourceSet.cpp
index 129fb82071f..9c1ce6a2c55 100644
--- a/Libraries/LibWeb/HTML/SourceSet.cpp
+++ b/Libraries/LibWeb/HTML/SourceSet.cpp
@@ -404,8 +404,8 @@ void SourceSet::normalize_source_densities(DOM::Element const& element)
         // FIXME: We should have a way to build a LengthResolutionContext for any DOM node without going through the layout tree.
         const_cast<DOM::Document&>(element.document()).update_layout();
         if (element.layout_node()) {
-            auto context = CSS::Length::ResolutionContext::for_layout_node(*element.layout_node());
-            return m_source_size.resolved(context);
+            CSS::CalculationResolutionContext context { .length_resolution_context = CSS::Length::ResolutionContext::for_layout_node(*element.layout_node()) };
+            return m_source_size.resolved(context).value_or(CSS::Length::make_auto());
         }
         // FIXME: This is wrong, but we don't have a better way to resolve lengths without a layout node yet.
         return CSS::Length::make_auto();
diff --git a/Libraries/LibWeb/Layout/InlineLevelIterator.cpp b/Libraries/LibWeb/Layout/InlineLevelIterator.cpp
index 25a83484f8b..63078325a75 100644
--- a/Libraries/LibWeb/Layout/InlineLevelIterator.cpp
+++ b/Libraries/LibWeb/Layout/InlineLevelIterator.cpp
@@ -437,12 +437,12 @@ Gfx::ShapeFeatures InlineLevelIterator::create_and_merge_font_features() const
     // FIXME 4. Feature settings determined by properties other than ‘font-variant’ or ‘font-feature-settings’. For example, setting a non-default value for the ‘letter-spacing’ property disables common ligatures.
 
     // 5. Font features implied by the value of ‘font-feature-settings’ property.
-    auto resolution_context = CSS::Length::ResolutionContext::for_layout_node(*m_current_node.ptr());
+    CSS::CalculationResolutionContext calculation_context { .length_resolution_context = CSS::Length::ResolutionContext::for_layout_node(*m_current_node.ptr()) };
     auto font_feature_settings = computed_values.font_feature_settings();
     if (font_feature_settings.has_value()) {
         auto const& feature_settings = font_feature_settings.value();
         for (auto const& [key, feature_value] : feature_settings) {
-            merged_features.set(key, feature_value.resolved(resolution_context));
+            merged_features.set(key, feature_value.resolved(calculation_context).value_or(0));
         }
     }
 
@@ -497,9 +497,9 @@ Optional<InlineLevelIterator::Item> InlineLevelIterator::next_without_lookahead(
             };
         }
 
-        auto resolution_context = CSS::Length::ResolutionContext::for_layout_node(text_node);
-        auto letter_spacing = text_node.computed_values().letter_spacing().resolved(resolution_context).to_px(text_node);
-        auto word_spacing = text_node.computed_values().word_spacing().resolved(resolution_context).to_px(text_node);
+        CSS::CalculationResolutionContext calculation_context { .length_resolution_context = CSS::Length::ResolutionContext::for_layout_node(text_node) };
+        auto letter_spacing = text_node.computed_values().letter_spacing().resolved(calculation_context).map([&](auto& it) { return it.to_px(text_node); }).value_or(0);
+        auto word_spacing = text_node.computed_values().word_spacing().resolved(calculation_context).map([&](auto& it) { return it.to_px(text_node); }).value_or(0);
 
         auto x = 0.0f;
         if (chunk.has_breaking_tab) {
@@ -513,15 +513,15 @@ Optional<InlineLevelIterator::Item> InlineLevelIterator::next_without_lookahead(
 
             // https://drafts.csswg.org/css-text/#tab-size-property
             auto tab_size = text_node.computed_values().tab_size();
-            auto resolution_context = CSS::Length::ResolutionContext::for_layout_node(text_node);
             CSSPixels tab_width;
             tab_width = tab_size.visit(
                 [&](CSS::LengthOrCalculated const& t) -> CSSPixels {
-                    auto value = t.resolved(resolution_context);
-                    return value.to_px(text_node);
+                    return t.resolved(calculation_context)
+                        .map([&](auto& it) { return it.to_px(text_node); })
+                        .value_or(0);
                 },
                 [&](CSS::NumberOrCalculated const& n) -> CSSPixels {
-                    auto tab_number = n.resolved(text_node);
+                    auto tab_number = n.resolved(calculation_context).value_or(0);
 
                     return CSSPixels::nearest_value_for(tab_number * (chunk.font->glyph_width(' ') + word_spacing.to_float() + letter_spacing.to_float()));
                 });
diff --git a/Libraries/LibWeb/Layout/Node.cpp b/Libraries/LibWeb/Layout/Node.cpp
index 4aa0cc84fe1..c01349f930c 100644
--- a/Libraries/LibWeb/Layout/Node.cpp
+++ b/Libraries/LibWeb/Layout/Node.cpp
@@ -581,13 +581,18 @@ void NodeWithStyle::apply_style(CSS::ComputedProperties const& computed_style)
                         .radius = blur.resolved_radius(*this) });
                 },
                 [&](CSS::FilterOperation::DropShadow const& drop_shadow) {
-                    auto context = CSS::Length::ResolutionContext::for_layout_node(*this);
+                    CSS::CalculationResolutionContext context {
+                        .length_resolution_context = CSS::Length::ResolutionContext::for_layout_node(*this),
+                    };
+                    auto to_px = [&](CSS::LengthOrCalculated const& length) {
+                        return static_cast<float>(length.resolved(context).map([&](auto& it) { return it.to_px(*this).to_double(); }).value_or(0.0));
+                    };
                     // The default value for omitted values is missing length values set to 0
                     // and the missing used color is taken from the color property.
                     resolved_filter.append(Gfx::DropShadowFilter {
-                        .offset_x = static_cast<float>(drop_shadow.offset_x.resolved(context).to_px(*this).to_double()),
-                        .offset_y = static_cast<float>(drop_shadow.offset_y.resolved(context).to_px(*this).to_double()),
-                        .radius = static_cast<float>(drop_shadow.radius.has_value() ? drop_shadow.radius->resolved(context).to_px(*this).to_double() : 0.0),
+                        .offset_x = to_px(drop_shadow.offset_x),
+                        .offset_y = to_px(drop_shadow.offset_y),
+                        .radius = drop_shadow.radius.has_value() ? to_px(*drop_shadow.radius) : 0.0f,
                         .color = drop_shadow.color.has_value() ? *drop_shadow.color : this->computed_values().color() });
                 },
                 [&](CSS::FilterOperation::Color const& color_operation) {
diff --git a/Libraries/LibWeb/Painting/SVGPathPaintable.cpp b/Libraries/LibWeb/Painting/SVGPathPaintable.cpp
index 752be6eeb2a..2e1c5f2d643 100644
--- a/Libraries/LibWeb/Painting/SVGPathPaintable.cpp
+++ b/Libraries/LibWeb/Painting/SVGPathPaintable.cpp
@@ -154,7 +154,10 @@ void SVGPathPaintable::paint(PaintContext& context, PaintPhase phase) const
         break;
     }
 
-    auto miter_limit = graphics_element.stroke_miterlimit().value_or(CSS::InitialValues::stroke_miterlimit()).resolved(layout_node());
+    CSS::CalculationResolutionContext calculation_context {
+        .length_resolution_context = CSS::Length::ResolutionContext::for_layout_node(layout_node()),
+    };
+    auto miter_limit = graphics_element.stroke_miterlimit().value_or(CSS::InitialValues::stroke_miterlimit()).resolved(calculation_context).value_or(0);
 
     auto stroke_opacity = graphics_element.stroke_opacity().value_or(1);
 
diff --git a/Libraries/LibWeb/SVG/SVGGraphicsElement.cpp b/Libraries/LibWeb/SVG/SVGGraphicsElement.cpp
index 4e031e13ecd..367e23cdcdb 100644
--- a/Libraries/LibWeb/SVG/SVGGraphicsElement.cpp
+++ b/Libraries/LibWeb/SVG/SVGGraphicsElement.cpp
@@ -306,7 +306,10 @@ Vector<float> SVGGraphicsElement::stroke_dasharray() const
                 dasharray.append(resolve_relative_to_viewport_size(length_percentage));
             },
             [&](CSS::NumberOrCalculated const& number_or_calculated) {
-                dasharray.append(number_or_calculated.resolved(*layout_node()));
+                CSS::CalculationResolutionContext calculation_context {
+                    .length_resolution_context = CSS::Length::ResolutionContext::for_layout_node(*layout_node()),
+                };
+                dasharray.append(number_or_calculated.resolved(calculation_context).value_or(0));
             });
     }