LibWeb: Harden replaced intrinsic sizing

Preserve the 300px fallback when cyclic minimum widths resolve
against zero, and use it for ratio-less min-content sizing.

Compress calculated cyclic preferred and maximum sizes through the
zero-resolved minimum contribution. Size normal-aligned leaf replaced
grid items with replaced rules even when they lack natural dimensions,
while retaining axis-specific stretching for replaced boxes with
children.

Resolve percentage block constraints against the final grid area.
Add a 58-case matrix covering both axes, partial intrinsic data,
ratio sources, calculations, box sizing, and conflicting constraints.

Author: awesomekling

Libraries/LibWeb/Layout/FormattingContext.cpp

@@ -189,8 +189,6 @@ static Optional<CSSPixels> max_content_size_for_replaced_element_without_natural
     // If it has no preferred aspect ratio:
     // For both the min-content size and max-content size:
     // If the box has a <length> as its computed minimum size (min-width/min-height) in that dimension, use that size.
-    if (is_width && constraints.minimum_width.has_value())
-        return constraints.minimum_width.value();
     auto const& min_size = is_width ? box.computed_values().min_width() : box.computed_values().min_height();
     if (min_size.is_length_percentage() && !min_size.contains_percentage())
         return min_size.to_px(0);
@@ -2814,15 +2812,26 @@ CSSPixels FormattingContext::calculate_min_content_width(Layout::Box const& box,
         // FIXME: If the box also has a preferred aspect ratio, then this min-content contribution is
         //        floored by any <length-percentage> minimum size from the opposite axis—resolving any
         //        such percentage against zero—transferred through the preferred aspect ratio.
-        if (auto const& width = box.computed_values().width(); width.is_percentage())
-            return width.to_px(0);
-        if (auto const& max_width = box.computed_values().max_width(); max_width.is_percentage())
-            return max_width.to_px(0);
+        // Note: The min-content contribution is, as always, also floored by the minimum size in its own axis.
+        if (box.computed_values().width().contains_percentage() || box.computed_values().max_width().contains_percentage()) {
+            auto const& min_width = box.computed_values().min_width();
+            if (!min_width.is_length_percentage())
+                return 0;
+
+            auto zero_percentage_basis_constraints = containing_block_constraints;
+            zero_percentage_basis_constraints.percentage_basis_width = 0;
+            return calculate_inner_width(box, AvailableSize::make_min_content(), min_width, zero_percentage_basis_constraints);
+        }
     }
     if (auto transferred_width = calculate_transferred_width_for_replaced_element(box, containing_block_constraints); transferred_width.has_value())
         return transferred_width.value();
-    if (auto auto_size = box.auto_content_box_size(); auto_size.has_width())
+    auto auto_size = box.auto_content_box_size();
+    if (auto_size.has_width())
         return auto_size.width.value();
+    if (box.is_replaced_box() && !box.has_preferred_aspect_ratio()) {
+        if (auto fallback_width = max_content_size_for_replaced_element_without_natural_size(box, auto_size, m_state.get(box), SizeDimension::Width); fallback_width.has_value())
+            return fallback_width.value();
+    }
 
     // Boxes with no children have zero intrinsic width.
     if (!box.has_children())

Libraries/LibWeb/Layout/GridFormattingContext.cpp

@@ -2244,6 +2244,12 @@ void GridFormattingContext::resolve_grid_item_sizes(GridDimension dimension)
         CSSPixels containing_block_size = containing_block_size_for_item(item, dimension);
         Alignment alignment = alignment_for_item(item.box, dimension);
 
+        // https://drafts.csswg.org/css-grid-1/#grid-item-sizing
+        // A grid item is sized within the containing block defined by its grid area.
+        auto grid_area_constraints = grid_area_constraints_for_item(item);
+        if (dimension == GridDimension::Row)
+            grid_area_constraints.percentage_basis_height = containing_block_size;
+
         auto const& preferred_size = item.preferred_size(dimension);
 
         struct ItemAlignment {
@@ -2315,28 +2321,38 @@ void GridFormattingContext::resolve_grid_item_sizes(GridDimension dimension)
             AvailableSize::make_definite(clamp_to_max_dimension_value(containing_block_size_for_item(item, GridDimension::Row)))
         };
 
-        auto calculate_inner_size = [this, &item, dimension, available_space](CSS::Size const& size) {
+        auto calculate_inner_size = [this, &item, dimension, available_space, grid_area_constraints](CSS::Size const& size) {
             if (dimension == GridDimension::Column)
-                return calculate_inner_width(item.box, available_space.width, size, grid_area_constraints_for_item(item));
-            return calculate_inner_height(item.box, available_space, size, grid_area_constraints_for_item(item));
+                return calculate_inner_width(item.box, available_space.width, size, grid_area_constraints);
+            return calculate_inner_height(item.box, available_space, size, grid_area_constraints);
         };
 
-        auto tentative_size_for_replaced_element = [this, &item, dimension, available_space](CSS::Size const& size) {
+        auto tentative_size_for_replaced_element = [this, &item, dimension, available_space, grid_area_constraints](CSS::Size const& size) {
             if (dimension == GridDimension::Column)
-                return tentative_width_for_replaced_element(item.box, size, available_space, grid_area_constraints_for_item(item));
-            return tentative_height_for_replaced_element(item.box, size, available_space, grid_area_constraints_for_item(item));
+                return tentative_width_for_replaced_element(item.box, size, available_space, grid_area_constraints);
+            return tentative_height_for_replaced_element(item.box, size, available_space, grid_area_constraints);
         };
 
         ItemAlignment used_alignment;
-        auto hint = item.box.auto_content_box_size();
-        bool has_replaced_size_hint_in_this_axis = false;
+        auto natural_size = item.box.auto_content_box_size();
+        bool has_natural_size_in_relevant_axis = false;
         if (dimension == GridDimension::Column) {
-            has_replaced_size_hint_in_this_axis = hint.has_width() || (hint.has_height() && item.box.has_preferred_aspect_ratio());
+            has_natural_size_in_relevant_axis = natural_size.has_width() || (natural_size.has_height() && item.box.has_preferred_aspect_ratio());
         } else {
-            has_replaced_size_hint_in_this_axis = hint.has_height() || (hint.has_width() && item.box.has_preferred_aspect_ratio());
+            has_natural_size_in_relevant_axis = natural_size.has_height() || (natural_size.has_width() && item.box.has_preferred_aspect_ratio());
         }
 
-        if (item.box.is_replaced_box() && has_replaced_size_hint_in_this_axis) {
+        auto use_replaced_sizing = item.box.is_replaced_box() && has_natural_size_in_relevant_axis;
+
+        // https://drafts.csswg.org/css-grid-1/#grid-item-sizing
+        // If the grid item has no preferred aspect ratio, and no natural size in the relevant axis (if it is a replaced
+        // element), the grid item is sized as for 'align-self: stretch'.
+        // INTEROP: Blink, WebKit, and Gecko instead use replaced sizing for normal-aligned replaced items. Match that
+        //          behavior for leaf replaced boxes, while retaining our existing behavior for controls with children.
+        if (item.box.is_replaced_box() && alignment == Alignment::Normal && !item.box.is_replaced_box_with_children())
+            use_replaced_sizing = true;
+
+        if (use_replaced_sizing) {
             auto tentative_size = tentative_size_for_replaced_element(preferred_size);
             used_alignment = try_compute_size(tentative_size, item.preferred_size(dimension));
         } else {
@@ -2372,14 +2388,14 @@ void GridFormattingContext::resolve_grid_item_sizes(GridDimension dimension)
             } else if (preferred_size.is_auto() || preferred_size.is_fit_content()) {
                 CSSPixels fit_content_size;
                 if (dimension == GridDimension::Column) {
-                    fit_content_size = calculate_fit_content_width(item.box, available_space, grid_area_constraints_for_item(item));
+                    fit_content_size = calculate_fit_content_width(item.box, available_space, grid_area_constraints);
                 } else if (preferred_size.is_auto() && item.box.has_preferred_aspect_ratio() && *item.box.preferred_aspect_ratio() != 0 && item.used_values.has_definite_width()) {
                     // NB: When the item has a preferred aspect ratio and a definite width, resolve the
                     //     height through the aspect ratio instead of using fit-content sizing, which would
                     //     incorrectly use the available width (grid area width) instead of the item's width.
-                    fit_content_size = item.used_values.content_width() / *item.box.preferred_aspect_ratio();
+                    fit_content_size = calculate_inner_height(item.box, available_space, CSS::Size::make_auto(), grid_area_constraints);
                 } else {
-                    fit_content_size = calculate_fit_content_height(item.box, available_space, grid_area_constraints_for_item(item));
+                    fit_content_size = calculate_fit_content_height(item.box, available_space, grid_area_constraints);
                 }
                 used_alignment = try_compute_size(fit_content_size, preferred_size);
             } else {
@@ -2388,7 +2404,7 @@ void GridFormattingContext::resolve_grid_item_sizes(GridDimension dimension)
             }
         }
 
-        bool should_treat_maximum_size_as_none = dimension == GridDimension::Column ? should_treat_max_width_as_none(item.box, available_space.width, grid_area_constraints_for_item(item)) : should_treat_max_height_as_none(item.box, available_space.height, grid_area_constraints_for_item(item));
+        bool should_treat_maximum_size_as_none = dimension == GridDimension::Column ? should_treat_max_width_as_none(item.box, available_space.width, grid_area_constraints) : should_treat_max_height_as_none(item.box, available_space.height, grid_area_constraints);
         if (!should_treat_maximum_size_as_none) {
             auto const& maximum_size = item.maximum_size(dimension);
             auto max_size_px = calculate_inner_size(maximum_size);

Tests/LibWeb/Layout/expected/grid/replaced-item-preferred-ratio-source-matrix.txt

@@ -78,15 +78,15 @@ Viewport <#document> at [0,0] [0+0+0 800 0+0+0] [0+0+0 600 0+0+0] [BFC] children
             SVGSVGBox <svg> at [0,0] [0+0+0 32 0+0+0] [0+0+0 32 0+0+0] [SVG] children: not-inline
       BlockContainer <(anonymous)> at [8,1676] [0+0+0 784 0+0+0] [0+0+0 0 0+0+0] children: inline
         TextNode <#text> (not painted)
-      Box <div> at [8,1676] [0+0+0 0 0+0+784] [0+0+0 32 0+0+0] [GFC] children: not-inline
-        ImageBox <img.cyclic-zero-minimum> at [8,1676] [0+0+0 0 0+0+0] [0+0+0 32 0+0+0] children: not-inline
+      Box <div> at [8,1676] [0+0+0 300 0+0+484] [0+0+0 32 0+0+0] [GFC] children: not-inline
+        ImageBox <img.cyclic-zero-minimum> at [8,1676] [0+0+0 300 0+0+0] [0+0+0 32 0+0+0] children: not-inline
           (SVG-as-image isolated context)
           Viewport <#document> at [0,0] [0+0+0 32 0+0+0] [0+0+0 32 0+0+0] [BFC] children: not-inline
             SVGSVGBox <svg> at [0,0] [0+0+0 32 0+0+0] [0+0+0 32 0+0+0] [SVG] children: not-inline
       BlockContainer <(anonymous)> at [8,1708] [0+0+0 784 0+0+0] [0+0+0 0 0+0+0] children: inline
         TextNode <#text> (not painted)
-      Box <div> at [8,1708] [0+0+0 10 0+0+774] [0+0+0 2 0+0+0] [GFC] children: not-inline
-        ImageBox <img.cyclic-calculated-minimum> at [8,1708] [0+0+0 15 0+0+0] [0+0+0 2 0+0+0] children: not-inline
+      Box <div> at [8,1708] [0+0+0 300 0+0+484] [0+0+0 2 0+0+0] [GFC] children: not-inline
+        ImageBox <img.cyclic-calculated-minimum> at [8,1708] [0+0+0 300 0+0+0] [0+0+0 2 0+0+0] children: not-inline
           (SVG-as-image isolated context)
           Viewport <#document> at [0,0] [0+0+0 32 0+0+0] [0+0+0 32 0+0+0] [BFC] children: not-inline
             SVGSVGBox <svg> at [0,0] [0+0+0 32 0+0+0] [0+0+0 32 0+0+0] [SVG] children: not-inline
@@ -192,11 +192,11 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600] overflow: [0,0 808x1884]
       Paintable (Box<DIV>) [8,1644 200x32]
         ImagePaintable (ImageBox<IMG>.css-ratio.conflicting-heights) [8,1644 200x100]
       PaintableWithLines (BlockContainer(anonymous)) [8,1676 784x0]
-      Paintable (Box<DIV>) [8,1676 0x32]
-        ImagePaintable (ImageBox<IMG>.cyclic-zero-minimum) [8,1676 0x32]
+      Paintable (Box<DIV>) [8,1676 300x32]
+        ImagePaintable (ImageBox<IMG>.cyclic-zero-minimum) [8,1676 300x32]
       PaintableWithLines (BlockContainer(anonymous)) [8,1708 784x0]
-      Paintable (Box<DIV>) [8,1708 10x2]
-        ImagePaintable (ImageBox<IMG>.cyclic-calculated-minimum) [8,1708 15x2]
+      Paintable (Box<DIV>) [8,1708 300x2]
+        ImagePaintable (ImageBox<IMG>.cyclic-calculated-minimum) [8,1708 300x2]
       PaintableWithLines (BlockContainer(anonymous)) [8,1710 784x0]
       Paintable (Box<DIV>) [8,1710 0x0]
         ImagePaintable (ImageBox<IMG>.css-ratio.cyclic-zero-minimum) [8,1710 0x0]

Tests/LibWeb/Text/expected/grid/replaced-element-fallback-size-matrix.txt

@@ -0,0 +1,58 @@
+no intrinsic data: track 300, image 300x150
+cyclic minimum: track 300, image 300x150
+calculated cyclic minimum: track 300, image 300x150
+calculated cyclic minimum below fallback: track 300, image 350x150
+calculated cyclic minimum above fallback: track 400, image 600x150
+fixed minimum: track 400, image 400x150
+calculated minimum: track 400, image 400x150
+fixed maximum: track 100, image 100x150
+calculated maximum: track 100, image 100x150
+fixed preferred: track 100, image 100x150
+calculated preferred: track 100, image 100x150
+conflicting fixed min max: track 200, image 200x150
+cyclic maximum: track 300, image 150x150
+calculated cyclic maximum: track 300, image 170x150
+cyclic preferred: track 300, image 150x150
+calculated cyclic preferred: track 300, image 170x150
+conflicting cyclic min max: track 300, image 150x150
+opposite-axis minimum: track 300, image 300x200
+opposite-axis cyclic minimum: track 300, image 300x150
+border-box cyclic minimum: track 320, image 320x170
+natural width and cyclic minimum: track 120, image 120x150
+natural height and cyclic minimum: track 300, image 300x80
+natural dimensions and cyclic minimum: track 120, image 120x80
+CSS ratio and cyclic minimum: track 0, image 0x0
+auto CSS ratio and cyclic minimum: track 0, image 0x0
+min-content no intrinsic data: track 300, image 300x150
+min-content cyclic preferred: track 0, image 0x150
+min-content calculated cyclic preferred: track 0, image 20x150
+min-content cyclic maximum: track 0, image 0x150
+min-content calculated cyclic maximum: track 0, image 20x150
+min-content cyclic minimum: track 300, image 300x150
+min-content calculated cyclic minimum: track 300, image 300x150
+min-content calculated minimum above fallback: track 400, image 600x150
+min-content fixed minimum: track 400, image 400x150
+min-content fixed maximum: track 100, image 100x150
+min-content fixed preferred: track 100, image 100x150
+min-content conflicting fixed min max: track 200, image 200x150
+min-content natural width cyclic minimum: track 120, image 120x150
+min-content natural width calculated minimum: track 200, image 300x150
+min-content natural width calculated preferred: track 0, image 20x150
+min-content CSS ratio: track 0, image 0x0
+min-content CSS ratio cyclic preferred: track 0, image 0x0
+block no intrinsic data: track 150, image 300x150
+block cyclic minimum: track 150, image 300x150
+block calculated cyclic minimum: track 150, image 300x150
+block calculated minimum above fallback: track 200, image 300x300
+block fixed minimum: track 200, image 300x200
+block fixed maximum: track 100, image 300x100
+block calculated maximum: track 100, image 300x100
+block cyclic maximum: track 150, image 300x75
+block calculated cyclic maximum: track 150, image 300x95
+block cyclic preferred: track 150, image 300x75
+block calculated cyclic preferred: track 150, image 300x95
+block border-box cyclic minimum: track 170, image 320x170
+block border-box ratio from width: track 50, image 100x50
+block natural width: track 150, image 120x150
+block natural height: track 80, image 300x80
+block natural dimensions: track 80, image 120x80