LibWeb: Move "natural size" concept into Layout::Box

Having this here instead of in ReplacedBox means we can access it when
figuring out what the "preferred aspect ratio" is.

There's some inconsistency between specs about what this is called, but
they're moving towards referring to this as "natural width/height/
aspect-ratio", so let's copy that terminology.

Userland/Libraries/LibWeb/Layout/Box.h

@@ -28,13 +28,18 @@ public:
 
     bool is_body() const;
 
-    virtual Optional<CSSPixels> intrinsic_width() const { return {}; }
-    virtual Optional<CSSPixels> intrinsic_height() const { return {}; }
-    virtual Optional<float> intrinsic_aspect_ratio() const { return {}; }
+    // 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; }
 
-    bool has_intrinsic_width() const { return intrinsic_width().has_value(); }
-    bool has_intrinsic_height() const { return intrinsic_height().has_value(); }
-    bool has_intrinsic_aspect_ratio() const { return intrinsic_aspect_ratio().has_value(); }
+    bool has_natural_width() const { return natural_width().has_value(); }
+    bool has_natural_height() const { return natural_height().has_value(); }
+    bool has_natural_aspect_ratio() const { return natural_aspect_ratio().has_value(); }
+
+    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; }
 
     virtual ~Box() override;
 
@@ -56,6 +61,10 @@ private:
     virtual bool is_box() const final { return true; }
 
     CSSPixelPoint m_scroll_offset;
+
+    Optional<CSSPixels> m_natural_width;
+    Optional<CSSPixels> m_natural_height;
+    Optional<float> m_natural_aspect_ratio;
 };
 
 template<>

Userland/Libraries/LibWeb/Layout/ButtonBox.cpp

@@ -25,8 +25,8 @@ void ButtonBox::prepare_for_replaced_layout()
     // value attribute. This is not the case with <button />, which contains
     // its contents normally.
     if (is<HTML::HTMLInputElement>(dom_node())) {
-        set_intrinsic_width(font().width(static_cast<HTML::HTMLInputElement&>(dom_node()).value()));
-        set_intrinsic_height(font().pixel_size_rounded_up());
+        set_natural_width(font().width(static_cast<HTML::HTMLInputElement&>(dom_node()).value()));
+        set_natural_height(font().pixel_size_rounded_up());
     }
 }
 

Userland/Libraries/LibWeb/Layout/CanvasBox.cpp

@@ -19,8 +19,8 @@ CanvasBox::~CanvasBox() = default;
 
 void CanvasBox::prepare_for_replaced_layout()
 {
-    set_intrinsic_width(dom_node().width());
-    set_intrinsic_height(dom_node().height());
+    set_natural_width(dom_node().width());
+    set_natural_height(dom_node().height());
 }
 
 JS::GCPtr<Painting::Paintable> CanvasBox::create_paintable() const

Userland/Libraries/LibWeb/Layout/CheckBox.cpp

@@ -16,8 +16,8 @@ namespace Web::Layout {
 CheckBox::CheckBox(DOM::Document& document, HTML::HTMLInputElement& element, NonnullRefPtr<CSS::StyleProperties> style)
     : FormAssociatedLabelableNode(document, element, move(style))
 {
-    set_intrinsic_width(13);
-    set_intrinsic_height(13);
+    set_natural_width(13);
+    set_natural_height(13);
 }
 
 CheckBox::~CheckBox() = default;

Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp

@@ -590,12 +590,12 @@ CSSPixels FlexFormattingContext::adjust_main_size_through_aspect_ratio_for_cross
 {
     if (!max_cross_size.is_none()) {
         auto max_cross_size_px = max_cross_size.to_px(box, !is_row_layout() ? m_flex_container_state.content_width() : m_flex_container_state.content_height());
-        main_size = min(main_size, calculate_main_size_from_cross_size_and_aspect_ratio(max_cross_size_px, box.intrinsic_aspect_ratio().value()));
+        main_size = min(main_size, calculate_main_size_from_cross_size_and_aspect_ratio(max_cross_size_px, box.natural_aspect_ratio().value()));
     }
 
     if (!min_cross_size.is_auto()) {
         auto min_cross_size_px = min_cross_size.to_px(box, !is_row_layout() ? m_flex_container_state.content_width() : m_flex_container_state.content_height());
-        main_size = max(main_size, calculate_main_size_from_cross_size_and_aspect_ratio(min_cross_size_px, box.intrinsic_aspect_ratio().value()));
+        main_size = max(main_size, calculate_main_size_from_cross_size_and_aspect_ratio(min_cross_size_px, box.natural_aspect_ratio().value()));
     }
 
     return main_size;
@@ -647,13 +647,13 @@ void FlexFormattingContext::determine_flex_base_size_and_hypothetical_main_size(
         //    - an intrinsic aspect ratio,
         //    - a used flex basis of content, and
         //    - a definite cross size,
-        if (item.box->has_intrinsic_aspect_ratio()
+        if (item.box->has_natural_aspect_ratio()
             && item.used_flex_basis.type == CSS::FlexBasis::Content
             && has_definite_cross_size(item.box)) {
             // flex_base_size is calculated from definite cross size and intrinsic aspect ratio
             return adjust_main_size_through_aspect_ratio_for_cross_size_min_max_constraints(
                 item.box,
-                calculate_main_size_from_cross_size_and_aspect_ratio(inner_cross_size(item.box), item.box->intrinsic_aspect_ratio().value()),
+                calculate_main_size_from_cross_size_and_aspect_ratio(inner_cross_size(item.box), item.box->natural_aspect_ratio().value()),
                 computed_cross_min_size(item.box),
                 computed_cross_max_size(item.box));
         }
@@ -713,7 +713,7 @@ void FlexFormattingContext::determine_flex_base_size_and_hypothetical_main_size(
 
     // AD-HOC: This is not mentioned in the spec, but if the item has an aspect ratio,
     //         we may need to adjust the main size in response to cross size min/max constraints.
-    if (item.box->has_intrinsic_aspect_ratio()) {
+    if (item.box->has_natural_aspect_ratio()) {
         item.flex_base_size = adjust_main_size_through_aspect_ratio_for_cross_size_min_max_constraints(child_box, item.flex_base_size, computed_cross_min_size(child_box), computed_cross_max_size(child_box));
     }
 
@@ -762,7 +762,7 @@ CSSPixels FlexFormattingContext::content_size_suggestion(FlexItem const& item) c
 {
     auto suggestion = calculate_min_content_main_size(item);
 
-    if (item.box->has_intrinsic_aspect_ratio()) {
+    if (item.box->has_natural_aspect_ratio()) {
         suggestion = adjust_main_size_through_aspect_ratio_for_cross_size_min_max_constraints(item.box, suggestion, computed_cross_min_size(item.box), computed_cross_max_size(item.box));
     }
 
@@ -775,8 +775,8 @@ Optional<CSSPixels> FlexFormattingContext::transferred_size_suggestion(FlexItem
     // If the item has a preferred aspect ratio and its preferred cross size is definite,
     // then the transferred size suggestion is that size
     // (clamped by its minimum and maximum cross sizes if they are definite), converted through the aspect ratio.
-    if (item.box->has_intrinsic_aspect_ratio() && has_definite_cross_size(item.box)) {
-        auto aspect_ratio = item.box->intrinsic_aspect_ratio().value();
+    if (item.box->has_natural_aspect_ratio() && has_definite_cross_size(item.box)) {
+        auto aspect_ratio = item.box->natural_aspect_ratio().value();
         return adjust_main_size_through_aspect_ratio_for_cross_size_min_max_constraints(
             item.box,
             calculate_main_size_from_cross_size_and_aspect_ratio(inner_cross_size(item.box), aspect_ratio),

Userland/Libraries/LibWeb/Layout/FormattingContext.cpp

@@ -378,8 +378,8 @@ CSSPixels FormattingContext::tentative_width_for_replaced_element(ReplacedBox co
 
     // 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'.
-    if (computed_height.is_auto() && computed_width.is_auto() && box.has_intrinsic_width())
-        return box.intrinsic_width().value();
+    if (computed_height.is_auto() && computed_width.is_auto() && box.has_natural_width())
+        return box.natural_width().value();
 
     // If 'height' and 'width' both have computed values of 'auto' and the element has no intrinsic width,
     // but does have an intrinsic height and intrinsic ratio;
@@ -387,22 +387,22 @@ CSSPixels FormattingContext::tentative_width_for_replaced_element(ReplacedBox co
     // 'height' has some other computed value, and the element does have an intrinsic ratio; then the used value of 'width' is:
     //
     //     (used height) * (intrinsic ratio)
-    if ((computed_height.is_auto() && computed_width.is_auto() && !box.has_intrinsic_width() && box.has_intrinsic_height() && box.has_intrinsic_aspect_ratio())
-        || (computed_width.is_auto() && !computed_height.is_auto() && box.has_intrinsic_aspect_ratio())) {
-        return compute_height_for_replaced_element(box, available_space) * static_cast<double>(box.intrinsic_aspect_ratio().value());
+    if ((computed_height.is_auto() && computed_width.is_auto() && !box.has_natural_width() && box.has_natural_height() && box.has_natural_aspect_ratio())
+        || (computed_width.is_auto() && !computed_height.is_auto() && box.has_natural_aspect_ratio())) {
+        return compute_height_for_replaced_element(box, available_space) * static_cast<double>(box.natural_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,
     // then the used value of 'width' is undefined in CSS 2.2. However, it is suggested that, if the containing block's width does not itself
     // depend on the replaced element's width, then the used value of 'width' is calculated from the constraint equation used for block-level,
     // non-replaced elements in normal flow.
-    if (computed_height.is_auto() && computed_width.is_auto() && !box.has_intrinsic_width() && !box.has_intrinsic_height() && box.has_intrinsic_aspect_ratio()) {
+    if (computed_height.is_auto() && computed_width.is_auto() && !box.has_natural_width() && !box.has_natural_height() && box.has_natural_aspect_ratio()) {
         return calculate_stretch_fit_width(box, available_space.width);
     }
 
     // Otherwise, if 'width' has a computed value of 'auto', and the element has an intrinsic width, then that intrinsic width is the used value of 'width'.
-    if (computed_width.is_auto() && box.has_intrinsic_width())
-        return box.intrinsic_width().value();
+    if (computed_width.is_auto() && box.has_natural_width())
+        return box.natural_width().value();
 
     // Otherwise, if 'width' has a computed value of 'auto', but none of the conditions above are met, then the used value of 'width' becomes 300px.
     // If 300px is too wide to fit the device, UAs should use the width of the largest rectangle that has a 2:1 ratio and fits the device instead.
@@ -443,7 +443,7 @@ CSSPixels FormattingContext::compute_width_for_replaced_element(ReplacedBox cons
     // 1. The tentative used width is calculated (without 'min-width' and 'max-width')
     auto used_width = tentative_width_for_replaced_element(box, computed_width, available_space);
 
-    if (computed_width.is_auto() && computed_height.is_auto() && box.has_intrinsic_aspect_ratio()) {
+    if (computed_width.is_auto() && computed_height.is_auto() && box.has_natural_aspect_ratio()) {
         CSSPixels w = used_width;
         CSSPixels h = tentative_height_for_replaced_element(box, computed_height, available_space);
         used_width = solve_replaced_size_constraint(w, h, box).width();
@@ -477,18 +477,18 @@ CSSPixels FormattingContext::tentative_height_for_replaced_element(ReplacedBox c
 {
     // 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'.
-    if (should_treat_width_as_auto(box, available_space) && should_treat_height_as_auto(box, available_space) && box.has_intrinsic_height())
-        return box.intrinsic_height().value();
+    if (should_treat_width_as_auto(box, available_space) && should_treat_height_as_auto(box, available_space) && box.has_natural_height())
+        return box.natural_height().value();
 
     // Otherwise, if 'height' has a computed value of 'auto', and the element has an intrinsic ratio then the used value of 'height' is:
     //
     //     (used width) / (intrinsic ratio)
-    if (computed_height.is_auto() && box.has_intrinsic_aspect_ratio())
-        return m_state.get(box).content_width() / static_cast<double>(box.intrinsic_aspect_ratio().value());
+    if (computed_height.is_auto() && box.has_natural_aspect_ratio())
+        return m_state.get(box).content_width() / static_cast<double>(box.natural_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_intrinsic_height())
-        return box.intrinsic_height().value();
+    if (computed_height.is_auto() && box.has_natural_height())
+        return box.natural_height().value();
 
     // Otherwise, if 'height' has a computed value of 'auto', but none of the conditions above are met,
     // then the used value of 'height' must be set to the height of the largest rectangle that has a 2:1 ratio, has a height not greater than 150px,
@@ -518,7 +518,7 @@ CSSPixels FormattingContext::compute_height_for_replaced_element(ReplacedBox con
     // use the algorithm under 'Minimum and maximum widths'
     // https://www.w3.org/TR/CSS22/visudet.html#min-max-widths
     // to find the used width and height.
-    if (computed_width.is_auto() && computed_height.is_auto() && box.has_intrinsic_aspect_ratio()) {
+    if (computed_width.is_auto() && computed_height.is_auto() && box.has_natural_aspect_ratio()) {
         CSSPixels w = tentative_width_for_replaced_element(box, computed_width, available_space);
         CSSPixels h = used_height;
         used_height = solve_replaced_size_constraint(w, h, box).height();
@@ -1150,8 +1150,8 @@ CSSPixels FormattingContext::calculate_fit_content_height(Layout::Box const& box
 
 CSSPixels FormattingContext::calculate_min_content_width(Layout::Box const& box) const
 {
-    if (box.has_intrinsic_width())
-        return *box.intrinsic_width();
+    if (box.has_natural_width())
+        return *box.natural_width();
 
     auto& root_state = m_state.m_root;
 
@@ -1188,8 +1188,8 @@ CSSPixels FormattingContext::calculate_min_content_width(Layout::Box const& box)
 
 CSSPixels FormattingContext::calculate_max_content_width(Layout::Box const& box) const
 {
-    if (box.has_intrinsic_width())
-        return *box.intrinsic_width();
+    if (box.has_natural_width())
+        return *box.natural_width();
 
     auto& root_state = m_state.m_root;
 
@@ -1231,8 +1231,8 @@ CSSPixels FormattingContext::calculate_min_content_height(Layout::Box const& box
     if (box.is_block_container() || box.display().is_table_inside())
         return calculate_max_content_height(box, available_width);
 
-    if (box.has_intrinsic_height())
-        return *box.intrinsic_height();
+    if (box.has_natural_height())
+        return *box.natural_height();
 
     bool is_cacheable = available_width.is_definite() || available_width.is_intrinsic_sizing_constraint();
 
@@ -1283,11 +1283,11 @@ CSSPixels FormattingContext::calculate_min_content_height(Layout::Box const& box
 
 CSSPixels FormattingContext::calculate_max_content_height(Layout::Box const& box, AvailableSize const& available_width) const
 {
-    if (box.has_intrinsic_aspect_ratio() && available_width.is_definite())
-        return available_width.to_px() / static_cast<double>(*box.intrinsic_aspect_ratio());
+    if (box.has_natural_aspect_ratio() && available_width.is_definite())
+        return available_width.to_px() / static_cast<double>(*box.natural_aspect_ratio());
 
-    if (box.has_intrinsic_height())
-        return *box.intrinsic_height();
+    if (box.has_natural_height())
+        return *box.natural_height();
 
     bool is_cacheable = available_width.is_definite() || available_width.is_intrinsic_sizing_constraint();
 

Userland/Libraries/LibWeb/Layout/FrameBox.cpp

@@ -24,8 +24,8 @@ void FrameBox::prepare_for_replaced_layout()
     VERIFY(dom_node().nested_browsing_context());
 
     // FIXME: Do proper error checking, etc.
-    set_intrinsic_width(dom_node().attribute(HTML::AttributeNames::width).to_int().value_or(300));
-    set_intrinsic_height(dom_node().attribute(HTML::AttributeNames::height).to_int().value_or(150));
+    set_natural_width(dom_node().attribute(HTML::AttributeNames::width).to_int().value_or(300));
+    set_natural_height(dom_node().attribute(HTML::AttributeNames::height).to_int().value_or(150));
 }
 
 void FrameBox::did_set_content_size()

Userland/Libraries/LibWeb/Layout/ImageBox.cpp

@@ -23,9 +23,9 @@ ImageBox::~ImageBox() = default;
 
 void ImageBox::prepare_for_replaced_layout()
 {
-    set_intrinsic_width(m_image_provider.intrinsic_width());
-    set_intrinsic_height(m_image_provider.intrinsic_height());
-    set_intrinsic_aspect_ratio(m_image_provider.intrinsic_aspect_ratio());
+    set_natural_width(m_image_provider.intrinsic_width());
+    set_natural_height(m_image_provider.intrinsic_height());
+    set_natural_aspect_ratio(m_image_provider.intrinsic_aspect_ratio());
 
     if (renders_as_alt_text()) {
         auto& image_element = verify_cast<HTML::HTMLImageElement>(dom_node());
@@ -37,11 +37,11 @@ void ImageBox::prepare_for_replaced_layout()
             m_cached_alt_text_width = font.width(alt);
         alt_text_width = m_cached_alt_text_width.value();
 
-        set_intrinsic_width(alt_text_width + 16);
-        set_intrinsic_height(font.pixel_size() + 16);
+        set_natural_width(alt_text_width + 16);
+        set_natural_height(font.pixel_size() + 16);
     }
 
-    if (!has_intrinsic_width() && !has_intrinsic_height()) {
+    if (!has_natural_width() && !has_natural_height()) {
         // FIXME: Do something.
     }
 }

Userland/Libraries/LibWeb/Layout/Progress.cpp

@@ -12,7 +12,7 @@ namespace Web::Layout {
 Progress::Progress(DOM::Document& document, HTML::HTMLProgressElement& element, NonnullRefPtr<CSS::StyleProperties> style)
     : LabelableNode(document, element, move(style))
 {
-    set_intrinsic_height(12);
+    set_natural_height(12);
 }
 
 Progress::~Progress() = default;

Userland/Libraries/LibWeb/Layout/RadioButton.cpp

@@ -14,9 +14,9 @@ namespace Web::Layout {
 RadioButton::RadioButton(DOM::Document& document, HTML::HTMLInputElement& element, NonnullRefPtr<CSS::StyleProperties> style)
     : FormAssociatedLabelableNode(document, element, move(style))
 {
-    set_intrinsic_width(12);
-    set_intrinsic_height(12);
-    set_intrinsic_aspect_ratio(1);
+    set_natural_width(12);
+    set_natural_height(12);
+    set_natural_aspect_ratio(1);
 }
 
 RadioButton::~RadioButton() = default;

Userland/Libraries/LibWeb/Layout/ReplacedBox.h

@@ -18,17 +18,9 @@ public:
     ReplacedBox(DOM::Document&, DOM::Element&, NonnullRefPtr<CSS::StyleProperties>);
     virtual ~ReplacedBox() override;
 
-    const DOM::Element& dom_node() const { return verify_cast<DOM::Element>(*Node::dom_node()); }
+    DOM::Element const& dom_node() const { return verify_cast<DOM::Element>(*Node::dom_node()); }
     DOM::Element& dom_node() { return verify_cast<DOM::Element>(*Node::dom_node()); }
 
-    virtual Optional<CSSPixels> intrinsic_width() const final { return m_intrinsic_width; }
-    virtual Optional<CSSPixels> intrinsic_height() const final { return m_intrinsic_height; }
-    virtual Optional<float> intrinsic_aspect_ratio() const final { return m_intrinsic_aspect_ratio; }
-
-    void set_intrinsic_width(Optional<CSSPixels> width) { m_intrinsic_width = width; }
-    void set_intrinsic_height(Optional<CSSPixels> height) { m_intrinsic_height = height; }
-    void set_intrinsic_aspect_ratio(Optional<float> ratio) { m_intrinsic_aspect_ratio = ratio; }
-
     virtual void prepare_for_replaced_layout() { }
 
     virtual bool can_have_children() const override { return false; }

Userland/Libraries/LibWeb/Layout/SVGSVGBox.cpp

@@ -31,15 +31,15 @@ void SVGSVGBox::prepare_for_replaced_layout()
     // 'auto' and percentage lengths must not be used to determine an intrinsic width or intrinsic height.
     auto const& computed_width = computed_values().width();
     if (computed_width.is_length() && !computed_width.contains_percentage()) {
-        set_intrinsic_width(computed_width.to_px(*this, 0));
+        set_natural_width(computed_width.to_px(*this, 0));
     }
 
     auto const& computed_height = computed_values().height();
     if (computed_height.is_length() && !computed_height.contains_percentage()) {
-        set_intrinsic_height(computed_height.to_px(*this, 0));
+        set_natural_height(computed_height.to_px(*this, 0));
     }
 
-    set_intrinsic_aspect_ratio(calculate_intrinsic_aspect_ratio());
+    set_natural_aspect_ratio(calculate_intrinsic_aspect_ratio());
 }
 
 Optional<float> SVGSVGBox::calculate_intrinsic_aspect_ratio() const

Userland/Libraries/LibWeb/Layout/VideoBox.cpp

@@ -48,15 +48,15 @@ int VideoBox::preferred_height() const
 void VideoBox::prepare_for_replaced_layout()
 {
     auto width = static_cast<float>(dom_node().video_width());
-    set_intrinsic_width(width);
+    set_natural_width(width);
 
     auto height = static_cast<float>(dom_node().video_height());
-    set_intrinsic_height(height);
+    set_natural_height(height);
 
     if (width != 0 && height != 0)
-        set_intrinsic_aspect_ratio(width / height);
+        set_natural_aspect_ratio(width / height);
     else
-        set_intrinsic_aspect_ratio({});
+        set_natural_aspect_ratio({});
 }
 
 void VideoBox::browsing_context_did_set_viewport_rect(CSSPixelRect const&)