LibWeb: Convert FormattingContext to new pixel units

Just FormattingContext and AvailableSpace, and the minor adjustments to
make everything else work.

16 files changed, 174 insertions, 175 deletions

diff --git a/Userland/Libraries/LibWeb/Layout/AvailableSpace.cpp b/Userland/Libraries/LibWeb/Layout/AvailableSpace.cpp
index f452d877cc..3cd4004f84 100644
--- a/Userland/Libraries/LibWeb/Layout/AvailableSpace.cpp
+++ b/Userland/Libraries/LibWeb/Layout/AvailableSpace.cpp
@@ -9,7 +9,7 @@
 
 namespace Web::Layout {
 
-AvailableSize AvailableSize::make_definite(float value)
+AvailableSize AvailableSize::make_definite(CSSPixels value)
 {
     return AvailableSize { Type::Definite, value };
 }
@@ -49,7 +49,7 @@ DeprecatedString AvailableSpace::to_deprecated_string() const
     return DeprecatedString::formatted("{} x {}", width, height);
 }
 
-AvailableSize::AvailableSize(Type type, float value)
+AvailableSize::AvailableSize(Type type, CSSPixels value)
     : m_type(type)
     , m_value(value)
 {
diff --git a/Userland/Libraries/LibWeb/Layout/AvailableSpace.h b/Userland/Libraries/LibWeb/Layout/AvailableSpace.h
index ce6de61beb..d4984a6146 100644
--- a/Userland/Libraries/LibWeb/Layout/AvailableSpace.h
+++ b/Userland/Libraries/LibWeb/Layout/AvailableSpace.h
@@ -9,6 +9,7 @@
 #include <AK/DeprecatedString.h>
 #include <AK/Format.h>
 #include <LibWeb/Forward.h>
+#include <LibWeb/PixelUnits.h>
 
 namespace Web::Layout {
 
@@ -21,7 +22,7 @@ public:
         MaxContent,
     };
 
-    static AvailableSize make_definite(float);
+    static AvailableSize make_definite(CSSPixels);
     static AvailableSize make_indefinite();
     static AvailableSize make_min_content();
     static AvailableSize make_max_content();
@@ -32,12 +33,12 @@ public:
     bool is_max_content() const { return m_type == Type::MaxContent; }
     bool is_intrinsic_sizing_constraint() const { return is_min_content() || is_max_content(); }
 
-    float to_px() const
+    CSSPixels to_px() const
     {
         return m_value;
     }
 
-    float to_px_or_zero() const
+    CSSPixels to_px_or_zero() const
     {
         if (!is_definite())
             return 0.0f;
@@ -47,10 +48,10 @@ public:
     DeprecatedString to_deprecated_string() const;
 
 private:
-    AvailableSize(Type type, float);
+    AvailableSize(Type type, CSSPixels);
 
     Type m_type {};
-    float m_value {};
+    CSSPixels m_value {};
 };
 
 class AvailableSpace {
diff --git a/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp
index 2e6a5231ca..29609e99ee 100644
--- a/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp
+++ b/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp
@@ -40,7 +40,7 @@ bool BlockFormattingContext::is_initial() const
     return is<InitialContainingBlock>(root());
 }
 
-float BlockFormattingContext::automatic_content_height() const
+CSSPixels BlockFormattingContext::automatic_content_height() const
 {
     return compute_auto_height_for_block_formatting_context_root(root());
 }
@@ -80,7 +80,7 @@ void BlockFormattingContext::parent_context_did_dimension_child_root_box()
 
     // Right-side floats: offset_from_edge is from right edge (float_containing_block_width) to the left content edge of floating_box.
     for (auto& floating_box : m_right_floats.all_boxes) {
-        auto float_containing_block_width = containing_block_width_for(floating_box->box);
+        auto float_containing_block_width = containing_block_width_for(floating_box->box).value();
         auto& box_state = m_state.get_mutable(floating_box->box);
         box_state.set_content_x(float_containing_block_width - floating_box->offset_from_edge);
     }
@@ -117,7 +117,7 @@ void BlockFormattingContext::compute_width(Box const& box, AvailableSpace const&
 
     auto const& computed_values = box.computed_values();
 
-    float width_of_containing_block = available_space.width.to_px();
+    float width_of_containing_block = available_space.width.to_px().value();
     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);
@@ -234,7 +234,7 @@ 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);
-    float width_of_containing_block = available_space.width.to_px();
+    float width_of_containing_block = available_space.width.to_px().value();
     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);
@@ -309,7 +309,7 @@ void BlockFormattingContext::compute_width_for_floating_box(Box const& box, Avai
 
 void BlockFormattingContext::compute_width_for_block_level_replaced_element_in_normal_flow(ReplacedBox const& box, AvailableSpace const& available_space)
 {
-    m_state.get_mutable(box).set_content_width(compute_width_for_replaced_element(m_state, box, available_space));
+    m_state.get_mutable(box).set_content_width(compute_width_for_replaced_element(m_state, box, available_space).value());
 }
 
 void BlockFormattingContext::compute_height(Box const& box, AvailableSpace const& available_space)
@@ -320,7 +320,7 @@ void BlockFormattingContext::compute_height(Box const& box, AvailableSpace const
     // Then work out what the height is, based on box type and CSS properties.
     float height = 0;
     if (is<ReplacedBox>(box)) {
-        height = compute_height_for_replaced_element(m_state, verify_cast<ReplacedBox>(box), available_space);
+        height = compute_height_for_replaced_element(m_state, verify_cast<ReplacedBox>(box), available_space).value();
     } else {
         if (should_treat_height_as_auto(box, available_space)) {
             height = compute_auto_height_for_block_level_element(box, available_space);
@@ -354,9 +354,9 @@ void BlockFormattingContext::layout_inline_children(BlockContainer const& block_
         available_space);
 
     if (!block_container_state.has_definite_width())
-        block_container_state.set_content_width(context.automatic_content_width());
+        block_container_state.set_content_width(context.automatic_content_width().value());
     if (!block_container_state.has_definite_height())
-        block_container_state.set_content_height(context.automatic_content_height());
+        block_container_state.set_content_height(context.automatic_content_height().value());
 }
 
 static bool margins_collapse_through(Box const& box, LayoutState& state)
@@ -371,7 +371,7 @@ static bool margins_collapse_through(Box const& box, LayoutState& state)
 float BlockFormattingContext::compute_auto_height_for_block_level_element(Box const& box, AvailableSpace const& available_space)
 {
     if (creates_block_formatting_context(box)) {
-        return compute_auto_height_for_block_formatting_context_root(verify_cast<BlockContainer>(box));
+        return compute_auto_height_for_block_formatting_context_root(verify_cast<BlockContainer>(box)).value();
     }
 
     auto const& box_state = m_state.get(box);
@@ -380,13 +380,13 @@ float BlockFormattingContext::compute_auto_height_for_block_level_element(Box co
     if (display.is_flex_inside()) {
         // https://drafts.csswg.org/css-flexbox-1/#algo-main-container
         // NOTE: The automatic block size of a block-level flex container is its max-content size.
-        return calculate_max_content_height(box, available_space.width);
+        return calculate_max_content_height(box, available_space.width).value();
     }
     if (display.is_grid_inside()) {
         // https://www.w3.org/TR/css-grid-2/#intrinsic-sizes
         // In both inline and block formatting contexts, the grid container’s auto block size is its
         // max-content size.
-        return calculate_max_content_height(box, available_space.width);
+        return calculate_max_content_height(box, available_space.width).value();
     }
 
     // https://www.w3.org/TR/CSS22/visudet.html#normal-block
@@ -546,7 +546,7 @@ void BlockFormattingContext::layout_block_level_children(BlockContainer const& b
     if (layout_mode == LayoutMode::IntrinsicSizing) {
         auto& block_container_state = m_state.get_mutable(block_container);
         if (!block_container_state.has_definite_width())
-            block_container_state.set_content_width(greatest_child_width(block_container));
+            block_container_state.set_content_width(greatest_child_width(block_container).value());
         if (!block_container_state.has_definite_height())
             block_container_state.set_content_height(bottom_of_lowest_margin_box);
     }
@@ -637,14 +637,14 @@ void BlockFormattingContext::place_block_level_element_in_normal_flow_horizontal
     auto& box_state = m_state.get_mutable(child_box);
 
     float x = 0;
-    float available_width_within_containing_block = available_space.width.to_px();
+    float available_width_within_containing_block = available_space.width.to_px().value();
 
     if ((!m_left_floats.current_boxes.is_empty() || !m_right_floats.current_boxes.is_empty())
         && creates_block_formatting_context(child_box)) {
         auto box_in_root_rect = content_box_rect_in_ancestor_coordinate_space(child_box, root(), m_state);
         auto space = space_used_by_floats(box_in_root_rect.y());
-        available_width_within_containing_block -= space.left + space.right;
-        x += space.left;
+        available_width_within_containing_block -= space.left.value() + space.right.value();
+        x += space.left.value();
     }
 
     if (child_box.containing_block()->computed_values().text_align() == CSS::TextAlign::LibwebCenter) {
@@ -704,7 +704,7 @@ void BlockFormattingContext::layout_floating_box(Box const& box, BlockContainer
     VERIFY(box.is_floating());
 
     auto& box_state = m_state.get_mutable(box);
-    float width_of_containing_block = available_space.width.to_px();
+    float width_of_containing_block = available_space.width.to_px().value();
 
     compute_width(box, available_space, layout_mode);
     auto independent_formatting_context = layout_inside(box, layout_mode, box_state.available_inner_space_or_constraints_from(available_space));
@@ -895,7 +895,7 @@ BlockFormattingContext::SpaceUsedByFloats BlockFormattingContext::space_used_by_
     return space_used_by_floats;
 }
 
-float BlockFormattingContext::greatest_child_width(Box const& box)
+CSSPixels BlockFormattingContext::greatest_child_width(Box const& box)
 {
     // Similar to FormattingContext::greatest_child_width()
     // but this one takes floats into account!
diff --git a/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.h b/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.h
index a16560bea9..74deded9cc 100644
--- a/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.h
+++ b/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.h
@@ -22,7 +22,7 @@ public:
     ~BlockFormattingContext();
 
     virtual void run(Box const&, LayoutMode, AvailableSpace const&) override;
-    virtual float automatic_content_height() const override;
+    virtual CSSPixels automatic_content_height() const override;
 
     bool is_initial() const;
 
@@ -42,7 +42,7 @@ public:
 
     SpaceUsedByFloats space_used_by_floats(float y) const;
 
-    virtual float greatest_child_width(Box const&) override;
+    virtual CSSPixels greatest_child_width(Box const&) override;
 
     void layout_floating_box(Box const& child, BlockContainer const& containing_block, LayoutMode, AvailableSpace const&, float y, LineBuilder* = nullptr);
 
diff --git a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
index 1d7b6aaa9f..1a87d8c7e1 100644
--- a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
+++ b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
@@ -78,7 +78,7 @@ FlexFormattingContext::FlexFormattingContext(LayoutState& state, Box const& flex
 
 FlexFormattingContext::~FlexFormattingContext() = default;
 
-float FlexFormattingContext::automatic_content_height() const
+CSSPixels FlexFormattingContext::automatic_content_height() const
 {
     return m_state.get(flex_container()).content_height();
 }
@@ -584,7 +584,7 @@ float FlexFormattingContext::calculate_indefinite_main_size(FlexItem const& item
         box_state.set_content_width(fit_content_cross_size);
         independent_formatting_context->run(item.box, LayoutMode::Normal, m_available_space_for_items->space);
 
-        return independent_formatting_context->automatic_content_height();
+        return independent_formatting_context->automatic_content_height().value();
     }
 
     return calculate_fit_content_main_size(item);
@@ -825,13 +825,13 @@ void FlexFormattingContext::determine_main_size_of_flex_container()
 
     if (is_row_layout()) {
         if (!flex_container().is_out_of_flow(*parent()) && m_state.get(*flex_container().containing_block()).has_definite_width()) {
-            set_main_size(flex_container(), calculate_stretch_fit_width(flex_container(), m_available_space_for_flex_container->space.width));
+            set_main_size(flex_container(), calculate_stretch_fit_width(flex_container(), m_available_space_for_flex_container->space.width).value());
         } else {
-            set_main_size(flex_container(), calculate_max_content_width(flex_container()));
+            set_main_size(flex_container(), calculate_max_content_width(flex_container()).value());
         }
     } else {
         if (!has_definite_main_size(flex_container()))
-            set_main_size(flex_container(), calculate_max_content_height(flex_container(), m_available_space_for_flex_container->space.width));
+            set_main_size(flex_container(), calculate_max_content_height(flex_container(), m_available_space_for_flex_container->space.width).value());
     }
 }
 
@@ -1108,7 +1108,7 @@ void FlexFormattingContext::determine_hypothetical_cross_size_of_item(FlexItem&
     auto automatic_cross_size = is_row_layout() ? independent_formatting_context->automatic_content_height()
                                                 : box_state.content_width();
 
-    item.hypothetical_cross_size = css_clamp(automatic_cross_size, clamp_min, clamp_max);
+    item.hypothetical_cross_size = css_clamp(automatic_cross_size.value(), clamp_min, clamp_max);
 }
 
 // https://www.w3.org/TR/css-flexbox-1/#algo-cross-line
@@ -1831,34 +1831,34 @@ float FlexFormattingContext::calculate_cross_max_content_contribution(FlexItem c
 
 float FlexFormattingContext::calculate_min_content_main_size(FlexItem const& item) const
 {
-    return is_row_layout() ? calculate_min_content_width(item.box) : calculate_min_content_height(item.box, m_available_space_for_items->space.width);
+    return is_row_layout() ? calculate_min_content_width(item.box).value() : calculate_min_content_height(item.box, m_available_space_for_items->space.width).value();
 }
 
 float FlexFormattingContext::calculate_fit_content_main_size(FlexItem const& item) const
 {
-    return is_row_layout() ? calculate_fit_content_width(item.box, m_available_space_for_items->space)
-                           : calculate_fit_content_height(item.box, m_available_space_for_items->space);
+    return is_row_layout() ? calculate_fit_content_width(item.box, m_available_space_for_items->space).value()
+                           : calculate_fit_content_height(item.box, m_available_space_for_items->space).value();
 }
 
 float FlexFormattingContext::calculate_fit_content_cross_size(FlexItem const& item) const
 {
-    return !is_row_layout() ? calculate_fit_content_width(item.box, m_available_space_for_items->space)
-                            : calculate_fit_content_height(item.box, m_available_space_for_items->space);
+    return !is_row_layout() ? calculate_fit_content_width(item.box, m_available_space_for_items->space).value()
+                            : calculate_fit_content_height(item.box, m_available_space_for_items->space).value();
 }
 
 float FlexFormattingContext::calculate_max_content_main_size(FlexItem const& item) const
 {
-    return is_row_layout() ? calculate_max_content_width(item.box) : calculate_max_content_height(item.box, m_available_space_for_items->space.width);
+    return is_row_layout() ? calculate_max_content_width(item.box).value() : calculate_max_content_height(item.box, m_available_space_for_items->space.width).value();
 }
 
 float FlexFormattingContext::calculate_min_content_cross_size(FlexItem const& item) const
 {
-    return is_row_layout() ? calculate_min_content_height(item.box, m_available_space_for_items->space.width) : calculate_min_content_width(item.box);
+    return is_row_layout() ? calculate_min_content_height(item.box, m_available_space_for_items->space.width).value() : calculate_min_content_width(item.box).value();
 }
 
 float FlexFormattingContext::calculate_max_content_cross_size(FlexItem const& item) const
 {
-    return is_row_layout() ? calculate_max_content_height(item.box, m_available_space_for_items->space.width) : calculate_max_content_width(item.box);
+    return is_row_layout() ? calculate_max_content_height(item.box, m_available_space_for_items->space.width).value() : calculate_max_content_width(item.box).value();
 }
 
 // https://drafts.csswg.org/css-flexbox-1/#stretched
@@ -1961,7 +1961,7 @@ void FlexFormattingContext::handle_align_content_stretch()
 }
 
 // https://drafts.csswg.org/css-flexbox-1/#abspos-items
-Gfx::FloatPoint FlexFormattingContext::calculate_static_position(Box const& box) const
+CSSPixelPoint FlexFormattingContext::calculate_static_position(Box const& box) const
 {
     // The cross-axis edges of the static-position rectangle of an absolutely-positioned child
     // of a flex container are the content edges of the flex container.
@@ -2060,7 +2060,7 @@ Gfx::FloatPoint FlexFormattingContext::calculate_static_position(Box const& box)
     auto absolute_position_of_abspos_containing_block = absolute_content_rect(*box.containing_block(), m_state).location();
     auto diff = absolute_position_of_flex_container - absolute_position_of_abspos_containing_block;
 
-    return static_position_offset + diff;
+    return (static_position_offset + diff).to_type<CSSPixels>();
 }
 
 }
diff --git a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.h b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.h
index fa06620131..9388e13221 100644
--- a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.h
+++ b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.h
@@ -19,7 +19,7 @@ public:
     virtual bool inhibits_floating() const override { return true; }
 
     virtual void run(Box const&, LayoutMode, AvailableSpace const&) override;
-    virtual float automatic_content_height() const override;
+    virtual CSSPixels automatic_content_height() const override;
 
     Box const& flex_container() const { return context_box(); }
 
@@ -27,7 +27,7 @@ public:
     virtual void determine_width_of_child(Box const&, AvailableSpace const&) override;
     virtual void determine_height_of_child(Box const&, AvailableSpace const&) override;
 
-    virtual Gfx::FloatPoint calculate_static_position(Box const&) const override;
+    virtual CSSPixelPoint calculate_static_position(Box const&) const override;
 
 private:
     [[nodiscard]] bool should_treat_main_size_as_auto(Box const&) const;
diff --git a/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp
index 3a353aad62..d088f46d30 100644
--- a/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp
+++ b/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp
@@ -127,7 +127,7 @@ OwnPtr<FormattingContext> FormattingContext::create_independent_formatting_conte
                 : FormattingContext(Type::Block, state, box)
             {
             }
-            virtual float automatic_content_height() const override { return 0; };
+            virtual CSSPixels automatic_content_height() const override { return 0; };
             virtual void run(Box const&, LayoutMode, AvailableSpace const&) override { }
         };
         return make<ReplacedFormattingContext>(state, child_box);
@@ -170,7 +170,7 @@ OwnPtr<FormattingContext> FormattingContext::create_independent_formatting_conte
                 : FormattingContext(Type::Block, state, box)
             {
             }
-            virtual float automatic_content_height() const override { return 0; };
+            virtual CSSPixels automatic_content_height() const override { return 0; };
             virtual void run(Box const&, LayoutMode, AvailableSpace const&) override { }
         };
         return make<DummyFormattingContext>(state, child_box);
@@ -208,9 +208,9 @@ OwnPtr<FormattingContext> FormattingContext::layout_inside(Box const& child_box,
     return independent_formatting_context;
 }
 
-float FormattingContext::greatest_child_width(Box const& box)
+CSSPixels FormattingContext::greatest_child_width(Box const& box)
 {
-    float max_width = 0;
+    CSSPixels max_width = 0;
     if (box.children_are_inline()) {
         for (auto& line_box : m_state.get(box).line_boxes) {
             max_width = max(max_width, line_box.width());
@@ -232,7 +232,7 @@ FormattingContext::ShrinkToFitResult FormattingContext::calculate_shrink_to_fit_
     };
 }
 
-static Gfx::FloatSize solve_replaced_size_constraint(LayoutState const& state, float w, float h, ReplacedBox const& box)
+static CSSPixelSize solve_replaced_size_constraint(LayoutState const& state, CSSPixels w, CSSPixels h, ReplacedBox const& box)
 {
     // 10.4 Minimum and maximum widths: 'min-width' and 'max-width'
 
@@ -241,10 +241,10 @@ static Gfx::FloatSize solve_replaced_size_constraint(LayoutState const& state, f
     auto width_of_containing_block = CSS::Length::make_px(containing_block_state.content_width());
     auto height_of_containing_block = CSS::Length::make_px(containing_block_state.content_height());
 
-    auto specified_min_width = box.computed_values().min_width().is_auto() ? 0 : box.computed_values().min_width().resolved(box, width_of_containing_block).to_px(box);
-    auto specified_max_width = box.computed_values().max_width().is_none() ? w : box.computed_values().max_width().resolved(box, width_of_containing_block).to_px(box);
-    auto specified_min_height = box.computed_values().min_height().is_auto() ? 0 : box.computed_values().min_height().resolved(box, height_of_containing_block).to_px(box);
-    auto specified_max_height = box.computed_values().max_height().is_none() ? h : box.computed_values().max_height().resolved(box, height_of_containing_block).to_px(box);
+    CSSPixels specified_min_width = box.computed_values().min_width().is_auto() ? 0 : box.computed_values().min_width().resolved(box, width_of_containing_block).to_px(box);
+    CSSPixels specified_max_width = box.computed_values().max_width().is_none() ? w : box.computed_values().max_width().resolved(box, width_of_containing_block).to_px(box);
+    CSSPixels specified_min_height = box.computed_values().min_height().is_auto() ? 0 : box.computed_values().min_height().resolved(box, height_of_containing_block).to_px(box);
+    CSSPixels specified_max_height = box.computed_values().max_height().is_none() ? h : box.computed_values().max_height().resolved(box, height_of_containing_block).to_px(box);
 
     auto min_width = min(specified_min_width, specified_max_width);
     auto max_width = max(specified_min_width, specified_max_width);
@@ -252,21 +252,21 @@ static Gfx::FloatSize solve_replaced_size_constraint(LayoutState const& state, f
     auto max_height = max(specified_min_height, specified_max_height);
 
     if (w > max_width)
-        return { w, max(max_width * h / w, min_height) };
+        return { w, max(max_width * (h / w), min_height) };
     if (w < min_width)
-        return { max_width, min(min_width * h / w, max_height) };
+        return { max_width, min(min_width * (h / w), max_height) };
     if (h > max_height)
-        return { max(max_height * w / h, min_width), max_height };
+        return { max(max_height * (w / h), min_width), max_height };
     if (h < min_height)
-        return { min(min_height * w / h, max_width), min_height };
+        return { min(min_height * (w / h), max_width), min_height };
     if ((w > max_width && h > max_height) && (max_width / w < max_height / h))
-        return { max_width, max(min_height, max_width * h / w) };
+        return { max_width, max(min_height, max_width * (h / w)) };
     if ((w > max_width && h > max_height) && (max_width / w > max_height / h))
-        return { max(min_width, max_height * w / h), max_height };
+        return { max(min_width, max_height * (w / h)), max_height };
     if ((w < min_width && h < min_height) && (min_width / w < min_height / h))
-        return { min(max_width, min_height * w / h), min_height };
+        return { min(max_width, min_height * (w / h)), min_height };
     if ((w < min_width && h < min_height) && (min_width / w > min_height / h))
-        return { min_width, min(max_height, min_width * h / w) };
+        return { min_width, min(max_height, min_width * (h / w)) };
     if (w < min_width && h > max_height)
         return { min_width, max_height };
     if (w > max_width && h < min_height)
@@ -275,11 +275,11 @@ static Gfx::FloatSize solve_replaced_size_constraint(LayoutState const& state, f
 }
 
 // https://www.w3.org/TR/CSS22/visudet.html#root-height
-float FormattingContext::compute_auto_height_for_block_formatting_context_root(BlockContainer const& root) const
+CSSPixels FormattingContext::compute_auto_height_for_block_formatting_context_root(BlockContainer const& root) const
 {
     // 10.6.7 'Auto' heights for block formatting context roots
-    Optional<float> top;
-    Optional<float> bottom;
+    Optional<CSSPixels> top;
+    Optional<CSSPixels> bottom;
 
     if (root.children_are_inline()) {
         // If it only has inline-level children, the height is the distance between
@@ -305,8 +305,8 @@ float FormattingContext::compute_auto_height_for_block_formatting_context_root(B
 
             auto const& child_box_state = m_state.get(child_box);
 
-            float child_box_top = child_box_state.offset.y() - child_box_state.margin_box_top();
-            float child_box_bottom = child_box_state.offset.y() + child_box_state.content_height() + child_box_state.margin_box_bottom();
+            CSSPixels child_box_top = child_box_state.offset.y() - child_box_state.margin_box_top();
+            CSSPixels child_box_bottom = child_box_state.offset.y() + child_box_state.content_height() + child_box_state.margin_box_bottom();
 
             if (!top.has_value() || child_box_top < top.value())
                 top = child_box_top;
@@ -325,16 +325,16 @@ float FormattingContext::compute_auto_height_for_block_formatting_context_root(B
         // NOTE: Floating box coordinates are relative to their own containing block,
         //       which may or may not be the BFC root.
         auto margin_box = margin_box_rect_in_ancestor_coordinate_space(*floating_box, root, m_state);
-        float floating_box_bottom_margin_edge = margin_box.bottom() + 1;
+        CSSPixels floating_box_bottom_margin_edge = margin_box.bottom() + 1;
         if (!bottom.has_value() || floating_box_bottom_margin_edge > bottom.value())
             bottom = floating_box_bottom_margin_edge;
     }
 
-    return max(0.0f, bottom.value_or(0) - top.value_or(0));
+    return max(CSSPixels(0.0f), bottom.value_or(0) - top.value_or(0));
 }
 
 // 10.3.2 Inline, replaced elements, https://www.w3.org/TR/CSS22/visudet.html#inline-replaced-width
-float FormattingContext::tentative_width_for_replaced_element(LayoutState const& state, ReplacedBox const& box, CSS::Size const& computed_width, AvailableSpace const& available_space)
+CSSPixels FormattingContext::tentative_width_for_replaced_element(LayoutState const& state, ReplacedBox const& box, CSS::Size const& computed_width, AvailableSpace const& available_space)
 {
     // Treat percentages of indefinite containing block widths as 0 (the initial width).
     if (computed_width.is_percentage() && !state.get(*box.containing_block()).has_definite_width())
@@ -343,7 +343,7 @@ float FormattingContext::tentative_width_for_replaced_element(LayoutState const&
     auto height_of_containing_block = CSS::Length::make_px(containing_block_height_for(box, state));
     auto computed_height = should_treat_height_as_auto(box, available_space) ? CSS::Size::make_auto() : box.computed_values().height();
 
-    float used_width = computed_width.resolved(box, CSS::Length::make_px(available_space.width.to_px())).to_px(box);
+    CSSPixels used_width = computed_width.resolved(box, CSS::Length::make_px(available_space.width.to_px())).to_px(box);
 
     // If 'height' and 'width' both have computed values of 'auto' and the element also has an intrinsic width,
     // then that intrinsic width is the used value of 'width'.
@@ -394,7 +394,7 @@ void FormattingContext::compute_height_for_absolutely_positioned_element(Box con
         compute_height_for_absolutely_positioned_non_replaced_element(box, available_space);
 }
 
-float FormattingContext::compute_width_for_replaced_element(LayoutState const& state, ReplacedBox const& box, AvailableSpace const& available_space)
+CSSPixels FormattingContext::compute_width_for_replaced_element(LayoutState const& state, ReplacedBox const& box, AvailableSpace const& available_space)
 {
     // 10.3.4 Block-level, replaced elements in normal flow...
     // 10.3.2 Inline, replaced elements
@@ -439,7 +439,7 @@ float FormattingContext::compute_width_for_replaced_element(LayoutState const& s
 
 // 10.6.2 Inline replaced elements, block-level replaced elements in normal flow, 'inline-block' replaced elements in normal flow and floating replaced elements
 // https://www.w3.org/TR/CSS22/visudet.html#inline-replaced-height
-float FormattingContext::tentative_height_for_replaced_element(LayoutState const& state, ReplacedBox const& box, CSS::Size const& computed_height, AvailableSpace const& available_space)
+CSSPixels FormattingContext::tentative_height_for_replaced_element(LayoutState const& state, ReplacedBox const& box, CSS::Size const& computed_height, AvailableSpace const& available_space)
 {
     // If 'height' and 'width' both have computed values of 'auto' and the element also has
     // an intrinsic height, then that intrinsic height is the used value of 'height'.
@@ -465,7 +465,7 @@ float FormattingContext::tentative_height_for_replaced_element(LayoutState const
     return computed_height.resolved(box, CSS::Length::make_px(available_space.height.to_px())).to_px(box);
 }
 
-float FormattingContext::compute_height_for_replaced_element(LayoutState const& state, ReplacedBox const& box, AvailableSpace const& available_space)
+CSSPixels FormattingContext::compute_height_for_replaced_element(LayoutState const& state, ReplacedBox const& box, AvailableSpace const& available_space)
 {
     // 10.6.2 Inline replaced elements, block-level replaced elements in normal flow,
     // 'inline-block' replaced elements in normal flow and floating replaced elements
@@ -475,11 +475,11 @@ float FormattingContext::compute_height_for_replaced_element(LayoutState const&
     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();
 
-    float used_height = tentative_height_for_replaced_element(state, box, computed_height, available_space);
+    CSSPixels used_height = tentative_height_for_replaced_element(state, box, computed_height, available_space);
 
     if (computed_width.is_auto() && computed_height.is_auto() && box.has_intrinsic_aspect_ratio()) {
-        float w = tentative_width_for_replaced_element(state, box, computed_width, available_space);
-        float h = used_height;
+        CSSPixels w = tentative_width_for_replaced_element(state, box, computed_width, available_space);
+        CSSPixels h = used_height;
         used_height = solve_replaced_size_constraint(state, w, h, box).height();
     }
 
@@ -509,15 +509,15 @@ void FormattingContext::compute_width_for_absolutely_positioned_non_replaced_ele
         auto width = a_width;
 
         auto solve_for_left = [&] {
-            return CSS::Length(width_of_containing_block - margin_left.to_px(box) - border_left - padding_left - width.to_px(box) - padding_right - border_right - margin_right.to_px(box) - right.to_px(box), CSS::Length::Type::Px);
+            return CSS::Length::make_px(width_of_containing_block - margin_left.to_px(box) - border_left - padding_left - width.to_px(box) - padding_right - border_right - margin_right.to_px(box) - right.to_px(box));
         };
 
         auto solve_for_width = [&] {
-            return CSS::Length(width_of_containing_block - left.to_px(box) - margin_left.to_px(box) - border_left - padding_left - padding_right - border_right - margin_right.to_px(box) - right.to_px(box), CSS::Length::Type::Px);
+            return CSS::Length::make_px(width_of_containing_block - left.to_px(box) - margin_left.to_px(box) - border_left - padding_left - padding_right - border_right - margin_right.to_px(box) - right.to_px(box));
         };
 
         auto solve_for_right = [&] {
-            return CSS::Length(width_of_containing_block - left.to_px(box) - margin_left.to_px(box) - border_left - padding_left - width.to_px(box) - padding_right - border_right - margin_right.to_px(box), CSS::Length::Type::Px);
+            return CSS::Length::make_px(width_of_containing_block - left.to_px(box) - margin_left.to_px(box) - border_left - padding_left - width.to_px(box) - padding_right - border_right - margin_right.to_px(box));
         };
 
         // If all three of 'left', 'width', and 'right' are 'auto':
@@ -550,7 +550,7 @@ void FormattingContext::compute_width_for_absolutely_positioned_non_replaced_ele
         if (left.is_auto() && width.is_auto() && !right.is_auto()) {
             auto result = calculate_shrink_to_fit_widths(box);
             auto available_width = solve_for_width();
-            width = CSS::Length(min(max(result.preferred_minimum_width, available_width.to_px(box)), result.preferred_width), CSS::Length::Type::Px);
+            width = CSS::Length::make_px(min(max(result.preferred_minimum_width, available_width.to_px(box)), result.preferred_width));
             left = solve_for_left();
         }
 
@@ -572,7 +572,7 @@ void FormattingContext::compute_width_for_absolutely_positioned_non_replaced_ele
         Rule3:
             auto result = calculate_shrink_to_fit_widths(box);
             auto available_width = solve_for_width();
-            width = CSS::Length(min(max(result.preferred_minimum_width, available_width.to_px(box)), result.preferred_width), CSS::Length::Type::Px);
+            width = CSS::Length::make_px(min(max(result.preferred_minimum_width, available_width.to_px(box)), result.preferred_width));
             right = solve_for_right();
         }
 
@@ -632,7 +632,7 @@ void FormattingContext::compute_width_for_absolutely_positioned_replaced_element
     // The used value of 'width' is determined as for inline replaced elements.
     // FIXME: This const_cast is gross.
     const_cast<ReplacedBox&>(box).prepare_for_replaced_layout();
-    m_state.get_mutable(box).set_content_width(compute_width_for_replaced_element(m_state, box, available_space));
+    m_state.get_mutable(box).set_content_width(compute_width_for_replaced_element(m_state, box, available_space).value());
 }
 
 // https://drafts.csswg.org/css-position-3/#abs-non-replaced-height
@@ -817,30 +817,30 @@ void FormattingContext::compute_height_for_absolutely_positioned_non_replaced_el
 }
 
 // NOTE: This is different from content_box_rect_in_ancestor_coordinate_space() as this does *not* follow the containing block chain up, but rather the parent() chain.
-static Gfx::FloatRect content_box_rect_in_static_position_ancestor_coordinate_space(Box const& box, Box const& ancestor_box, LayoutState const& state)
+static CSSPixelRect content_box_rect_in_static_position_ancestor_coordinate_space(Box const& box, Box const& ancestor_box, LayoutState const& state)
 {
-    auto rect = content_box_rect(box, state);
+    auto rect = content_box_rect(box, state).to_type<CSSPixels>();
     if (&box == &ancestor_box)
         return rect;
     for (auto const* current = box.parent(); current; current = current->parent()) {
         if (current == &ancestor_box)
             return rect;
         auto const& current_state = state.get(static_cast<Box const&>(*current));
-        rect.translate_by(current_state.offset);
+        rect.translate_by(current_state.offset.to_type<CSSPixels>());
     }
     // If we get here, ancestor_box was not an ancestor of `box`!
     VERIFY_NOT_REACHED();
 }
 
 // https://www.w3.org/TR/css-position-3/#staticpos-rect
-Gfx::FloatPoint FormattingContext::calculate_static_position(Box const& box) const
+CSSPixelPoint FormattingContext::calculate_static_position(Box const& box) const
 {
     // NOTE: This is very ad-hoc.
     // The purpose of this function is to calculate the approximate position that `box`
     // would have had if it were position:static.
 
-    float x = 0.0f;
-    float y = 0.0f;
+    CSSPixels x = 0.0f;
+    CSSPixels y = 0.0f;
 
     VERIFY(box.parent());
     if (box.parent()->children_are_inline()) {
@@ -927,14 +927,14 @@ void FormattingContext::layout_absolutely_positioned_element(Box const& box, Ava
 
     auto static_position = calculate_static_position(box);
 
-    Gfx::FloatPoint used_offset;
+    CSSPixelPoint used_offset;
 
     if (!computed_left.is_auto()) {
-        float x_offset = box_state.inset_left
+        CSSPixels x_offset = box_state.inset_left
             + box_state.border_box_left();
         used_offset.set_x(x_offset + box_state.margin_left);
     } else if (!computed_right.is_auto()) {
-        float x_offset = 0
+        CSSPixels x_offset = 0
             - box_state.inset_right
             - box_state.border_box_right();
         used_offset.set_x(width_of_containing_block + x_offset - box_state.content_width() - box_state.margin_right);
@@ -944,11 +944,11 @@ void FormattingContext::layout_absolutely_positioned_element(Box const& box, Ava
     }
 
     if (!computed_top.is_auto()) {
-        float y_offset = box_state.inset_top
+        CSSPixels y_offset = box_state.inset_top
             + box_state.border_box_top();
         used_offset.set_y(y_offset + box_state.margin_top);
     } else if (!computed_bottom.is_auto()) {
-        float y_offset = 0
+        CSSPixels y_offset = 0
             - box_state.inset_bottom
             - box_state.border_box_bottom();
         used_offset.set_y(height_of_containing_block + y_offset - box_state.content_height() - box_state.margin_bottom);
@@ -960,7 +960,7 @@ void FormattingContext::layout_absolutely_positioned_element(Box const& box, Ava
     // NOTE: Absolutely positioned boxes are relative to the *padding edge* of the containing block.
     used_offset.translate_by(-containing_block_state.padding_left, -containing_block_state.padding_top);
 
-    box_state.set_content_offset(used_offset);
+    box_state.set_content_offset(used_offset.to_type<float>());
 
     if (independent_formatting_context)
         independent_formatting_context->parent_context_did_dimension_child_root_box();
@@ -970,7 +970,7 @@ void FormattingContext::compute_height_for_absolutely_positioned_replaced_elemen
 {
     // 10.6.5 Absolutely positioned, replaced elements
     // The used value of 'height' is determined as for inline replaced elements.
-    m_state.get_mutable(box).set_content_height(compute_height_for_replaced_element(m_state, box, available_space));
+    m_state.get_mutable(box).set_content_height(compute_height_for_replaced_element(m_state, box, available_space).value());
 }
 
 // https://www.w3.org/TR/css-position-3/#relpos-insets
@@ -979,7 +979,7 @@ void FormattingContext::compute_inset(Box const& box)
     if (box.computed_values().position() != CSS::Position::Relative)
         return;
 
-    auto resolve_two_opposing_insets = [&](CSS::LengthPercentage const& computed_start, CSS::LengthPercentage const& computed_end, float& used_start, float& used_end, float reference_for_percentage) {
+    auto resolve_two_opposing_insets = [&](CSS::LengthPercentage const& computed_start, CSS::LengthPercentage const& computed_end, float& used_start, float& used_end, CSSPixels reference_for_percentage) {
         auto resolved_first = computed_start.resolved(box, CSS::Length::make_px(reference_for_percentage)).resolved(box);
         auto resolved_second = computed_end.resolved(box, CSS::Length::make_px(reference_for_percentage)).resolved(box);
 
@@ -1014,7 +1014,7 @@ void FormattingContext::compute_inset(Box const& box)
 }
 
 // https://drafts.csswg.org/css-sizing-3/#fit-content-size
-float FormattingContext::calculate_fit_content_width(Layout::Box const& box, AvailableSpace const& available_space) const
+CSSPixels FormattingContext::calculate_fit_content_width(Layout::Box const& box, AvailableSpace const& available_space) const
 {
     // If the available space in a given axis is definite,
     // equal to clamp(min-content size, stretch-fit size, max-content size)
@@ -1034,7 +1034,7 @@ float FormattingContext::calculate_fit_content_width(Layout::Box const& box, Ava
 }
 
 // https://drafts.csswg.org/css-sizing-3/#fit-content-size
-float FormattingContext::calculate_fit_content_height(Layout::Box const& box, AvailableSpace const& available_space) const
+CSSPixels FormattingContext::calculate_fit_content_height(Layout::Box const& box, AvailableSpace const& available_space) const
 {
     // If the available space in a given axis is definite,
     // equal to clamp(min-content size, stretch-fit size, max-content size)
@@ -1053,7 +1053,7 @@ float FormattingContext::calculate_fit_content_height(Layout::Box const& box, Av
     return calculate_max_content_height(box, available_space.width);
 }
 
-float FormattingContext::calculate_min_content_width(Layout::Box const& box) const
+CSSPixels FormattingContext::calculate_min_content_width(Layout::Box const& box) const
 {
     if (box.has_intrinsic_width())
         return *box.intrinsic_width();
@@ -1079,7 +1079,7 @@ float FormattingContext::calculate_min_content_width(Layout::Box const& box) con
     if (context->type() == FormattingContext::Type::Flex) {
         cache.min_content_width = box_state.content_width();
     } else {
-        cache.min_content_width = context->greatest_child_width(box);
+        cache.min_content_width = context->greatest_child_width(box).value();
     }
 
     if (!isfinite(*cache.min_content_width)) {
@@ -1091,7 +1091,7 @@ float FormattingContext::calculate_min_content_width(Layout::Box const& box) con
     return *cache.min_content_width;
 }
 
-float FormattingContext::calculate_max_content_width(Layout::Box const& box) const
+CSSPixels FormattingContext::calculate_max_content_width(Layout::Box const& box) const
 {
     if (box.has_intrinsic_width())
         return *box.intrinsic_width();
@@ -1117,7 +1117,7 @@ float FormattingContext::calculate_max_content_width(Layout::Box const& box) con
     if (context->type() == FormattingContext::Type::Flex) {
         cache.max_content_width = box_state.content_width();
     } else {
-        cache.max_content_width = context->greatest_child_width(box);
+        cache.max_content_width = context->greatest_child_width(box).value();
     }
 
     if (!isfinite(*cache.max_content_width)) {
@@ -1129,7 +1129,7 @@ float FormattingContext::calculate_max_content_width(Layout::Box const& box) con
     return *cache.max_content_width;
 }
 
-float FormattingContext::calculate_min_content_height(Layout::Box const& box, AvailableSize const& available_width) const
+CSSPixels FormattingContext::calculate_min_content_height(Layout::Box const& box, AvailableSize const& available_width) const
 {
     if (box.has_intrinsic_height())
         return *box.intrinsic_height();
@@ -1140,7 +1140,7 @@ float FormattingContext::calculate_min_content_height(Layout::Box const& box, Av
         auto& root_state = m_state.m_root;
         auto& cache = *root_state.intrinsic_sizes.ensure(&box, [] { return adopt_own(*new LayoutState::IntrinsicSizes); });
         if (available_width.is_definite()) {
-            cache_slot = &cache.min_content_height_with_definite_available_width.ensure(available_width.to_px());
+            cache_slot = &cache.min_content_height_with_definite_available_width.ensure(available_width.to_px().value());
         } else if (available_width.is_min_content()) {
             cache_slot = &cache.min_content_height_with_min_content_available_width;
         } else if (available_width.is_max_content()) {
@@ -1162,19 +1162,19 @@ float FormattingContext::calculate_min_content_height(Layout::Box const& box, Av
     context->run(box, LayoutMode::IntrinsicSizing, AvailableSpace(available_width, AvailableSize::make_min_content()));
 
     auto min_content_height = context->automatic_content_height();
-    if (!isfinite(min_content_height)) {
+    if (!isfinite(min_content_height.value())) {
         // HACK: If layout calculates a non-finite result, something went wrong. Force it to zero and log a little whine.
         dbgln("FIXME: Calculated non-finite min-content height for {}", box.debug_description());
         min_content_height = 0;
     }
 
     if (cache_slot) {
-        *cache_slot = min_content_height;
+        *cache_slot = min_content_height.value();
     }
     return min_content_height;
 }
 
-float FormattingContext::calculate_max_content_height(Layout::Box const& box, AvailableSize const& available_width) const
+CSSPixels FormattingContext::calculate_max_content_height(Layout::Box const& box, AvailableSize const& available_width) const
 {
     if (box.has_intrinsic_height())
         return *box.intrinsic_height();
@@ -1185,7 +1185,7 @@ float FormattingContext::calculate_max_content_height(Layout::Box const& box, Av
         auto& root_state = m_state.m_root;
         auto& cache = *root_state.intrinsic_sizes.ensure(&box, [] { return adopt_own(*new LayoutState::IntrinsicSizes); });
         if (available_width.is_definite()) {
-            cache_slot = &cache.max_content_height_with_definite_available_width.ensure(available_width.to_px());
+            cache_slot = &cache.max_content_height_with_definite_available_width.ensure(available_width.to_px().value());
         } else if (available_width.is_min_content()) {
             cache_slot = &cache.max_content_height_with_min_content_available_width;
         } else if (available_width.is_max_content()) {
@@ -1208,14 +1208,14 @@ float FormattingContext::calculate_max_content_height(Layout::Box const& box, Av
 
     auto max_content_height = context->automatic_content_height();
 
-    if (!isfinite(max_content_height)) {
+    if (!isfinite(max_content_height.value())) {
         // HACK: If layout calculates a non-finite result, something went wrong. Force it to zero and log a little whine.
         dbgln("FIXME: Calculated non-finite max-content height for {}", box.debug_description());
         max_content_height = 0;
     }
 
     if (cache_slot) {
-        *cache_slot = max_content_height;
+        *cache_slot = max_content_height.value();
     }
 
     return max_content_height;
@@ -1223,7 +1223,7 @@ float FormattingContext::calculate_max_content_height(Layout::Box const& box, Av
 
 CSS::Length FormattingContext::calculate_inner_width(Layout::Box const& box, AvailableSize const& available_width, CSS::Size const& width) const
 {
-    float width_of_containing_block = available_width.to_px();
+    auto width_of_containing_block = available_width.to_px();
     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).resolved(box);
@@ -1237,7 +1237,7 @@ CSS::Length FormattingContext::calculate_inner_width(Layout::Box const& box, Ava
         auto const padding_left = computed_values.padding().left().resolved(box, width_of_containing_block_as_length_for_resolve).resolved(box);
         auto const padding_right = computed_values.padding().right().resolved(box, width_of_containing_block_as_length_for_resolve).resolved(box);
 
-        float inner_width = width.resolved(box, width_of_containing_block_as_length_for_resolve).resolved(box).to_px(box)
+        auto inner_width = width.resolved(box, width_of_containing_block_as_length_for_resolve).resolved(box).to_px(box)
             - computed_values.border_left().width
             - padding_left.to_px(box)
             - computed_values.border_right().width
@@ -1250,7 +1250,7 @@ CSS::Length FormattingContext::calculate_inner_width(Layout::Box const& box, Ava
 
 CSS::Length FormattingContext::calculate_inner_height(Layout::Box const& box, AvailableSize const& available_height, CSS::Size const& height) const
 {
-    float height_of_containing_block = available_height.to_px();
+    auto height_of_containing_block = available_height.to_px();
     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).resolved(box);
@@ -1264,7 +1264,7 @@ CSS::Length FormattingContext::calculate_inner_height(Layout::Box const& box, Av
         auto const padding_top = computed_values.padding().top().resolved(box, height_of_containing_block_as_length_for_resolve).resolved(box);
         auto const padding_bottom = computed_values.padding().bottom().resolved(box, height_of_containing_block_as_length_for_resolve).resolved(box);
 
-        float inner_height = height.resolved(box, height_of_containing_block_as_length_for_resolve).resolved(box).to_px(box)
+        auto inner_height = height.resolved(box, height_of_containing_block_as_length_for_resolve).resolved(box).to_px(box)
             - computed_values.border_top().width
             - padding_top.to_px(box)
             - computed_values.border_bottom().width
@@ -1275,7 +1275,7 @@ CSS::Length FormattingContext::calculate_inner_height(Layout::Box const& box, Av
     return height.resolved(box, height_of_containing_block_as_length_for_resolve).resolved(box);
 }
 
-float FormattingContext::containing_block_width_for(Box const& box, LayoutState const& state)
+CSSPixels FormattingContext::containing_block_width_for(Box const& box, LayoutState const& state)
 {
     auto& containing_block_state = state.get(*box.containing_block());
     auto& box_state = state.get(box);
@@ -1291,7 +1291,7 @@ float FormattingContext::containing_block_width_for(Box const& box, LayoutState
     VERIFY_NOT_REACHED();
 }
 
-float FormattingContext::containing_block_height_for(Box const& box, LayoutState const& state)
+CSSPixels FormattingContext::containing_block_height_for(Box const& box, LayoutState const& state)
 {
     auto& containing_block_state = state.get(*box.containing_block());
     auto& box_state = state.get(box);
@@ -1308,7 +1308,7 @@ float FormattingContext::containing_block_height_for(Box const& box, LayoutState
 }
 
 // https://drafts.csswg.org/css-sizing-3/#stretch-fit-size
-float FormattingContext::calculate_stretch_fit_width(Box const& box, AvailableSize const& available_width) const
+CSSPixels FormattingContext::calculate_stretch_fit_width(Box const& box, AvailableSize const& available_width) const
 {
     // The size a box would take if its outer size filled the available space in the given axis;
     // in other words, the stretch fit into the available space, if that is definite.
@@ -1324,7 +1324,7 @@ float FormattingContext::calculate_stretch_fit_width(Box const& box, AvailableSi
 }
 
 // https://drafts.csswg.org/css-sizing-3/#stretch-fit-size
-float FormattingContext::calculate_stretch_fit_height(Box const& box, AvailableSize const& available_height) const
+CSSPixels FormattingContext::calculate_stretch_fit_height(Box const& box, AvailableSize const& available_height) const
 {
     // The size a box would take if its outer size filled the available space in the given axis;
     // in other words, the stretch fit into the available space, if that is definite.
diff --git a/Userland/Libraries/LibWeb/Layout/FormattingContext.h b/Userland/Libraries/LibWeb/Layout/FormattingContext.h
index 7d5fd611aa..1b74d88650 100644
--- a/Userland/Libraries/LibWeb/Layout/FormattingContext.h
+++ b/Userland/Libraries/LibWeb/Layout/FormattingContext.h
@@ -28,10 +28,10 @@ public:
     virtual void run(Box const&, LayoutMode, AvailableSpace const&) = 0;
 
     // This function returns the automatic content height of the context's root box.
-    virtual float automatic_content_width() const { return 0; }
+    virtual CSSPixels automatic_content_width() const { return 0; }
 
     // This function returns the automatic content height of the context's root box.
-    virtual float automatic_content_height() const = 0;
+    virtual CSSPixels automatic_content_height() const = 0;
 
     Box const& context_box() const { return m_context_box; }
 
@@ -45,40 +45,40 @@ public:
 
     static bool creates_block_formatting_context(Box const&);
 
-    static float compute_width_for_replaced_element(LayoutState const&, ReplacedBox const&, AvailableSpace const&);
-    static float compute_height_for_replaced_element(LayoutState const&, ReplacedBox const&, AvailableSpace const&);
+    static CSSPixels compute_width_for_replaced_element(LayoutState const&, ReplacedBox const&, AvailableSpace const&);
+    static CSSPixels compute_height_for_replaced_element(LayoutState const&, ReplacedBox const&, AvailableSpace const&);
 
     OwnPtr<FormattingContext> create_independent_formatting_context_if_needed(LayoutState&, Box const& child_box);
 
     virtual void parent_context_did_dimension_child_root_box() { }
 
-    float calculate_min_content_width(Layout::Box const&) const;
-    float calculate_max_content_width(Layout::Box const&) const;
-    float calculate_min_content_height(Layout::Box const&, AvailableSize const& available_width) const;
-    float calculate_max_content_height(Layout::Box const&, AvailableSize const& available_width) const;
+    CSSPixels calculate_min_content_width(Layout::Box const&) const;
+    CSSPixels calculate_max_content_width(Layout::Box const&) const;
+    CSSPixels calculate_min_content_height(Layout::Box const&, AvailableSize const& available_width) const;
+    CSSPixels calculate_max_content_height(Layout::Box const&, AvailableSize const& available_width) const;
 
-    float calculate_fit_content_height(Layout::Box const&, AvailableSpace const&) const;
-    float calculate_fit_content_width(Layout::Box const&, AvailableSpace const&) const;
+    CSSPixels calculate_fit_content_height(Layout::Box const&, AvailableSpace const&) const;
+    CSSPixels calculate_fit_content_width(Layout::Box const&, AvailableSpace const&) const;
 
     CSS::Length calculate_inner_width(Layout::Box const&, AvailableSize const&, CSS::Size const& width) const;
     CSS::Length calculate_inner_height(Layout::Box const&, AvailableSize const&, CSS::Size const& height) const;
 
-    virtual float greatest_child_width(Box const&);
+    virtual CSSPixels greatest_child_width(Box const&);
 
-    float containing_block_width_for(Box const& box) const { return containing_block_width_for(box, m_state); }
-    float containing_block_height_for(Box const& box) const { return containing_block_height_for(box, m_state); }
+    CSSPixels containing_block_width_for(Box const& box) const { return containing_block_width_for(box, m_state); }
+    CSSPixels containing_block_height_for(Box const& box) const { return containing_block_height_for(box, m_state); }
 
-    static float containing_block_width_for(Box const&, LayoutState const&);
-    static float containing_block_height_for(Box const&, LayoutState const&);
+    static CSSPixels containing_block_width_for(Box const&, LayoutState const&);
+    static CSSPixels containing_block_height_for(Box const&, LayoutState const&);
 
-    [[nodiscard]] float calculate_stretch_fit_width(Box const&, AvailableSize const&) const;
-    [[nodiscard]] float calculate_stretch_fit_height(Box const&, AvailableSize const&) const;
+    [[nodiscard]] CSSPixels calculate_stretch_fit_width(Box const&, AvailableSize const&) const;
+    [[nodiscard]] CSSPixels calculate_stretch_fit_height(Box const&, AvailableSize const&) const;
 
     virtual bool can_determine_size_of_child() const { return false; }
     virtual void determine_width_of_child(Box const&, AvailableSpace const&) { }
     virtual void determine_height_of_child(Box const&, AvailableSpace const&) { }
 
-    virtual Gfx::FloatPoint calculate_static_position(Box const&) const;
+    virtual CSSPixelPoint calculate_static_position(Box const&) const;
     bool can_skip_is_anonymous_text_run(Box&);
 
 protected:
@@ -87,24 +87,22 @@ protected:
     static bool should_treat_width_as_auto(Box const&, AvailableSpace const&);
     static bool should_treat_height_as_auto(Box const&, AvailableSpace const&);
 
-    float calculate_fit_content_size(float min_content_size, float max_content_size, AvailableSize const&) const;
-
     OwnPtr<FormattingContext> layout_inside(Box const&, LayoutMode, AvailableSpace const&);
     void compute_inset(Box const& box);
 
     struct SpaceUsedByFloats {
-        float left { 0 };
-        float right { 0 };
+        CSSPixels left { 0 };
+        CSSPixels right { 0 };
     };
 
     struct ShrinkToFitResult {
-        float preferred_width { 0 };
-        float preferred_minimum_width { 0 };
+        CSSPixels preferred_width { 0 };
+        CSSPixels preferred_minimum_width { 0 };
     };
 
-    static float tentative_width_for_replaced_element(LayoutState const&, ReplacedBox const&, CSS::Size const& computed_width, AvailableSpace const&);
-    static float tentative_height_for_replaced_element(LayoutState const&, ReplacedBox const&, CSS::Size const& computed_height, AvailableSpace const&);
-    float compute_auto_height_for_block_formatting_context_root(BlockContainer const&) const;
+    static CSSPixels tentative_width_for_replaced_element(LayoutState const&, ReplacedBox const&, CSS::Size const& computed_width, AvailableSpace const&);
+    static CSSPixels tentative_height_for_replaced_element(LayoutState const&, ReplacedBox const&, CSS::Size const& computed_height, AvailableSpace const&);
+    CSSPixels compute_auto_height_for_block_formatting_context_root(BlockContainer const&) const;
 
     ShrinkToFitResult calculate_shrink_to_fit_widths(Box const&);
 
diff --git a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp
index 639770328a..b1f6cd894d 100644
--- a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp
+++ b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp
@@ -27,7 +27,7 @@ float GridFormattingContext::resolve_definite_track_size(CSS::GridSize const& gr
         return grid_size.length().to_px(box);
     case CSS::GridSize::Type::Percentage:
         if (available_space.width.is_definite())
-            return grid_size.percentage().as_fraction() * available_space.width.to_px();
+            return grid_size.percentage().as_fraction() * available_space.width.to_px().value();
         break;
     default:
         VERIFY_NOT_REACHED();
@@ -72,7 +72,7 @@ float GridFormattingContext::resolve_size(CSS::Size const& size, AvailableSize c
     if (size.is_percentage()) {
         if (!available_size.is_definite())
             return 0;
-        return available_size.to_px() * size.percentage().as_fraction();
+        return available_size.to_px().value() * size.percentage().as_fraction();
     }
     return 0;
 }
@@ -680,7 +680,7 @@ void GridFormattingContext::calculate_sizes_of_columns(Box const& box, Available
             break;
         case CSS::GridSize::Type::Percentage:
             if (available_space.width.is_definite())
-                grid_column.base_size = grid_column.min_track_sizing_function.percentage().as_fraction() * available_space.width.to_px();
+                grid_column.base_size = grid_column.min_track_sizing_function.percentage().as_fraction() * available_space.width.to_px().value();
             break;
         // - An intrinsic sizing function
         // Use an initial base size of zero.
@@ -704,7 +704,7 @@ void GridFormattingContext::calculate_sizes_of_columns(Box const& box, Available
             break;
         case CSS::GridSize::Type::Percentage:
             if (available_space.width.is_definite())
-                grid_column.growth_limit = grid_column.max_track_sizing_function.percentage().as_fraction() * available_space.width.to_px();
+                grid_column.growth_limit = grid_column.max_track_sizing_function.percentage().as_fraction() * available_space.width.to_px().value();
             break;
         // - A flexible sizing function
         // Use an initial growth limit of infinity.
@@ -783,7 +783,7 @@ void GridFormattingContext::calculate_sizes_of_columns(Box const& box, Available
         // the size of the item’s content, it is considered a type of intrinsic size contribution.
         float grid_column_width = 0;
         for (auto& box_of_column : boxes_of_column)
-            grid_column_width = max(grid_column_width, calculate_min_content_width(box_of_column));
+            grid_column_width = max(grid_column_width, calculate_min_content_width(box_of_column).value());
         grid_column.base_size = grid_column_width;
 
         // - For min-content maximums:
@@ -912,7 +912,7 @@ void GridFormattingContext::calculate_sizes_of_columns(Box const& box, Available
         grid_column.space_to_distribute = max(0, (grid_column.growth_limit == -1 ? grid_column.base_size : grid_column.growth_limit) - grid_column.base_size);
     }
 
-    auto remaining_free_space = available_space.width.is_definite() ? available_space.width.to_px() - sum_of_track_sizes : 0;
+    auto remaining_free_space = available_space.width.is_definite() ? available_space.width.to_px().value() - sum_of_track_sizes : 0;
     // 2.2. Distribute space up to limits: Find the item-incurred increase for each spanned track with an
     // affected size by: distributing the space equally among such tracks, freezing a track’s
     // item-incurred increase as its affected size + item-incurred increase reaches its limit (and
@@ -1030,7 +1030,7 @@ void GridFormattingContext::calculate_sizes_of_columns(Box const& box, Available
             sized_column_widths += grid_column.base_size;
     }
     // Let leftover space be the space to fill minus the base sizes of the non-flexible grid tracks.
-    double free_horizontal_space = available_space.width.is_definite() ? available_space.width.to_px() - sized_column_widths : 0;
+    double free_horizontal_space = available_space.width.is_definite() ? available_space.width.to_px().value() - sized_column_widths : 0;
 
     // If the free space is zero or if sizing the grid container under a min-content constraint:
     // The used flex fraction is zero.
@@ -1103,7 +1103,7 @@ void GridFormattingContext::calculate_sizes_of_columns(Box const& box, Available
             used_horizontal_space += grid_column.base_size;
     }
 
-    float remaining_horizontal_space = available_space.width.is_definite() ? available_space.width.to_px() - used_horizontal_space : 0;
+    float remaining_horizontal_space = available_space.width.is_definite() ? available_space.width.to_px().value() - used_horizontal_space : 0;
     auto count_of_auto_max_column_tracks = 0;
     for (auto& grid_column : m_grid_columns) {
         if (grid_column.max_track_sizing_function.is_length() && grid_column.max_track_sizing_function.length().is_auto())
@@ -1241,7 +1241,7 @@ void GridFormattingContext::calculate_sizes_of_rows(Box const& box)
         // the size of the item’s content, it is considered a type of intrinsic size contribution.
         float grid_row_height = 0;
         for (auto& positioned_box : positioned_boxes_of_row)
-            grid_row_height = max(grid_row_height, calculate_min_content_height(positioned_box.box, AvailableSize::make_definite(m_grid_columns[positioned_box.column].base_size)));
+            grid_row_height = max(grid_row_height, calculate_min_content_height(positioned_box.box, AvailableSize::make_definite(m_grid_columns[positioned_box.column].base_size)).value());
         grid_row.base_size = grid_row_height;
 
         // - For min-content maximums:
@@ -1770,7 +1770,7 @@ void GridFormattingContext::run(Box const& box, LayoutMode, AvailableSpace const
     m_automatic_content_height = total_y;
 }
 
-float GridFormattingContext::automatic_content_height() const
+CSSPixels GridFormattingContext::automatic_content_height() const
 {
     return m_automatic_content_height;
 }
@@ -1802,7 +1802,7 @@ float GridFormattingContext::get_free_space_x(AvailableSpace const& available_sp
     auto sum_base_sizes = 0;
     for (auto& grid_column : m_grid_columns)
         sum_base_sizes += grid_column.base_size;
-    return max(0, available_space.width.to_px() - sum_base_sizes);
+    return max(0, available_space.width.to_px().value() - sum_base_sizes);
 }
 
 float GridFormattingContext::get_free_space_y(Box const& box)
diff --git a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.h b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.h
index b70b819adc..65316519a9 100644
--- a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.h
+++ b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.h
@@ -37,7 +37,7 @@ public:
     ~GridFormattingContext();
 
     virtual void run(Box const&, LayoutMode, AvailableSpace const& available_space) override;
-    virtual float automatic_content_height() const override;
+    virtual CSSPixels automatic_content_height() const override;
 
 private:
     float m_automatic_content_height { 0 };
diff --git a/Userland/Libraries/LibWeb/Layout/InlineFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/InlineFormattingContext.cpp
index ad78181d36..59f7ce01db 100644
--- a/Userland/Libraries/LibWeb/Layout/InlineFormattingContext.cpp
+++ b/Userland/Libraries/LibWeb/Layout/InlineFormattingContext.cpp
@@ -44,7 +44,7 @@ float InlineFormattingContext::leftmost_x_offset_at(float y) const
     auto box_in_root_rect = content_box_rect_in_ancestor_coordinate_space(containing_block(), parent().root(), m_state);
     float y_in_root = box_in_root_rect.y() + y;
     auto space = parent().space_used_by_floats(y_in_root);
-    return space.left;
+    return space.left.value();
 }
 
 float InlineFormattingContext::available_space_for_line(float y) const
@@ -58,15 +58,15 @@ float InlineFormattingContext::available_space_for_line(float y) const
     space.left = space.left;
     space.right = min(m_available_space->width.to_px() - space.right, m_available_space->width.to_px());
 
-    return space.right - space.left;
+    return (space.right - space.left).value();
 }
 
-float InlineFormattingContext::automatic_content_width() const
+CSSPixels InlineFormattingContext::automatic_content_width() const
 {
     return m_automatic_content_width;
 }
 
-float InlineFormattingContext::automatic_content_height() const
+CSSPixels InlineFormattingContext::automatic_content_height() const
 {
     return m_automatic_content_height;
 }
@@ -117,8 +117,8 @@ void InlineFormattingContext::dimension_box_on_line(Box const& box, LayoutMode l
         if (is<SVGSVGBox>(box))
             (void)layout_inside(replaced, layout_mode, *m_available_space);
 
-        box_state.set_content_width(compute_width_for_replaced_element(m_state, replaced, *m_available_space));
-        box_state.set_content_height(compute_height_for_replaced_element(m_state, replaced, *m_available_space));
+        box_state.set_content_width(compute_width_for_replaced_element(m_state, replaced, *m_available_space).value());
+        box_state.set_content_height(compute_height_for_replaced_element(m_state, replaced, *m_available_space).value());
         return;
     }
 
@@ -138,7 +138,7 @@ void InlineFormattingContext::dimension_box_on_line(Box const& box, LayoutMode l
             - box_state.border_right
             - box_state.margin_right;
 
-        unconstrained_width = min(max(result.preferred_minimum_width, available_width), result.preferred_width);
+        unconstrained_width = min(max(result.preferred_minimum_width, available_width), result.preferred_width).value();
     } else {
         if (width_value.contains_percentage() && !m_available_space->width.is_definite()) {
             // NOTE: We can't resolve percentages yet. We'll have to wait until after inner layout.
@@ -190,11 +190,11 @@ void InlineFormattingContext::apply_justification_to_fragments(CSS::TextJustify
         break;
     }
 
-    float excess_horizontal_space = m_available_space->width.to_px() - line_box.width();
+    float excess_horizontal_space = m_available_space->width.to_px().value() - line_box.width();
 
     // Only justify the text if the excess horizontal space is less than or
     // equal to 10%, or if we are not looking at the last line box.
-    if (is_last_line && excess_horizontal_space / m_available_space->width.to_px() > text_justification_threshold)
+    if (is_last_line && excess_horizontal_space / m_available_space->width.to_px().value() > text_justification_threshold)
         return;
 
     float excess_horizontal_space_including_whitespace = excess_horizontal_space;
diff --git a/Userland/Libraries/LibWeb/Layout/InlineFormattingContext.h b/Userland/Libraries/LibWeb/Layout/InlineFormattingContext.h
index 03de64809a..38033eaded 100644
--- a/Userland/Libraries/LibWeb/Layout/InlineFormattingContext.h
+++ b/Userland/Libraries/LibWeb/Layout/InlineFormattingContext.h
@@ -24,8 +24,8 @@ public:
     BlockContainer const& containing_block() const { return static_cast<BlockContainer const&>(context_box()); }
 
     virtual void run(Box const&, LayoutMode, AvailableSpace const&) override;
-    virtual float automatic_content_height() const override;
-    virtual float automatic_content_width() const override;
+    virtual CSSPixels automatic_content_height() const override;
+    virtual CSSPixels automatic_content_width() const override;
 
     void dimension_box_on_line(Box const&, LayoutMode);
 
diff --git a/Userland/Libraries/LibWeb/Layout/SVGFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/SVGFormattingContext.cpp
index f15e1d31fe..476566e0eb 100644
--- a/Userland/Libraries/LibWeb/Layout/SVGFormattingContext.cpp
+++ b/Userland/Libraries/LibWeb/Layout/SVGFormattingContext.cpp
@@ -21,7 +21,7 @@ SVGFormattingContext::SVGFormattingContext(LayoutState& state, Box const& box, F
 
 SVGFormattingContext::~SVGFormattingContext() = default;
 
-float SVGFormattingContext::automatic_content_height() const
+CSSPixels SVGFormattingContext::automatic_content_height() const
 {
     return 0;
 }
diff --git a/Userland/Libraries/LibWeb/Layout/SVGFormattingContext.h b/Userland/Libraries/LibWeb/Layout/SVGFormattingContext.h
index 0d403d99a4..95bfc02798 100644
--- a/Userland/Libraries/LibWeb/Layout/SVGFormattingContext.h
+++ b/Userland/Libraries/LibWeb/Layout/SVGFormattingContext.h
@@ -17,7 +17,7 @@ public:
     ~SVGFormattingContext();
 
     virtual void run(Box const&, LayoutMode, AvailableSpace const&) override;
-    virtual float automatic_content_height() const override;
+    virtual CSSPixels automatic_content_height() const override;
 };
 
 }
diff --git a/Userland/Libraries/LibWeb/Layout/TableFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/TableFormattingContext.cpp
index 07134771a8..e73ad35cac 100644
--- a/Userland/Libraries/LibWeb/Layout/TableFormattingContext.cpp
+++ b/Userland/Libraries/LibWeb/Layout/TableFormattingContext.cpp
@@ -121,11 +121,11 @@ void TableFormattingContext::compute_table_measures()
         auto min_content_width = calculate_min_content_width(cell.box);
         auto max_content_width = calculate_max_content_width(cell.box);
 
-        float min_width = min_content_width;
+        float min_width = min_content_width.value();
         if (!computed_values.min_width().is_auto())
             min_width = max(min_width, computed_values.min_width().resolved(cell.box, width_of_containing_block_as_length).to_px(cell.box));
 
-        float max_width = computed_values.width().is_auto() ? max_content_width : width;
+        float max_width = computed_values.width().is_auto() ? max_content_width.value() : width;
         if (!computed_values.max_width().is_none())
             max_width = min(max_width, computed_values.max_width().resolved(cell.box, width_of_containing_block_as_length).to_px(cell.box));
 
@@ -281,7 +281,7 @@ void TableFormattingContext::run(Box const& box, LayoutMode, AvailableSpace cons
         cell_state.set_content_width(span_width - cell_state.border_box_left() - cell_state.border_box_right());
         auto independent_formatting_context = layout_inside(cell.box, LayoutMode::Normal, cell_state.available_inner_space_or_constraints_from(available_space));
         VERIFY(independent_formatting_context);
-        cell_state.set_content_height(independent_formatting_context->automatic_content_height());
+        cell_state.set_content_height(independent_formatting_context->automatic_content_height().value());
         independent_formatting_context->parent_context_did_dimension_child_root_box();
 
         cell.baseline = box_baseline(m_state, cell.box);
@@ -364,7 +364,7 @@ void TableFormattingContext::run(Box const& box, LayoutMode, AvailableSpace cons
     m_automatic_content_height = total_content_height;
 }
 
-float TableFormattingContext::automatic_content_height() const
+CSSPixels TableFormattingContext::automatic_content_height() const
 {
     return m_automatic_content_height;
 }
diff --git a/Userland/Libraries/LibWeb/Layout/TableFormattingContext.h b/Userland/Libraries/LibWeb/Layout/TableFormattingContext.h
index 7b14eec164..836b9591f6 100644
--- a/Userland/Libraries/LibWeb/Layout/TableFormattingContext.h
+++ b/Userland/Libraries/LibWeb/Layout/TableFormattingContext.h
@@ -17,7 +17,7 @@ public:
     ~TableFormattingContext();
 
     virtual void run(Box const&, LayoutMode, AvailableSpace const&) override;
-    virtual float automatic_content_height() const override;
+    virtual CSSPixels automatic_content_height() const override;
 
 private:
     void calculate_row_column_grid(Box const&);