RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 02:17:34 +00:00
Code Issues Activity Actions

LibWeb: Account for gap in auto-fill columns count calculation in GFC

Browse source 
Fixes https://github.com/SerenityOS/serenity/issues/22603
This commit is contained in:
Aliaksandr Kalenik 2024-01-05 21:04:22 +01:00 • committed by Andreas Kling
parent f0288e7f94
commit 90142ad307
3 changed files with 37 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

13
Tests/LibWeb/Layout/expected/grid/columns-auto-fill-with-gap.txt Normal file
View file

@ -0,0 +1,13 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x200 [BFC] children: not-inline
BlockContainer <body> at (0,0) content-size 470x200 children: not-inline
Box <div.grid> at (0,0) content-size 470x200 [GFC] children: not-inline
BlockContainer <div.item> at (0,0) content-size 470x100 [BFC] children: not-inline
BlockContainer <div.item> at (0,100) content-size 470x100 [BFC] children: not-inline
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x200]
PaintableWithLines (BlockContainer<BODY>) [0,0 470x200]
PaintableBox (Box<DIV>.grid) [0,0 470x200]
PaintableWithLines (BlockContainer<DIV>.item) [0,0 470x100]
PaintableWithLines (BlockContainer<DIV>.item) [0,100 470x100]

20
Tests/LibWeb/Layout/input/grid/columns-auto-fill-with-gap.html Normal file
View file

@ -0,0 +1,20 @@
<!doctype html><style>
* {
margin: 0px;
box-sizing: border-box;
outline: 1px solid black;
}
body {
width: 470px;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
column-gap: 150px;
background: pink;
}
.item {
height: 100px;
background: orange;
}
</style><body><div class="grid"><div class="item"></div><div class="item"></div>

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

@ -107,7 +107,7 @@ int GridFormattingContext::count_of_repeated_auto_fill_or_fit_tracks(Vector<CSS:
// (treating each track as its max track sizing function if that is definite or its minimum track sizing // (treating each track as its max track sizing function if that is definite or its minimum track sizing
// function otherwise, flooring the max track sizing function by the min track sizing function if both // function otherwise, flooring the max track sizing function by the min track sizing function if both
// are definite, and taking gap into account) // are definite, and taking gap into account)
// FIXME: take gap into account auto const& column_gap = grid_container().computed_values().column_gap();
for (auto& explicit_grid_track : track_list.first().repeat().grid_track_size_list().track_list()) { for (auto& explicit_grid_track : track_list.first().repeat().grid_track_size_list().track_list()) {
auto track_sizing_function = explicit_grid_track; auto track_sizing_function = explicit_grid_track;
if (track_sizing_function.is_minmax()) { if (track_sizing_function.is_minmax()) {
@ -120,6 +120,9 @@ int GridFormattingContext::count_of_repeated_auto_fill_or_fit_tracks(Vector<CSS:
} else { } else {
sum_of_grid_track_sizes += min(resolve_definite_track_size(track_sizing_function.grid_size(), available_space), resolve_definite_track_size(track_sizing_function.grid_size(), available_space)); sum_of_grid_track_sizes += min(resolve_definite_track_size(track_sizing_function.grid_size(), available_space), resolve_definite_track_size(track_sizing_function.grid_size(), available_space));
} }
if (!column_gap.is_auto())
sum_of_grid_track_sizes += column_gap.to_px(grid_container(), available_space.width.to_px_or_zero());
} }
if (sum_of_grid_track_sizes == 0) if (sum_of_grid_track_sizes == 0)