diff --git a/Libraries/LibWeb/Layout/GridFormattingContext.cpp b/Libraries/LibWeb/Layout/GridFormattingContext.cpp index 30bd5fd16fd..bec973d9521 100644 --- a/Libraries/LibWeb/Layout/GridFormattingContext.cpp +++ b/Libraries/LibWeb/Layout/GridFormattingContext.cpp @@ -2548,16 +2548,41 @@ Optional GridFormattingContext::specified_size_suggestion(GridItem co return {}; } +Optional GridFormattingContext::transferred_size_suggestion(GridItem const& item, GridDimension dimension) const +{ + // https://www.w3.org/TR/css-grid-2/#transferred-size-suggestion + // If the item has a preferred aspect ratio and its preferred size in the opposite axis is definite, then the transferred + // size suggestion is that size (clamped by the opposite-axis minimum and maximum sizes if they are definite), converted + // through the aspect ratio. It is otherwise undefined. + if (!item.box->preferred_aspect_ratio().has_value()) { + return {}; + } + + CSS::Size const& preferred_size_in_opposite_axis = get_item_preferred_size(item, dimension == GridDimension::Column ? GridDimension::Row : GridDimension::Column); + if (preferred_size_in_opposite_axis.is_length()) { + auto opposite_axis_size = preferred_size_in_opposite_axis.length().to_px(item.box); + // FIXME: Clamp by opposite-axis minimum and maximum sizes if they are definite + return opposite_axis_size * item.box->preferred_aspect_ratio().value(); + } + + return {}; +} + CSSPixels GridFormattingContext::content_based_minimum_size(GridItem const& item, GridDimension const dimension) const { // https://www.w3.org/TR/css-grid-1/#content-based-minimum-size - // The content-based minimum size for a grid item in a given dimension is its specified size suggestion if it exists, - // otherwise its transferred size suggestion if that exists, - // else its content size suggestion, see below. + CSSPixels result = 0; + // The content-based minimum size for a grid item in a given dimension is its specified size suggestion if it exists, if (auto specified_size_suggestion = this->specified_size_suggestion(item, dimension); specified_size_suggestion.has_value()) { result = specified_size_suggestion.value(); - } else { + } + // otherwise its transferred size suggestion if that exists, + else if (auto transferred_size_suggestion = this->transferred_size_suggestion(item, dimension); transferred_size_suggestion.has_value()) { + result = transferred_size_suggestion.value(); + } + // else its content size suggestion. + else { result = content_size_suggestion(item, dimension); } diff --git a/Libraries/LibWeb/Layout/GridFormattingContext.h b/Libraries/LibWeb/Layout/GridFormattingContext.h index 9da3fe7169a..f13078f8f0f 100644 --- a/Libraries/LibWeb/Layout/GridFormattingContext.h +++ b/Libraries/LibWeb/Layout/GridFormattingContext.h @@ -336,6 +336,7 @@ private: CSSPixels content_size_suggestion(GridItem const&, GridDimension const) const; Optional specified_size_suggestion(GridItem const&, GridDimension const) const; + Optional transferred_size_suggestion(GridItem const&, GridDimension const) const; CSSPixels content_based_minimum_size(GridItem const&, GridDimension const) const; CSSPixels automatic_minimum_size(GridItem const&, GridDimension const) const; CSSPixels calculate_minimum_contribution(GridItem const&, GridDimension const) const; diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-grid/grid-items/ref-filled-green-100px-square-image.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-grid/grid-items/ref-filled-green-100px-square-image.html new file mode 100644 index 00000000000..5906160218c --- /dev/null +++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-grid/grid-items/ref-filled-green-100px-square-image.html @@ -0,0 +1,8 @@ + + +CSS Reftest Reference: 100x100 green square image + + +

Test passes if there is a filled green square and no red.

+ +Image download support must be enabled diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-grid/grid-items/support/100x100-green.png b/Tests/LibWeb/Ref/expected/wpt-import/css/css-grid/grid-items/support/100x100-green.png new file mode 100644 index 00000000000..25b76c3c6f2 Binary files /dev/null and b/Tests/LibWeb/Ref/expected/wpt-import/css/css-grid/grid-items/support/100x100-green.png differ diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-grid/grid-items/grid-minimum-size-grid-items-008.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-grid/grid-items/grid-minimum-size-grid-items-008.html new file mode 100644 index 00000000000..f8cf7e298a0 --- /dev/null +++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-grid/grid-items/grid-minimum-size-grid-items-008.html @@ -0,0 +1,34 @@ + + +CSS Grid Layout Test: Minimum size of grid items + + + + + + +

Test passes if there is a filled green square and no red.

+ +
+
+ Image download support must be enabled +
+ diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-grid/grid-items/grid-minimum-size-grid-items-009.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-grid/grid-items/grid-minimum-size-grid-items-009.html new file mode 100644 index 00000000000..9fe7e98368c --- /dev/null +++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-grid/grid-items/grid-minimum-size-grid-items-009.html @@ -0,0 +1,37 @@ + + +CSS Grid Layout Test: Minimum size of grid items + + + + + + +

Test passes if there is a filled green square and no red.

+ +
+
+ Image download support must be enabled + Image download support must be enabled +
+ diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-grid/grid-items/support/200x200-green.png b/Tests/LibWeb/Ref/input/wpt-import/css/css-grid/grid-items/support/200x200-green.png new file mode 100644 index 00000000000..e8b591f05b5 Binary files /dev/null and b/Tests/LibWeb/Ref/input/wpt-import/css/css-grid/grid-items/support/200x200-green.png differ diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-grid/grid-items/support/50x25-green.png b/Tests/LibWeb/Ref/input/wpt-import/css/css-grid/grid-items/support/50x25-green.png new file mode 100644 index 00000000000..2bd68e74214 Binary files /dev/null and b/Tests/LibWeb/Ref/input/wpt-import/css/css-grid/grid-items/support/50x25-green.png differ