RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-05-29 10:25:07 +00:00
Code Issues Activity Actions

LibWeb: Flesh out basic support of min-width/height for grid items

Browse source 
This change brings calculate_minimum_contribution() for grid items and
supporting functions.
This commit is contained in:
Aliaksandr Kalenik 2023-05-13 15:17:24 +03:00 • committed by Andreas Kling
parent 32a777347f
commit dbafb11a7e
4 changed files with 171 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

14
Tests/LibWeb/Layout/expected/grid/grid-item-min-size.txt Normal file
View file

@ -0,0 +1,14 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x0 children: not-inline
Box <div.grid> at (8,8) content-size 102x204 floating [GFC] children: not-inline
BlockContainer <div.first> at (9,9) content-size 100x100 [BFC] children: inline
line 0 width: 36.03125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 5, rect: [9,9 36.03125x17.46875]
"first"
TextNode <#text>
BlockContainer <div.second> at (9,111) content-size 100x100 [BFC] children: inline
line 0 width: 54.78125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 6, rect: [9,111 54.78125x17.46875]
"second"
TextNode <#text>

22
Tests/LibWeb/Layout/input/grid/grid-item-min-size.html Normal file
View file

@ -0,0 +1,22 @@
<style>
.grid {
float: left;
display: grid;
grid-template-columns: auto;
grid-template-rows: auto;
}
.first {
background: pink;
border: 1px solid black;
min-width: 100px;
min-height: 100px;
}
.second {
background: skyblue;
border: 1px solid black;
min-width: 100px;
min-height: 100px;
}
</style><div class="grid"><div class="first">first</div><div class="second">second</div></div>

140
Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp
View file

@ -742,35 +742,25 @@ void GridFormattingContext::resolve_intrinsic_track_sizes(GridDimension const di
if (track.min_track_sizing_function.is_auto() && available_size.is_intrinsic_sizing_constraint()) { if (track.min_track_sizing_function.is_auto() && available_size.is_intrinsic_sizing_constraint()) {
// If the track has an auto min track sizing function and the grid container is being sized under a // If the track has an auto min track sizing function and the grid container is being sized under a
// min-/max-content constraint, set the track’s base size to the maximum of its items’ limited // min-/max-content constraint, set the track’s base size to the maximum of its items’ limited
// min-/max-content contributions (respectively), floored at zero. The limited min-/max-content // min-/max-content contributions (respectively), floored at zero.
// contribution of an item is (for this purpose) its min-/max-content contribution (accordingly),
// limited by the max track sizing function (which could be the argument to a fit-content() track
// sizing function) if that is fixed and ultimately floored by its minimum contribution (defined
// below).
if (available_size.is_min_content()) { if (available_size.is_min_content()) {
CSSPixels base_size = 0; CSSPixels base_size = 0;
for (auto& item : grid_items_of_track) { for (auto& item : grid_items_of_track) {
base_size = max(base_size, calculate_min_content_contribution(item, dimension)); base_size = max(base_size, calculate_limited_min_content_contribution(item, dimension));
} }
track.base_size = base_size; track.base_size = base_size;
} else if (available_size.is_max_content()) { } else if (available_size.is_max_content()) {
CSSPixels base_size = 0; CSSPixels base_size = 0;
for (auto& item : grid_items_of_track) { for (auto& item : grid_items_of_track) {
base_size = max(base_size, calculate_max_content_contribution(item, dimension)); base_size = max(base_size, calculate_limited_max_content_contribution(item, dimension));
} }
track.base_size = base_size; track.base_size = base_size;
} }
} else if (track.min_track_sizing_function.is_auto()) { } else if (track.min_track_sizing_function.is_auto()) {
// Otherwise, set the track’s base size to the maximum of its items’ minimum contributions, floored // Otherwise, set the track’s base size to the maximum of its items’ minimum contributions, floored at zero.
// at zero. The minimum contribution of an item is the smallest outer size it can have.
// Specifically, if the item’s computed preferred size behaves as auto or depends on the size of its
// containing block in the relevant axis, its minimum contribution is the outer size that would
// result from assuming the item’s used minimum size as its preferred size; else the item’s minimum
// contribution is its min-content contribution. Because the minimum contribution often depends on
// the size of the item’s content, it is considered a type of intrinsic size contribution.
CSSPixels base_size = 0; CSSPixels base_size = 0;
for (auto& item : grid_items_of_track) { for (auto& item : grid_items_of_track) {
base_size = max(base_size, calculate_min_content_contribution(item, dimension)); base_size = max(base_size, calculate_minimum_contribution(item, dimension));
} }
track.base_size = base_size; track.base_size = base_size;
} }
@ -1743,4 +1733,124 @@ CSSPixels GridFormattingContext::calculate_max_content_contribution(GridItem con
return preferred_size.to_px(grid_container(), containing_block_size); return preferred_size.to_px(grid_container(), containing_block_size);
} }
CSSPixels GridFormattingContext::calculate_limited_min_content_contribution(GridItem const& item, GridDimension const dimension) const
{
// The limited min-content contribution of an item is its min-content contribution,
// limited by the max track sizing function (which could be the argument to a fit-content() track
// sizing function) if that is fixed and ultimately floored by its minimum contribution.
// FIXME: limit by max track sizing function
auto min_content_contribution = calculate_min_content_contribution(item, dimension);
auto minimum_contribution = calculate_minimum_contribution(item, dimension);
if (min_content_contribution < minimum_contribution)
return minimum_contribution;
return min_content_contribution;
}
CSSPixels GridFormattingContext::calculate_limited_max_content_contribution(GridItem const& item, GridDimension const dimension) const
{
// The limited max-content contribution of an item is its max-content contribution,
// limited by the max track sizing function (which could be the argument to a fit-content() track
// sizing function) if that is fixed and ultimately floored by its minimum contribution.
// FIXME: limit by max track sizing function
auto max_content_contribution = calculate_max_content_contribution(item, dimension);
auto minimum_contribution = calculate_minimum_contribution(item, dimension);
if (max_content_contribution < minimum_contribution)
return minimum_contribution;
return max_content_contribution;
}
CSS::Size const& GridFormattingContext::get_item_minimum_size(GridItem const& item, GridDimension const dimension) const
{
if (dimension == GridDimension::Column)
return item.box().computed_values().min_width();
return item.box().computed_values().min_height();
}
CSSPixels GridFormattingContext::content_size_suggestion(GridItem const& item, GridDimension const dimension) const
{
// The content size suggestion is the min-content size in the relevant axis
// FIXME: clamped, if it has a preferred aspect ratio, by any definite opposite-axis minimum and maximum sizes
// converted through the aspect ratio.
return calculate_min_content_size(item, dimension);
}
Optional<CSSPixels> GridFormattingContext::specified_size_suggestion(GridItem const& item, GridDimension const dimension) const
{
// https://www.w3.org/TR/css-grid-1/#specified-size-suggestion
// If the item’s preferred size in the relevant axis is definite, then the specified size suggestion is that size.
// It is otherwise undefined.
auto const& used_values = m_state.get(item.box());
auto has_definite_preferred_size = dimension == GridDimension::Column ? used_values.has_definite_width() : used_values.has_definite_height();
if (has_definite_preferred_size) {
// FIXME: consider margins, padding and borders because it is outer size.
auto containing_block_size = containing_block_size_for_item(item, dimension);
return item.box().computed_values().width().to_px(item.box(), containing_block_size);
}
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
if (auto specified_size_suggestion = this->specified_size_suggestion(item, dimension); specified_size_suggestion.has_value()) {
return specified_size_suggestion.value();
}
// FIXME: otherwise its transferred size suggestion if that exists
// else its content size suggestion
return content_size_suggestion(item, dimension);
}
CSSPixels GridFormattingContext::automatic_minimum_size(GridItem const& item, GridDimension const dimension) const
{
// To provide a more reasonable default minimum size for grid items, the used value of its automatic minimum size
// in a given axis is the content-based minimum size if all of the following are true:
// - it is not a scroll container
// - it spans at least one track in that axis whose min track sizing function is auto
// FIXME: - if it spans more than one track in that axis, none of those tracks are flexible
auto const& tracks = dimension == GridDimension::Column ? m_grid_columns : m_grid_rows;
auto item_track_index = [&] {
if (dimension == GridDimension::Column)
return item.gap_adjusted_column(grid_container());
return item.gap_adjusted_row(grid_container());
}();
// FIXME: Check all tracks spanned by an item
auto item_spans_auto_tracks = tracks[item_track_index].min_track_sizing_function.is_auto();
if (item_spans_auto_tracks && !item.box().is_scroll_container()) {
return content_based_minimum_size(item, dimension);
}
// Otherwise, the automatic minimum size is zero, as usual.
return 0;
}
CSSPixels GridFormattingContext::calculate_minimum_contribution(GridItem const& item, GridDimension const dimension) const
{
// The minimum contribution of an item is the smallest outer size it can have.
// Specifically, if the item’s computed preferred size behaves as auto or depends on the size of its
// containing block in the relevant axis, its minimum contribution is the outer size that would
// result from assuming the item’s used minimum size as its preferred size; else the item’s minimum
// contribution is its min-content contribution. Because the minimum contribution often depends on
// the size of the item’s content, it is considered a type of intrinsic size contribution.
auto preferred_size = get_item_preferred_size(item, dimension);
auto should_treat_preferred_size_as_auto = [&] {
if (dimension == GridDimension::Column)
return should_treat_width_as_auto(item.box(), get_available_space_for_item(item));
return should_treat_height_as_auto(item.box(), get_available_space_for_item(item));
}();
if (should_treat_preferred_size_as_auto) {
auto minimum_size = get_item_minimum_size(item, dimension);
if (minimum_size.is_auto())
return automatic_minimum_size(item, dimension);
auto containing_block_size = containing_block_size_for_item(item, dimension);
return minimum_size.to_px(grid_container(), containing_block_size);
}
return calculate_min_content_contribution(item, dimension);
}
} }

10
Userland/Libraries/LibWeb/Layout/GridFormattingContext.h
View file

@ -184,8 +184,18 @@ private:
CSSPixels calculate_min_content_contribution(GridItem const&, GridDimension const) const; CSSPixels calculate_min_content_contribution(GridItem const&, GridDimension const) const;
CSSPixels calculate_max_content_contribution(GridItem const&, GridDimension const) const; CSSPixels calculate_max_content_contribution(GridItem const&, GridDimension const) const;
CSSPixels calculate_limited_min_content_contribution(GridItem const&, GridDimension const) const;
CSSPixels calculate_limited_max_content_contribution(GridItem const&, GridDimension const) const;
CSSPixels containing_block_size_for_item(GridItem const&, GridDimension const) const; CSSPixels containing_block_size_for_item(GridItem const&, GridDimension const) const;
AvailableSpace get_available_space_for_item(GridItem const&) const; AvailableSpace get_available_space_for_item(GridItem const&) const;
CSS::Size const& get_item_minimum_size(GridItem const&, GridDimension const) const;
CSSPixels content_size_suggestion(GridItem const&, GridDimension const) const;
Optional<CSSPixels> specified_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;
}; };
} }