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

LibWeb: Set 0px fixed size to collapsed auto-fit tracks in GFC

Browse source 
Fixes the issue that before we set base_size and growth_limit of
collapsed tracks to 0px which still allowed them to grow by space
distribution.
This commit is contained in:
Aliaksandr Kalenik 2023-06-20 18:48:20 +03:00 • committed by Andreas Kling
parent e4d0c077c3
commit 21f39061fd
4 changed files with 49 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

9
Tests/LibWeb/Layout/expected/grid/auto-fit-collapse-empty-tracks.txt Normal file
View file

@ -0,0 +1,9 @@
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 784x97.46875 children: not-inline
Box <div.container> at (18,18) content-size 764x77.46875 [GFC] children: not-inline
BlockContainer <div.item> at (48,48) content-size 704x17.46875 [BFC] children: inline
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [48,48 6.34375x17.46875]
"1"
TextNode <#text>

14
Tests/LibWeb/Layout/input/grid/auto-fit-collapse-empty-tracks.html Normal file
View file

@ -0,0 +1,14 @@
<style>
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
background-color: lightcyan;
border: 10px solid red;
}
.item {
padding: 20px;
background-color: lightgreen;
border: 10px solid papayawhip;
}
</style><div class="container"><div class="item">1</div></div>

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

@ -758,30 +758,6 @@ void GridFormattingContext::resolve_intrinsic_track_sizes(AvailableSpace const&
// 2. Size tracks to fit non-spanning items: // 2. Size tracks to fit non-spanning items:
increase_sizes_to_accommodate_spanning_items_crossing_content_sized_tracks(available_space, dimension, 1); increase_sizes_to_accommodate_spanning_items_crossing_content_sized_tracks(available_space, dimension, 1);
// https://www.w3.org/TR/css-grid-2/#auto-repeat
// The auto-fit keyword behaves the same as auto-fill, except that after grid item placement any
// empty repeated tracks are collapsed. An empty track is one with no in-flow grid items placed into
// or spanning across it. (This can result in all tracks being collapsed, if they’re all empty.)
if (dimension == GridDimension::Column // FIXME: Handle for columns
&& grid_container().computed_values().grid_template_columns().track_list().size() == 1
&& grid_container().computed_values().grid_template_columns().track_list().first().is_repeat()
&& grid_container().computed_values().grid_template_columns().track_list().first().repeat().is_auto_fit()) {
for (size_t idx = 0; idx < m_grid_columns.size(); idx++) {
auto column_to_check = grid_container().computed_values().column_gap().is_auto() ? idx : idx / 2;
if (m_occupation_grid.is_occupied(column_to_check, 0))
continue;
if (!grid_container().computed_values().column_gap().is_auto() && idx % 2 != 0)
continue;
// A collapsed track is treated as having a fixed track sizing function of 0px
m_grid_columns[idx].base_size = 0;
m_grid_columns[idx].growth_limit = 0;
// FIXME: And the gutters on either side of it—including any space allotted through distributed
// alignment—collapse.
}
}
// 3. Increase sizes to accommodate spanning items crossing content-sized tracks: Next, consider the // 3. Increase sizes to accommodate spanning items crossing content-sized tracks: Next, consider the
// items with a span of 2 that do not span a track with a flexible sizing function. // items with a span of 2 that do not span a track with a flexible sizing function.
// Repeat incrementally for items with greater spans until all items have been considered. // Repeat incrementally for items with greater spans until all items have been considered.
@ -1497,6 +1473,27 @@ void GridFormattingContext::resolve_items_box_metrics(GridDimension const dimens
} }
} }
void GridFormattingContext::collapse_auto_fit_tracks_if_needed(GridDimension const dimension)
{
// https://www.w3.org/TR/css-grid-2/#auto-repeat
// The auto-fit keyword behaves the same as auto-fill, except that after grid item placement any
// empty repeated tracks are collapsed. An empty track is one with no in-flow grid items placed into
// or spanning across it. (This can result in all tracks being collapsed, if they’re all empty.)
auto const& grid_computed_values = grid_container().computed_values();
auto const& tracks_definition = dimension == GridDimension::Column ? grid_computed_values.grid_template_columns().track_list() : grid_computed_values.grid_template_rows().track_list();
auto& tracks = dimension == GridDimension::Column ? m_grid_columns : m_grid_rows;
if (tracks_definition.size() == 1 && tracks_definition.first().is_repeat() && tracks_definition.first().repeat().is_auto_fit()) {
for (size_t track_index = 0; track_index < tracks.size(); track_index++) {
if (m_occupation_grid.is_occupied(dimension == GridDimension::Column ? track_index : 0, dimension == GridDimension::Row ? track_index : 0))
continue;
// NOTE: A collapsed track is treated as having a fixed track sizing function of 0px
tracks[track_index].min_track_sizing_function = CSS::GridSize(CSS::Length::make_px(0));
tracks[track_index].max_track_sizing_function = CSS::GridSize(CSS::Length::make_px(0));
}
}
}
void GridFormattingContext::run(Box const& box, LayoutMode, AvailableSpace const& available_space) void GridFormattingContext::run(Box const& box, LayoutMode, AvailableSpace const& available_space)
{ {
m_available_space = available_space; m_available_space = available_space;
@ -1513,6 +1510,9 @@ void GridFormattingContext::run(Box const& box, LayoutMode, AvailableSpace const
initialize_gap_tracks(available_space); initialize_gap_tracks(available_space);
collapse_auto_fit_tracks_if_needed(GridDimension::Column);
collapse_auto_fit_tracks_if_needed(GridDimension::Row);
for (auto& item : m_grid_items) { for (auto& item : m_grid_items) {
auto& box_state = m_state.get_mutable(item.box); auto& box_state = m_state.get_mutable(item.box);
auto& computed_values = item.box->computed_values(); auto& computed_values = item.box->computed_values();

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

@ -240,6 +240,8 @@ private:
void initialize_grid_tracks_for_columns_and_rows(AvailableSpace const&); void initialize_grid_tracks_for_columns_and_rows(AvailableSpace const&);
void initialize_gap_tracks(AvailableSpace const&); void initialize_gap_tracks(AvailableSpace const&);
void collapse_auto_fit_tracks_if_needed(GridDimension const);
template<typename Match> template<typename Match>
void distribute_extra_space_across_spanned_tracks_base_size(CSSPixels item_size_contribution, Vector<GridTrack&>& spanned_tracks, Match matcher); void distribute_extra_space_across_spanned_tracks_base_size(CSSPixels item_size_contribution, Vector<GridTrack&>& spanned_tracks, Match matcher);