From 0fb571c1c2612940d7a23260807a5cbd39d022bc Mon Sep 17 00:00:00 2001
From: Aliaksandr Kalenik <kalenik.aliaksandr@gmail.com>
Date: Tue, 29 Aug 2023 18:57:09 +0200
Subject: [PATCH] LibWeb: Add `Length::resolved()` overload for CSSPixels

Since we always pass the px value as an argument to resolved(), we can
pass it directly as CSSPixels instead of wrapping it in Length. This
approach allows us to avoid converting to a double, resulting in fewer
precision issues.
---
 Tests/LibWeb/Layout/expected/acid1.txt        | 42 +++++++++----------
 .../small-percentage-margin.txt               | 35 ++++++++++++++++
 .../small-percentage-margin.html              | 10 +++++
 .../Libraries/LibWeb/CSS/PercentageOr.cpp     |  5 +++
 Userland/Libraries/LibWeb/CSS/PercentageOr.h  | 29 ++++++++++++-
 Userland/Libraries/LibWeb/CSS/Size.cpp        |  5 +++
 Userland/Libraries/LibWeb/CSS/Size.h          |  1 +
 .../CSS/StyleValues/CalculatedStyleValue.cpp  | 16 +++++++
 .../CSS/StyleValues/CalculatedStyleValue.h    |  1 +
 .../StyleValues/RadialGradientStyleValue.cpp  |  4 +-
 .../LibWeb/Layout/BlockFormattingContext.cpp  | 35 +++++++---------
 .../LibWeb/Layout/FormattingContext.cpp       | 40 +++++++-----------
 .../Libraries/LibWeb/Layout/LayoutState.cpp   |  4 +-
 .../LibWeb/Layout/TableFormattingContext.cpp  |  2 -
 14 files changed, 154 insertions(+), 75 deletions(-)
 create mode 100644 Tests/LibWeb/Layout/expected/block-and-inline/small-percentage-margin.txt
 create mode 100644 Tests/LibWeb/Layout/input/block-and-inline/small-percentage-margin.html

diff --git a/Tests/LibWeb/Layout/expected/acid1.txt b/Tests/LibWeb/Layout/expected/acid1.txt
index d76ed21f4a..e1d8ccbe9e 100644
--- a/Tests/LibWeb/Layout/expected/acid1.txt
+++ b/Tests/LibWeb/Layout/expected/acid1.txt
@@ -7,7 +7,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
         TextNode <#text>
       BlockContainer <dl> at (25,25) content-size 470x0 children: inline
         TextNode <#text>
-        BlockContainer <dt> at (40,40) content-size 50x280 floating [BFC] children: inline
+        BlockContainer <dt> at (40,40) content-size 49.984375x280 floating [BFC] children: inline
           line 0 width: 28.3125, height: 10, bottom: 10, baseline: 8
             frag 0 from TextNode start: 0, length: 6, rect: [40,40 28.3125x10]
               "toggle"
@@ -24,21 +24,21 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
                   "the way"
               TextNode <#text>
             TextNode <#text>
-            BlockContainer <li#bar> at (235,55) content-size 139.984375x90 floating [BFC] children: not-inline
-              BlockContainer <(anonymous)> at (235,55) content-size 139.984375x0 children: inline
+            BlockContainer <li#bar> at (235,55) content-size 139.96875x90 floating [BFC] children: not-inline
+              BlockContainer <(anonymous)> at (235,55) content-size 139.96875x0 children: inline
                 TextNode <#text>
-              BlockContainer <p> at (235,55) content-size 139.984375x10 children: inline
+              BlockContainer <p> at (235,55) content-size 139.96875x10 children: inline
                 line 0 width: 74.3125, height: 10, bottom: 10, baseline: 8
                   frag 0 from TextNode start: 0, length: 14, rect: [235,55 74.3125x10]
                     "the world ends"
                 TextNode <#text>
-              BlockContainer <(anonymous)> at (235,65) content-size 139.984375x0 children: inline
+              BlockContainer <(anonymous)> at (235,65) content-size 139.96875x0 children: inline
                 TextNode <#text>
                 InlineNode <form>
                   TextNode <#text>
                   TextNode <#text>
                   TextNode <#text>
-              BlockContainer <p> at (235,65) content-size 139.984375x19 children: inline
+              BlockContainer <p> at (235,65) content-size 139.96875x19 children: inline
                 line 0 width: 39.484375, height: 19, bottom: 19, baseline: 12.5
                   frag 0 from TextNode start: 1, length: 5, rect: [235,65 27.484375x19]
                     "bang "
@@ -46,7 +46,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
                 TextNode <#text>
                 RadioButton <input> at (262,65) content-size 12x12 inline-block children: not-inline
                 TextNode <#text>
-              BlockContainer <p> at (235,84) content-size 139.984375x19 children: inline
+              BlockContainer <p> at (235,84) content-size 139.96875x19 children: inline
                 line 0 width: 57.15625, height: 19, bottom: 19, baseline: 12.5
                   frag 0 from TextNode start: 1, length: 8, rect: [235,84 45.15625x19]
                     "whimper "
@@ -54,15 +54,15 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
                 TextNode <#text>
                 RadioButton <input> at (280,84) content-size 12x12 inline-block children: not-inline
                 TextNode <#text>
-              BlockContainer <(anonymous)> at (235,103) content-size 139.984375x0 children: inline
+              BlockContainer <(anonymous)> at (235,103) content-size 139.96875x0 children: inline
                 TextNode <#text>
             TextNode <#text>
-            BlockContainer <li> at (409.984375,60) content-size 50x90 floating [BFC] children: inline
+            BlockContainer <li> at (409.96875,60) content-size 50x90 floating [BFC] children: inline
               line 0 width: 31.578125, height: 10, bottom: 10, baseline: 8
-                frag 0 from TextNode start: 0, length: 6, rect: [409.984375,60 31.578125x10]
+                frag 0 from TextNode start: 0, length: 6, rect: [409.96875,60 31.578125x10]
                   "i grow"
               line 1 width: 14.03125, height: 10, bottom: 20, baseline: 8
-                frag 0 from TextNode start: 7, length: 3, rect: [409.984375,70 14.03125x10]
+                frag 0 from TextNode start: 7, length: 3, rect: [409.96875,70 14.03125x10]
                   "old"
               TextNode <#text>
             TextNode <#text>
@@ -140,27 +140,27 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
     PaintableWithLines (BlockContainer<BODY>) [15,15 490x390]
       PaintableWithLines (BlockContainer(anonymous)) [20,20 480x0]
       PaintableWithLines (BlockContainer<DL>) [20,20 480x10]
-        PaintableWithLines (BlockContainer<DT>) [25,25 80x310]
+        PaintableWithLines (BlockContainer<DT>) [25,25 79.984375x310]
           TextPaintable (TextNode<#text>)
         PaintableWithLines (BlockContainer<DD>) [115,25 380x310]
           PaintableWithLines (BlockContainer(anonymous)) [135,45 340x0]
           PaintableWithLines (BlockContainer<UL>) [135,45 340x0]
             PaintableWithLines (BlockContainer<LI>) [135,45 80x120]
               TextPaintable (TextNode<#text>)
-            PaintableWithLines (BlockContainer<LI>#bar) [225,45 159.984375x110]
-              PaintableWithLines (BlockContainer(anonymous)) [235,55 139.984375x0]
-              PaintableWithLines (BlockContainer<P>) [235,55 139.984375x10]
+            PaintableWithLines (BlockContainer<LI>#bar) [225,45 159.96875x110]
+              PaintableWithLines (BlockContainer(anonymous)) [235,55 139.96875x0]
+              PaintableWithLines (BlockContainer<P>) [235,55 139.96875x10]
                 TextPaintable (TextNode<#text>)
-              PaintableWithLines (BlockContainer(anonymous)) [235,65 139.984375x0]
+              PaintableWithLines (BlockContainer(anonymous)) [235,65 139.96875x0]
                 InlinePaintable (InlineNode<FORM>)
-              PaintableWithLines (BlockContainer<P>) [235,65 139.984375x19]
+              PaintableWithLines (BlockContainer<P>) [235,65 139.96875x19]
                 TextPaintable (TextNode<#text>)
                 RadioButtonPaintable (RadioButton<INPUT>) [262,65 12x12]
-              PaintableWithLines (BlockContainer<P>) [235,84 139.984375x19]
+              PaintableWithLines (BlockContainer<P>) [235,84 139.96875x19]
                 TextPaintable (TextNode<#text>)
                 RadioButtonPaintable (RadioButton<INPUT>) [280,84 12x12]
-              PaintableWithLines (BlockContainer(anonymous)) [235,103 139.984375x0]
-            PaintableWithLines (BlockContainer<LI>) [394.984375,45 80x120]
+              PaintableWithLines (BlockContainer(anonymous)) [235,103 139.96875x0]
+            PaintableWithLines (BlockContainer<LI>) [394.96875,45 80x120]
               TextPaintable (TextNode<#text>)
             PaintableWithLines (BlockContainer<LI>#baz) [135,175 120x120]
               TextPaintable (TextNode<#text>)
@@ -181,4 +181,4 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
         InlinePaintable (InlineNode<A>)
           TextPaintable (TextNode<#text>)
         TextPaintable (TextNode<#text>)
-      PaintableWithLines (BlockContainer(anonymous)) [20,400 480x0]
+      PaintableWithLines (BlockContainer(anonymous)) [20,400 480x0]
\ No newline at end of file
diff --git a/Tests/LibWeb/Layout/expected/block-and-inline/small-percentage-margin.txt b/Tests/LibWeb/Layout/expected/block-and-inline/small-percentage-margin.txt
new file mode 100644
index 0000000000..b586977320
--- /dev/null
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/small-percentage-margin.txt
@@ -0,0 +1,35 @@
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x208 [BFC] children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x0 children: not-inline
+      BlockContainer <div> at (15.828125,8) content-size 376.3125x100 floating [BFC] children: inline
+        line 0 width: 27.703125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+          frag 0 from TextNode start: 0, length: 3, rect: [15.828125,8 27.703125x17.46875]
+            "abc"
+        TextNode <#text>
+      BlockContainer <div> at (407.796875,8) content-size 376.3125x100 floating [BFC] children: inline
+        line 0 width: 23.015625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+          frag 0 from TextNode start: 0, length: 3, rect: [407.796875,8 23.015625x17.46875]
+            "def"
+        TextNode <#text>
+      BlockContainer <div> at (15.828125,108) content-size 376.3125x100 floating [BFC] children: inline
+        line 0 width: 21.421875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+          frag 0 from TextNode start: 0, length: 3, rect: [15.828125,108 21.421875x17.46875]
+            "ghi"
+        TextNode <#text>
+      BlockContainer <div> at (407.796875,108) content-size 376.3125x100 floating [BFC] children: inline
+        line 0 width: 18.40625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+          frag 0 from TextNode start: 0, length: 3, rect: [407.796875,108 18.40625x17.46875]
+            "jkl"
+        TextNode <#text>
+
+ViewportPaintable (Viewport<#document>) [0,0 800x600]
+  PaintableWithLines (BlockContainer<HTML>) [0,0 800x208]
+    PaintableWithLines (BlockContainer<BODY>) [8,8 784x0] overflow: [15.828125,8 768.28125x200]
+      PaintableWithLines (BlockContainer<DIV>) [15.828125,8 376.3125x100]
+        TextPaintable (TextNode<#text>)
+      PaintableWithLines (BlockContainer<DIV>) [407.796875,8 376.3125x100]
+        TextPaintable (TextNode<#text>)
+      PaintableWithLines (BlockContainer<DIV>) [15.828125,108 376.3125x100]
+        TextPaintable (TextNode<#text>)
+      PaintableWithLines (BlockContainer<DIV>) [407.796875,108 376.3125x100]
+        TextPaintable (TextNode<#text>)
diff --git a/Tests/LibWeb/Layout/input/block-and-inline/small-percentage-margin.html b/Tests/LibWeb/Layout/input/block-and-inline/small-percentage-margin.html
new file mode 100644
index 0000000000..e90f0ee826
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/block-and-inline/small-percentage-margin.html
@@ -0,0 +1,10 @@
+<!doctype html><style>
+    * { outline: 1px solid black; }
+    div {
+        float: left;
+        width: 48%;
+        margin-left: 1%; 
+        margin-right: 1%; 
+        height: 100px;
+    }   
+</style><body><div>abc</div><div>def</div><div>ghi</div><div>jkl</div>
\ No newline at end of file
diff --git a/Userland/Libraries/LibWeb/CSS/PercentageOr.cpp b/Userland/Libraries/LibWeb/CSS/PercentageOr.cpp
index 12ddfb1022..f55454af9d 100644
--- a/Userland/Libraries/LibWeb/CSS/PercentageOr.cpp
+++ b/Userland/Libraries/LibWeb/CSS/PercentageOr.cpp
@@ -23,6 +23,11 @@ Length LengthPercentage::resolve_calculated(NonnullRefPtr<CalculatedStyleValue>
     return calculated->resolve_length_percentage(layout_node, reference_value).value();
 }
 
+Length LengthPercentage::resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const& calculated, Layout::Node const& layout_node, CSSPixels reference_value) const
+{
+    return calculated->resolve_length_percentage(layout_node, reference_value).value();
+}
+
 Time TimePercentage::resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const& calculated, Layout::Node const&, Time const& reference_value) const
 {
     return calculated->resolve_time_percentage(reference_value).value();
diff --git a/Userland/Libraries/LibWeb/CSS/PercentageOr.h b/Userland/Libraries/LibWeb/CSS/PercentageOr.h
index 57131423d9..0f7c39d6bb 100644
--- a/Userland/Libraries/LibWeb/CSS/PercentageOr.h
+++ b/Userland/Libraries/LibWeb/CSS/PercentageOr.h
@@ -83,8 +83,15 @@ public:
         return m_value.template get<NonnullRefPtr<CalculatedStyleValue>>();
     }
 
-    virtual T resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, [[maybe_unused]] Layout::Node const&, [[maybe_unused]] T const& reference_value) const
+    virtual T resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, Layout::Node const&, T const& reference_value) const
     {
+        (void)reference_value;
+        VERIFY_NOT_REACHED();
+    }
+
+    virtual T resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, Layout::Node const&, CSSPixels reference_value) const
+    {
+        (void)reference_value;
         VERIFY_NOT_REACHED();
     }
 
@@ -112,6 +119,25 @@ public:
             });
     }
 
+    T resolved(Layout::Node const& layout_node, CSSPixels reference_value) const
+    {
+        return m_value.visit(
+            [&](T const& t) {
+                if constexpr (requires { t.is_calculated(); }) {
+                    if (t.is_calculated())
+                        return resolve_calculated(t.calculated_style_value(), layout_node, reference_value);
+                }
+
+                return t;
+            },
+            [&](Percentage const& percentage) {
+                return Length::make_px(CSSPixels(percentage.value() * reference_value) / 100);
+            },
+            [&](NonnullRefPtr<CalculatedStyleValue> const& calculated) {
+                return resolve_calculated(calculated, layout_node, reference_value);
+            });
+    }
+
     String to_string() const
     {
         if (is_calculated())
@@ -193,6 +219,7 @@ public:
     bool is_length() const { return is_t(); }
     Length const& length() const { return get_t(); }
     virtual Length resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, Layout::Node const&, Length const& reference_value) const override;
+    virtual Length resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, Layout::Node const&, CSSPixels reference_value) const override;
 };
 
 class TimePercentage : public PercentageOr<Time> {
diff --git a/Userland/Libraries/LibWeb/CSS/Size.cpp b/Userland/Libraries/LibWeb/CSS/Size.cpp
index e7b828303c..1cd314690e 100644
--- a/Userland/Libraries/LibWeb/CSS/Size.cpp
+++ b/Userland/Libraries/LibWeb/CSS/Size.cpp
@@ -24,6 +24,11 @@ CSS::Length Size::resolved(Layout::Node const& node, Length const& reference_val
     return m_length_percentage.resolved(node, reference_value);
 }
 
+CSS::Length Size::resolved(Layout::Node const& node, CSSPixels reference_value) const
+{
+    return m_length_percentage.resolved(node, reference_value);
+}
+
 Size Size::make_auto()
 {
     return Size { Type::Auto, Length::make_auto() };
diff --git a/Userland/Libraries/LibWeb/CSS/Size.h b/Userland/Libraries/LibWeb/CSS/Size.h
index 87b04eb3d6..a9f5a421d2 100644
--- a/Userland/Libraries/LibWeb/CSS/Size.h
+++ b/Userland/Libraries/LibWeb/CSS/Size.h
@@ -47,6 +47,7 @@ public:
 
     // FIXME: This is a stopgap API that will go away once all layout code is aware of CSS::Size.
     CSS::Length resolved(Layout::Node const&, Length const& reference_value) const;
+    CSS::Length resolved(Layout::Node const&, CSSPixels reference_value) const;
 
     [[nodiscard]] CSSPixels to_px(Layout::Node const&, CSSPixels reference_value) const;
 
diff --git a/Userland/Libraries/LibWeb/CSS/StyleValues/CalculatedStyleValue.cpp b/Userland/Libraries/LibWeb/CSS/StyleValues/CalculatedStyleValue.cpp
index 0c4422bfb2..09f3793a6f 100644
--- a/Userland/Libraries/LibWeb/CSS/StyleValues/CalculatedStyleValue.cpp
+++ b/Userland/Libraries/LibWeb/CSS/StyleValues/CalculatedStyleValue.cpp
@@ -2338,6 +2338,22 @@ Optional<Length> CalculatedStyleValue::resolve_length_percentage(Layout::Node co
         });
 }
 
+Optional<Length> CalculatedStyleValue::resolve_length_percentage(Layout::Node const& layout_node, CSSPixels percentage_basis) const
+{
+    auto result = m_calculation->resolve(Length::ResolutionContext::for_layout_node(layout_node), Length::make_px(percentage_basis));
+
+    return result.value().visit(
+        [&](Length const& length) -> Optional<Length> {
+            return length;
+        },
+        [&](Percentage const& percentage) -> Optional<Length> {
+            return Length::make_px(CSSPixels(percentage.value() * percentage_basis) / 100);
+        },
+        [&](auto const&) -> Optional<Length> {
+            return {};
+        });
+}
+
 Optional<Percentage> CalculatedStyleValue::resolve_percentage() const
 {
     auto result = m_calculation->resolve({}, {});
diff --git a/Userland/Libraries/LibWeb/CSS/StyleValues/CalculatedStyleValue.h b/Userland/Libraries/LibWeb/CSS/StyleValues/CalculatedStyleValue.h
index 1d0c607ce3..5e88c5ca2a 100644
--- a/Userland/Libraries/LibWeb/CSS/StyleValues/CalculatedStyleValue.h
+++ b/Userland/Libraries/LibWeb/CSS/StyleValues/CalculatedStyleValue.h
@@ -89,6 +89,7 @@ public:
     [[nodiscard]] Optional<Length> resolve_length(Length::ResolutionContext const&) const;
     Optional<Length> resolve_length(Layout::Node const& layout_node) const;
     Optional<Length> resolve_length_percentage(Layout::Node const&, Length const& percentage_basis) const;
+    Optional<Length> resolve_length_percentage(Layout::Node const&, CSSPixels percentage_basis) const;
 
     bool resolves_to_percentage() const { return m_resolved_type.matches_percentage(); }
     Optional<Percentage> resolve_percentage() const;
diff --git a/Userland/Libraries/LibWeb/CSS/StyleValues/RadialGradientStyleValue.cpp b/Userland/Libraries/LibWeb/CSS/StyleValues/RadialGradientStyleValue.cpp
index ad63bed050..5040a6d482 100644
--- a/Userland/Libraries/LibWeb/CSS/StyleValues/RadialGradientStyleValue.cpp
+++ b/Userland/Libraries/LibWeb/CSS/StyleValues/RadialGradientStyleValue.cpp
@@ -150,8 +150,8 @@ Gfx::FloatSize RadialGradientStyleValue::resolve_size(Layout::Node const& node,
             return Gfx::FloatSize { radius.to_float(), radius.to_float() };
         },
         [&](EllipseSize const& ellipse_size) {
-            auto radius_a = ellipse_size.radius_a.resolved(node, CSS::Length::make_px(CSSPixels::nearest_value_for(size.width()))).to_px(node);
-            auto radius_b = ellipse_size.radius_b.resolved(node, CSS::Length::make_px(CSSPixels::nearest_value_for(size.height()))).to_px(node);
+            auto radius_a = ellipse_size.radius_a.resolved(node, CSSPixels::nearest_value_for(size.width())).to_px(node);
+            auto radius_b = ellipse_size.radius_b.resolved(node, CSSPixels::nearest_value_for(size.height())).to_px(node);
             return Gfx::FloatSize { radius_a.to_float(), radius_b.to_float() };
         });
 
diff --git a/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp
index e06841d8b1..f76ba708ac 100644
--- a/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp
+++ b/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp
@@ -164,14 +164,13 @@ void BlockFormattingContext::compute_width(Box const& box, AvailableSpace const&
     auto const& computed_values = box.computed_values();
 
     auto width_of_containing_block = remaining_available_space.width.to_px_or_zero();
-    auto width_of_containing_block_as_length_for_resolve = remaining_available_space.width.is_definite() ? CSS::Length::make_px(width_of_containing_block) : CSS::Length::make_px(0);
 
     auto zero_value = CSS::Length::make_px(0);
 
     auto margin_left = CSS::Length::make_auto();
     auto margin_right = CSS::Length::make_auto();
-    auto const padding_left = computed_values.padding().left().resolved(box, width_of_containing_block_as_length_for_resolve).to_px(box);
-    auto const padding_right = computed_values.padding().right().resolved(box, width_of_containing_block_as_length_for_resolve).to_px(box);
+    auto const padding_left = computed_values.padding().left().resolved(box, width_of_containing_block).to_px(box);
+    auto const padding_right = computed_values.padding().right().resolved(box, width_of_containing_block).to_px(box);
 
     auto& box_state = m_state.get_mutable(box);
     box_state.border_left = computed_values.border_left().width;
@@ -187,8 +186,8 @@ void BlockFormattingContext::compute_width(Box const& box, AvailableSpace const&
 
     auto try_compute_width = [&](auto const& a_width) {
         CSS::Length width = a_width;
-        margin_left = computed_values.margin().left().resolved(box, width_of_containing_block_as_length_for_resolve);
-        margin_right = computed_values.margin().right().resolved(box, width_of_containing_block_as_length_for_resolve);
+        margin_left = computed_values.margin().left().resolved(box, width_of_containing_block);
+        margin_right = computed_values.margin().right().resolved(box, width_of_containing_block);
         CSSPixels total_px = computed_values.border_left().width + computed_values.border_right().width;
         for (auto& value : { margin_left, CSS::Length::make_px(padding_left), width, CSS::Length::make_px(padding_right), margin_right }) {
             total_px += value.to_px(box);
@@ -290,12 +289,12 @@ void BlockFormattingContext::compute_width_for_floating_box(Box const& box, Avai
     auto& computed_values = box.computed_values();
 
     auto zero_value = CSS::Length::make_px(0);
-    auto width_of_containing_block_as_length_for_resolve = CSS::Length::make_px(available_space.width.to_px_or_zero());
+    auto width_of_containing_block = available_space.width.to_px_or_zero();
 
-    auto margin_left = computed_values.margin().left().resolved(box, width_of_containing_block_as_length_for_resolve);
-    auto margin_right = computed_values.margin().right().resolved(box, width_of_containing_block_as_length_for_resolve);
-    auto const padding_left = computed_values.padding().left().resolved(box, width_of_containing_block_as_length_for_resolve).to_px(box);
-    auto const padding_right = computed_values.padding().right().resolved(box, width_of_containing_block_as_length_for_resolve).to_px(box);
+    auto margin_left = computed_values.margin().left().resolved(box, width_of_containing_block);
+    auto margin_right = computed_values.margin().right().resolved(box, width_of_containing_block);
+    auto const padding_left = computed_values.padding().left().resolved(box, width_of_containing_block).to_px(box);
+    auto const padding_right = computed_values.padding().right().resolved(box, width_of_containing_block).to_px(box);
 
     // If 'margin-left', or 'margin-right' are computed as 'auto', their used value is '0'.
     if (margin_left.is_auto())
@@ -371,17 +370,14 @@ void BlockFormattingContext::compute_width_for_block_level_replaced_element_in_n
 
     auto zero_value = CSS::Length::make_px(0);
     auto width_of_containing_block = available_space.width.to_px_or_zero();
-    auto width_of_containing_block_as_length_for_resolve = CSS::Length::make_px(width_of_containing_block);
-    if (!available_space.width.is_definite())
-        width_of_containing_block_as_length_for_resolve = CSS::Length::make_px(0);
 
     // 10.3.4 Block-level, replaced elements in normal flow
     // The used value of 'width' is determined as for inline replaced elements. Then the rules for
     // non-replaced block-level elements are applied to determine the margins.
-    auto margin_left = computed_values.margin().left().resolved(box, width_of_containing_block_as_length_for_resolve);
-    auto margin_right = computed_values.margin().right().resolved(box, width_of_containing_block_as_length_for_resolve);
-    auto const padding_left = computed_values.padding().left().resolved(box, width_of_containing_block_as_length_for_resolve).to_px(box);
-    auto const padding_right = computed_values.padding().right().resolved(box, width_of_containing_block_as_length_for_resolve).to_px(box);
+    auto margin_left = computed_values.margin().left().resolved(box, width_of_containing_block);
+    auto margin_right = computed_values.margin().right().resolved(box, width_of_containing_block);
+    auto const padding_left = computed_values.padding().left().resolved(box, width_of_containing_block).to_px(box);
+    auto const padding_right = computed_values.padding().right().resolved(box, width_of_containing_block).to_px(box);
 
     // If 'margin-left', or 'margin-right' are computed as 'auto', their used value is '0'.
     if (margin_left.is_auto())
@@ -407,12 +403,11 @@ CSSPixels BlockFormattingContext::compute_table_box_width_inside_table_wrapper(B
     auto const& computed_values = box.computed_values();
 
     auto width_of_containing_block = available_space.width.to_px_or_zero();
-    auto width_of_containing_block_as_length_for_resolve = available_space.width.is_definite() ? CSS::Length::make_px(width_of_containing_block) : CSS::Length::make_px(0);
 
     auto zero_value = CSS::Length::make_px(0);
 
-    auto margin_left = computed_values.margin().left().resolved(box, width_of_containing_block_as_length_for_resolve);
-    auto margin_right = computed_values.margin().right().resolved(box, width_of_containing_block_as_length_for_resolve);
+    auto margin_left = computed_values.margin().left().resolved(box, width_of_containing_block);
+    auto margin_right = computed_values.margin().right().resolved(box, width_of_containing_block);
 
     // If 'margin-left', or 'margin-right' are computed as 'auto', their used value is '0'.
     if (margin_left.is_auto())
diff --git a/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp
index 0d2537ba31..f59020b195 100644
--- a/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp
+++ b/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp
@@ -387,7 +387,6 @@ CSSPixels FormattingContext::tentative_width_for_replaced_element(Box const& box
     if (computed_width.is_percentage() && !m_state.get(*box.containing_block()).has_definite_width())
         return 0;
 
-    auto height_of_containing_block = CSS::Length::make_px(containing_block_height_for(box));
     auto computed_height = should_treat_height_as_auto(box, available_space) ? CSS::Size::make_auto() : box.computed_values().height();
 
     CSSPixels used_width = calculate_inner_width(box, available_space.width, computed_width).to_px(box);
@@ -451,7 +450,6 @@ CSSPixels FormattingContext::compute_width_for_replaced_element(Box const& box,
 
     auto zero_value = CSS::Length::make_px(0);
     auto width_of_containing_block = available_space.width.to_px_or_zero();
-    auto width_of_containing_block_as_length = CSS::Length::make_px(width_of_containing_block);
 
     auto computed_width = should_treat_width_as_auto(box, available_space) ? CSS::Size::make_auto() : box.computed_values().width();
     auto computed_height = should_treat_height_as_auto(box, available_space) ? CSS::Size::make_auto() : box.computed_values().height();
@@ -565,7 +563,6 @@ CSSPixels FormattingContext::compute_height_for_replaced_element(Box const& box,
 void FormattingContext::compute_width_for_absolutely_positioned_non_replaced_element(Box const& box, AvailableSpace const& available_space)
 {
     auto width_of_containing_block = available_space.width.to_px_or_zero();
-    auto width_of_containing_block_as_length = CSS::Length::make_px(width_of_containing_block);
     auto& computed_values = box.computed_values();
     auto zero_value = CSS::Length::make_px(0);
 
@@ -582,8 +579,8 @@ void FormattingContext::compute_width_for_absolutely_positioned_non_replaced_ele
     auto right = computed_values.inset().right().to_px(box, width_of_containing_block);
 
     auto try_compute_width = [&](auto const& a_width) {
-        margin_left = computed_values.margin().left().resolved(box, width_of_containing_block_as_length);
-        margin_right = computed_values.margin().right().resolved(box, width_of_containing_block_as_length);
+        margin_left = computed_values.margin().left().resolved(box, width_of_containing_block);
+        margin_right = computed_values.margin().right().resolved(box, width_of_containing_block);
 
         auto width = a_width;
 
@@ -833,9 +830,7 @@ void FormattingContext::compute_height_for_absolutely_positioned_non_replaced_el
     auto height = box.computed_values().height();
 
     auto width_of_containing_block = containing_block_width_for(box);
-    auto width_of_containing_block_as_length = CSS::Length::make_px(width_of_containing_block);
     auto height_of_containing_block = available_space.height.to_px_or_zero();
-    auto height_of_containing_block_as_length = CSS::Length::make_px(height_of_containing_block);
 
     enum class ClampToZero {
         No,
@@ -859,23 +854,23 @@ void FormattingContext::compute_height_for_absolutely_positioned_non_replaced_el
     };
 
     auto solve_for_top = [&] {
-        top = solve_for(top.resolved(box, height_of_containing_block_as_length));
+        top = solve_for(top.resolved(box, height_of_containing_block));
     };
 
     auto solve_for_bottom = [&] {
-        bottom = solve_for(bottom.resolved(box, height_of_containing_block_as_length));
+        bottom = solve_for(bottom.resolved(box, height_of_containing_block));
     };
 
     auto solve_for_height = [&] {
-        height = CSS::Size::make_length(solve_for(height.resolved(box, height_of_containing_block_as_length), ClampToZero::Yes));
+        height = CSS::Size::make_length(solve_for(height.resolved(box, height_of_containing_block), ClampToZero::Yes));
     };
 
     auto solve_for_margin_top = [&] {
-        margin_top = solve_for(margin_top.resolved(box, width_of_containing_block_as_length));
+        margin_top = solve_for(margin_top.resolved(box, width_of_containing_block));
     };
 
     auto solve_for_margin_bottom = [&] {
-        margin_bottom = solve_for(margin_bottom.resolved(box, width_of_containing_block_as_length));
+        margin_bottom = solve_for(margin_bottom.resolved(box, width_of_containing_block));
     };
 
     auto solve_for_margin_top_and_margin_bottom = [&] {
@@ -1093,11 +1088,6 @@ void FormattingContext::layout_absolutely_positioned_element(Box const& box, Ava
     auto& containing_block_state = m_state.get_mutable(*box.containing_block());
     auto& box_state = m_state.get_mutable(box);
 
-    auto width_of_containing_block = available_space.width.to_px_or_zero();
-    auto height_of_containing_block = available_space.height.to_px_or_zero();
-    auto width_of_containing_block_as_length = CSS::Length::make_px(width_of_containing_block);
-    auto height_of_containing_block_as_length = CSS::Length::make_px(height_of_containing_block);
-
     // The border computed values are not changed by the compute_height & width calculations below.
     // The spec only adjusts and computes sizes, insets and margins.
     box_state.border_left = box.computed_values().border_left().width;
@@ -1449,9 +1439,8 @@ CSSPixels FormattingContext::calculate_max_content_height(Layout::Box const& box
 CSS::Length FormattingContext::calculate_inner_width(Layout::Box const& box, AvailableSize const& available_width, CSS::Size const& width) const
 {
     auto width_of_containing_block = available_width.to_px_or_zero();
-    auto width_of_containing_block_as_length_for_resolve = CSS::Length::make_px(width_of_containing_block);
     if (width.is_auto()) {
-        return width.resolved(box, width_of_containing_block_as_length_for_resolve);
+        return width.resolved(box, width_of_containing_block);
     }
     if (width.is_fit_content()) {
         return CSS::Length::make_px(calculate_fit_content_width(box, AvailableSpace { available_width, AvailableSize::make_indefinite() }));
@@ -1465,8 +1454,8 @@ CSS::Length FormattingContext::calculate_inner_width(Layout::Box const& box, Ava
 
     auto& computed_values = box.computed_values();
     if (computed_values.box_sizing() == CSS::BoxSizing::BorderBox) {
-        auto const padding_left = computed_values.padding().left().resolved(box, width_of_containing_block_as_length_for_resolve);
-        auto const padding_right = computed_values.padding().right().resolved(box, width_of_containing_block_as_length_for_resolve);
+        auto const padding_left = computed_values.padding().left().resolved(box, width_of_containing_block);
+        auto const padding_right = computed_values.padding().right().resolved(box, width_of_containing_block);
 
         auto inner_width = width.to_px(box, width_of_containing_block)
             - computed_values.border_left().width
@@ -1476,7 +1465,7 @@ CSS::Length FormattingContext::calculate_inner_width(Layout::Box const& box, Ava
         return CSS::Length::make_px(max(inner_width, 0));
     }
 
-    return width.resolved(box, width_of_containing_block_as_length_for_resolve);
+    return width.resolved(box, width_of_containing_block);
 }
 
 CSS::Length FormattingContext::calculate_inner_height(Layout::Box const& box, AvailableSize const&, CSS::Size const& height) const
@@ -1489,14 +1478,13 @@ CSS::Length FormattingContext::calculate_inner_height(Layout::Box const& box, Av
         // If the box has position: absolute, then the containing block is formed by the padding edge of the ancestor
         height_of_containing_block += containing_block_state.padding_top + containing_block_state.padding_bottom;
     }
-    auto height_of_containing_block_as_length_for_resolve = CSS::Length::make_px(height_of_containing_block);
     if (height.is_auto()) {
-        return height.resolved(box, height_of_containing_block_as_length_for_resolve);
+        return height.resolved(box, height_of_containing_block);
     }
 
     auto& computed_values = box.computed_values();
     if (computed_values.box_sizing() == CSS::BoxSizing::BorderBox) {
-        auto width_of_containing_block = CSS::Length::make_px(containing_block_width_for(box));
+        auto width_of_containing_block = containing_block_width_for(box);
 
         auto const padding_top = computed_values.padding().top().resolved(box, width_of_containing_block);
         auto const padding_bottom = computed_values.padding().bottom().resolved(box, width_of_containing_block);
@@ -1509,7 +1497,7 @@ CSS::Length FormattingContext::calculate_inner_height(Layout::Box const& box, Av
         return CSS::Length::make_px(max(inner_height, 0));
     }
 
-    return height.resolved(box, height_of_containing_block_as_length_for_resolve);
+    return height.resolved(box, height_of_containing_block);
 }
 
 CSSPixels FormattingContext::containing_block_width_for(NodeWithStyleAndBoxModelMetrics const& node) const
diff --git a/Userland/Libraries/LibWeb/Layout/LayoutState.cpp b/Userland/Libraries/LibWeb/Layout/LayoutState.cpp
index 775ba4929b..2377041035 100644
--- a/Userland/Libraries/LibWeb/Layout/LayoutState.cpp
+++ b/Userland/Libraries/LibWeb/Layout/LayoutState.cpp
@@ -373,9 +373,7 @@ void LayoutState::UsedValues::set_node(NodeWithStyleAndBoxModelMetrics& node, Us
             if (size.calculated().contains_percentage()) {
                 if (!containing_block_has_definite_size)
                     return false;
-                auto containing_block_size_as_length = width
-                    ? CSS::Length::make_px(containing_block_used_values->content_width())
-                    : CSS::Length::make_px(containing_block_used_values->content_height());
+                auto containing_block_size_as_length = width ? containing_block_used_values->content_width() : containing_block_used_values->content_height();
                 resolved_definite_size = adjust_for_box_sizing(size.calculated().resolve_length_percentage(node, containing_block_size_as_length).value_or(CSS::Length::make_auto()).to_px(node), size, width);
                 return true;
             }
diff --git a/Userland/Libraries/LibWeb/Layout/TableFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/TableFormattingContext.cpp
index fe1733a5a7..ddb8c20182 100644
--- a/Userland/Libraries/LibWeb/Layout/TableFormattingContext.cpp
+++ b/Userland/Libraries/LibWeb/Layout/TableFormattingContext.cpp
@@ -842,9 +842,7 @@ void TableFormattingContext::compute_table_height(LayoutMode layout_mode)
             span_width += m_columns[cell.column_index + i].used_width;
 
         auto width_of_containing_block = m_state.get(*cell.box->containing_block()).content_width();
-        auto width_of_containing_block_as_length = CSS::Length::make_px(width_of_containing_block);
         auto height_of_containing_block = m_state.get(*cell.box->containing_block()).content_height();
-        auto height_of_containing_block_as_length = CSS::Length::make_px(height_of_containing_block);
 
         cell_state.padding_top = cell.box->computed_values().padding().top().to_px(cell.box, width_of_containing_block);
         cell_state.padding_bottom = cell.box->computed_values().padding().bottom().to_px(cell.box, width_of_containing_block);