diff --git a/Tests/LibWeb/Layout/expected/grid/auto-fill-rows.txt b/Tests/LibWeb/Layout/expected/grid/auto-fill-rows.txt new file mode 100644 index 0000000000..ce93f7eb4f --- /dev/null +++ b/Tests/LibWeb/Layout/expected/grid/auto-fill-rows.txt @@ -0,0 +1,30 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x250.9375 [BFC] children: not-inline + BlockContainer at (8,8) content-size 784x234.9375 children: not-inline + Box at (8,8) content-size 784x234.9375 [GFC] children: not-inline + BlockContainer
at (8,8) content-size 784x200 [BFC] children: inline + line 0 width: 46.71875, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 6, rect: [8,8 46.71875x17.46875] + "Item 1" + TextNode <#text> + BlockContainer
at (8,208) content-size 784x17.46875 [BFC] children: inline + line 0 width: 49.1875, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 6, rect: [8,208 49.1875x17.46875] + "Item 2" + TextNode <#text> + BlockContainer
at (8,225.46875) content-size 784x17.46875 [BFC] children: inline + line 0 width: 49.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 6, rect: [8,225.46875 49.46875x17.46875] + "Item 3" + TextNode <#text> + +ViewportPaintable (Viewport<#document>) [0,0 800x600] + PaintableWithLines (BlockContainer) [0,0 800x250.9375] + PaintableWithLines (BlockContainer) [8,8 784x234.9375] + PaintableBox (Box
.grid-container) [8,8 784x234.9375] + PaintableWithLines (BlockContainer
) [8,8 784x200] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer
) [8,208 784x17.46875] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer
) [8,225.46875 784x17.46875] + TextPaintable (TextNode<#text>) diff --git a/Tests/LibWeb/Layout/input/grid/auto-fill-rows.html b/Tests/LibWeb/Layout/input/grid/auto-fill-rows.html new file mode 100644 index 0000000000..60097de257 --- /dev/null +++ b/Tests/LibWeb/Layout/input/grid/auto-fill-rows.html @@ -0,0 +1,9 @@ +
Item 1
Item 2
Item 3
\ No newline at end of file diff --git a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp index 9243a6dd05..8e992c8164 100644 --- a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp @@ -71,7 +71,7 @@ CSSPixels GridFormattingContext::resolve_definite_track_size(CSS::GridSize const return 0; } -int GridFormattingContext::count_of_repeated_auto_fill_or_fit_tracks(Vector const& track_list) +int GridFormattingContext::count_of_repeated_auto_fill_or_fit_tracks(GridDimension dimension) { // https://www.w3.org/TR/css-grid-2/#auto-repeat // 7.2.3.2. Repeat-to-fill: auto-fill and auto-fit repetitions @@ -84,6 +84,8 @@ int GridFormattingContext::count_of_repeated_auto_fill_or_fit_tracks(Vectorwidth.to_px_or_zero()); - if (free_space <= 0 || sum_of_grid_track_sizes == 0) + if (sum_of_grid_track_sizes == 0) return 0; - return (free_space / sum_of_grid_track_sizes).to_int(); + + auto const& available_size = dimension == GridDimension::Column ? m_available_space->width : m_available_space->height; + auto free_space = get_free_space(*m_available_space, dimension).to_px_or_zero(); + auto const& gap = dimension == GridDimension::Column ? grid_computed_values.column_gap() : grid_computed_values.row_gap(); + free_space -= repeat_track_list.size() * gap.to_px(grid_container(), available_size.to_px_or_zero()); + // If any number of repetitions would overflow, then 1 repetition. + if (free_space <= sum_of_grid_track_sizes) { + return 1; + } + // Otherwise, if the grid container has a definite min size in the relevant axis, the number of repetitions is the + // smallest possible positive integer that fulfills that minimum requirement + else if (available_size.is_definite()) { + return max(1, (free_space / sum_of_grid_track_sizes).to_int()); + } + // Otherwise, the specified track list repeats only once. + return 1; // For the purpose of finding the number of auto-repeated tracks in a standalone axis, the UA must // floor the track size to a UA-specified value to avoid division by zero. It is suggested that this @@ -618,7 +632,7 @@ void GridFormattingContext::initialize_grid_tracks_from_definition(GridDimension int repeat_count = 1; if (track_definition.is_repeat()) { if (track_definition.repeat().is_auto_fill() || track_definition.repeat().is_auto_fit()) - repeat_count = count_of_repeated_auto_fill_or_fit_tracks(tracks_definition); + repeat_count = count_of_repeated_auto_fill_or_fit_tracks(dimension); else repeat_count = track_definition.repeat().repeat_count(); } @@ -2266,7 +2280,7 @@ void GridFormattingContext::init_grid_lines(GridDimension dimension) } else if (explicit_track.is_repeat()) { int repeat_count = 0; if (explicit_track.repeat().is_auto_fill() || explicit_track.repeat().is_auto_fit()) - repeat_count = count_of_repeated_auto_fill_or_fit_tracks(lines_definition.track_list()); + repeat_count = count_of_repeated_auto_fill_or_fit_tracks(dimension); else repeat_count = explicit_track.repeat().repeat_count(); auto const& repeat_track = explicit_track.repeat(); diff --git a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.h b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.h index 2df86870fa..1c93b3dcf9 100644 --- a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.h +++ b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.h @@ -244,7 +244,7 @@ private: Optional get_line_index_by_line_name(GridDimension dimension, String const&); CSSPixels resolve_definite_track_size(CSS::GridSize const&, AvailableSpace const&); - int count_of_repeated_auto_fill_or_fit_tracks(Vector const& track_list); + int count_of_repeated_auto_fill_or_fit_tracks(GridDimension); void build_grid_areas();