LibWeb: Use CSSPixelFraction to represent aspect ratios

This allows us to retain perfect precision for aspect ratios derived
from either the intrinsic sizes of replaced elements, or the
`aspect-ratio` CSS property.

Userland/Libraries/LibWeb/Layout/Box.cpp

@@ -87,12 +87,12 @@ Painting::PaintableBox const* Box::paintable_box() const
     return static_cast<Painting::PaintableBox const*>(Node::paintable());
 }
 
-Optional<float> Box::preferred_aspect_ratio() const
+Optional<CSSPixelFraction> Box::preferred_aspect_ratio() const
 {
     auto computed_aspect_ratio = computed_values().aspect_ratio();
     if (computed_aspect_ratio.use_natural_aspect_ratio_if_available && natural_aspect_ratio().has_value())
         return natural_aspect_ratio();
-    return computed_aspect_ratio.preferred_ratio.map([](CSS::Ratio const& ratio) { return static_cast<float>(ratio.value()); });
+    return computed_aspect_ratio.preferred_ratio.map([](CSS::Ratio const& ratio) { return CSSPixelFraction(CSSPixels(ratio.numerator()), CSSPixels(ratio.denominator())); });
 }
 
 }

Userland/Libraries/LibWeb/Layout/Box.h

@@ -32,7 +32,7 @@ public:
     // https://www.w3.org/TR/css-images-3/#natural-dimensions
     Optional<CSSPixels> natural_width() const { return m_natural_width; }
     Optional<CSSPixels> natural_height() const { return m_natural_height; }
-    Optional<float> natural_aspect_ratio() const { return m_natural_aspect_ratio; }
+    Optional<CSSPixelFraction> natural_aspect_ratio() const { return m_natural_aspect_ratio; }
 
     bool has_natural_width() const { return natural_width().has_value(); }
     bool has_natural_height() const { return natural_height().has_value(); }
@@ -40,10 +40,10 @@ public:
 
     void set_natural_width(Optional<CSSPixels> width) { m_natural_width = width; }
     void set_natural_height(Optional<CSSPixels> height) { m_natural_height = height; }
-    void set_natural_aspect_ratio(Optional<float> ratio) { m_natural_aspect_ratio = ratio; }
+    void set_natural_aspect_ratio(Optional<CSSPixelFraction> ratio) { m_natural_aspect_ratio = ratio; }
 
     // https://www.w3.org/TR/css-sizing-4/#preferred-aspect-ratio
-    Optional<float> preferred_aspect_ratio() const;
+    Optional<CSSPixelFraction> preferred_aspect_ratio() const;
     bool has_preferred_aspect_ratio() const { return preferred_aspect_ratio().has_value(); }
 
     virtual ~Box() override;
@@ -65,7 +65,7 @@ private:
 
     Optional<CSSPixels> m_natural_width;
     Optional<CSSPixels> m_natural_height;
-    Optional<float> m_natural_aspect_ratio;
+    Optional<CSSPixelFraction> m_natural_aspect_ratio;
 };
 
 template<>

Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp

@@ -537,18 +537,18 @@ CSS::FlexBasis FlexFormattingContext::used_flex_basis_for_item(FlexItem const& i
     return flex_basis;
 }
 
-CSSPixels FlexFormattingContext::calculate_main_size_from_cross_size_and_aspect_ratio(CSSPixels cross_size, double aspect_ratio) const
+CSSPixels FlexFormattingContext::calculate_main_size_from_cross_size_and_aspect_ratio(CSSPixels cross_size, CSSPixelFraction aspect_ratio) const
 {
     if (is_row_layout())
-        return CSSPixels::nearest_value_for(cross_size * aspect_ratio);
-    return CSSPixels::nearest_value_for(cross_size / aspect_ratio);
+        return cross_size * aspect_ratio;
+    return cross_size / aspect_ratio;
 }
 
-CSSPixels FlexFormattingContext::calculate_cross_size_from_main_size_and_aspect_ratio(CSSPixels main_size, double aspect_ratio) const
+CSSPixels FlexFormattingContext::calculate_cross_size_from_main_size_and_aspect_ratio(CSSPixels main_size, CSSPixelFraction aspect_ratio) const
 {
     if (is_row_layout())
-        return CSSPixels::nearest_value_for(main_size / aspect_ratio);
-    return CSSPixels::nearest_value_for(main_size * aspect_ratio);
+        return main_size / aspect_ratio;
+    return main_size * aspect_ratio;
 }
 
 // This function takes a size in the main axis and adjusts it according to the aspect ratio of the box

Userland/Libraries/LibWeb/Layout/FlexFormattingContext.h

@@ -35,8 +35,8 @@ private:
     [[nodiscard]] bool should_treat_cross_size_as_auto(Box const&) const;
 
     [[nodiscard]] CSSPixels adjust_main_size_through_aspect_ratio_for_cross_size_min_max_constraints(Box const&, CSSPixels main_size, CSS::Size const& min_cross_size, CSS::Size const& max_cross_size) const;
-    [[nodiscard]] CSSPixels calculate_main_size_from_cross_size_and_aspect_ratio(CSSPixels cross_size, double aspect_ratio) const;
-    [[nodiscard]] CSSPixels calculate_cross_size_from_main_size_and_aspect_ratio(CSSPixels main_size, double aspect_ratio) const;
+    [[nodiscard]] CSSPixels calculate_main_size_from_cross_size_and_aspect_ratio(CSSPixels cross_size, CSSPixelFraction aspect_ratio) const;
+    [[nodiscard]] CSSPixels calculate_cross_size_from_main_size_and_aspect_ratio(CSSPixels main_size, CSSPixelFraction aspect_ratio) const;
 
     void dump_items() const;
 

Userland/Libraries/LibWeb/Layout/FormattingContext.cpp

@@ -404,7 +404,7 @@ CSSPixels FormattingContext::tentative_width_for_replaced_element(Box const& box
     //     (used height) * (intrinsic ratio)
     if ((computed_height.is_auto() && computed_width.is_auto() && !box.has_natural_width() && box.has_natural_height() && box.has_preferred_aspect_ratio())
         || (computed_width.is_auto() && !computed_height.is_auto() && box.has_preferred_aspect_ratio())) {
-        return compute_height_for_replaced_element(box, available_space).scaled(static_cast<double>(box.preferred_aspect_ratio().value()));
+        return compute_height_for_replaced_element(box, available_space) * box.preferred_aspect_ratio().value();
     }
 
     // If 'height' and 'width' both have computed values of 'auto' and the element has an intrinsic ratio but no intrinsic height or width,
@@ -498,7 +498,7 @@ CSSPixels FormattingContext::tentative_height_for_replaced_element(Box const& bo
     //
     //     (used width) / (intrinsic ratio)
     if (computed_height.is_auto() && box.has_preferred_aspect_ratio())
-        return CSSPixels::nearest_value_for(m_state.get(box).content_width() / static_cast<double>(box.preferred_aspect_ratio().value()));
+        return m_state.get(box).content_width() / box.preferred_aspect_ratio().value();
 
     // Otherwise, if 'height' has a computed value of 'auto', and the element has an intrinsic height, then that intrinsic height is the used value of 'height'.
     if (computed_height.is_auto() && box.has_natural_height())
@@ -1407,7 +1407,7 @@ CSSPixels FormattingContext::calculate_min_content_height(Layout::Box const& box
 CSSPixels FormattingContext::calculate_max_content_height(Layout::Box const& box, CSSPixels width) const
 {
     if (box.has_preferred_aspect_ratio())
-        return CSSPixels::nearest_value_for(width / static_cast<double>(*box.preferred_aspect_ratio()));
+        return width / *box.preferred_aspect_ratio();
 
     if (box.has_natural_height())
         return *box.natural_height();

Userland/Libraries/LibWeb/Layout/ImageProvider.h

@@ -17,7 +17,7 @@ public:
 
     virtual Optional<CSSPixels> intrinsic_width() const = 0;
     virtual Optional<CSSPixels> intrinsic_height() const = 0;
-    virtual Optional<float> intrinsic_aspect_ratio() const = 0;
+    virtual Optional<CSSPixelFraction> intrinsic_aspect_ratio() const = 0;
 
     virtual RefPtr<Gfx::Bitmap const> current_image_bitmap(Gfx::IntSize) const = 0;
     virtual void set_visible_in_viewport(bool) = 0;

Userland/Libraries/LibWeb/Layout/SVGSVGBox.cpp

@@ -42,7 +42,7 @@ void SVGSVGBox::prepare_for_replaced_layout()
     set_natural_aspect_ratio(calculate_intrinsic_aspect_ratio());
 }
 
-Optional<float> SVGSVGBox::calculate_intrinsic_aspect_ratio() const
+Optional<CSSPixelFraction> SVGSVGBox::calculate_intrinsic_aspect_ratio() const
 {
     // https://www.w3.org/TR/SVG2/coords.html#SizingSVGInCSS
     // The intrinsic aspect ratio must be calculated using the following algorithm. If the algorithm returns null, then there is no intrinsic aspect ratio.
@@ -57,7 +57,7 @@ Optional<float> SVGSVGBox::calculate_intrinsic_aspect_ratio() const
 
         if (width != 0 && height != 0) {
             // 1. return width / height
-            return width.to_double() / height.to_double();
+            return width / height;
         }
 
         return {};
@@ -73,7 +73,7 @@ Optional<float> SVGSVGBox::calculate_intrinsic_aspect_ratio() const
         auto const& viewbox = dom_node().view_box().value();
 
         // 2. return viewbox.width / viewbox.height
-        return viewbox.width / viewbox.height;
+        return CSSPixels::nearest_value_for(viewbox.width) / CSSPixels::nearest_value_for(viewbox.height);
     }
 
     // 4. return null

Userland/Libraries/LibWeb/Layout/SVGSVGBox.h

@@ -30,7 +30,7 @@ public:
 private:
     virtual bool is_svg_svg_box() const final { return true; }
 
-    [[nodiscard]] Optional<float> calculate_intrinsic_aspect_ratio() const;
+    [[nodiscard]] Optional<CSSPixelFraction> calculate_intrinsic_aspect_ratio() const;
 };
 
 template<>

Userland/Libraries/LibWeb/Layout/VideoBox.cpp

@@ -37,11 +37,11 @@ HTML::HTMLVideoElement const& VideoBox::dom_node() const
 
 void VideoBox::prepare_for_replaced_layout()
 {
-    auto width = static_cast<float>(dom_node().video_width());
-    set_natural_width(CSSPixels(width));
+    CSSPixels width = dom_node().video_width();
+    set_natural_width(width);
 
-    auto height = static_cast<float>(dom_node().video_height());
-    set_natural_height(CSSPixels(height));
+    CSSPixels height = dom_node().video_height();
+    set_natural_height(height);
 
     if (width != 0 && height != 0)
         set_natural_aspect_ratio(width / height);