1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 08:57:34 +00:00

LibWeb: Account for auto-fill/fit when expanding grid lines in GFC

Named line placement now works when auto-fill or auto-fit is used to
define grid columns.
This commit is contained in:
Aliaksandr Kalenik 2024-01-05 21:32:47 +01:00 committed by Andreas Kling
parent 90142ad307
commit 9c72807976
3 changed files with 38 additions and 3 deletions

View file

@ -0,0 +1,16 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x73.46875 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x57.46875 children: not-inline
Box <div.grid-container> at (8,8) content-size 784x57.46875 [GFC] children: not-inline
BlockContainer <div.grid-item> at (28,28) content-size 744x17.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: [397,28 6.34375x17.46875]
"1"
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x73.46875]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x57.46875]
PaintableBox (Box<DIV>.grid-container) [8,8 784x57.46875]
PaintableWithLines (BlockContainer<DIV>.grid-item) [8,8 784x57.46875]
TextPaintable (TextNode<#text>)

View file

@ -0,0 +1,13 @@
<!DOCTYPE html><html lang="en"><style>
.grid-container {
display: grid;
grid-template-columns: [start] repeat(auto-fill, minmax(100px, 1fr)) [end];
}
.grid-item {
grid-column: start / end;
background-color: lightblue;
padding: 20px;
text-align: center;
}
</style><div class="grid-container"><div class="grid-item">1</div></div>

View file

@ -2279,11 +2279,17 @@ void GridFormattingContext::init_grid_lines(GridDimension dimension)
if (explicit_track.is_default() || explicit_track.is_minmax()) { if (explicit_track.is_default() || explicit_track.is_minmax()) {
lines.append({ .names = line_names }); lines.append({ .names = line_names });
line_names.clear(); line_names.clear();
} else if (explicit_track.is_repeat() && explicit_track.repeat().is_default()) { } 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(), *m_available_space);
else
repeat_count = explicit_track.repeat().repeat_count();
auto const& repeat_track = explicit_track.repeat(); auto const& repeat_track = explicit_track.repeat();
for (int i = 0; i < repeat_track.repeat_count(); i++) { for (int i = 0; i < repeat_count; i++)
expand_lines_definition(repeat_track.grid_track_size_list()); expand_lines_definition(repeat_track.grid_track_size_list());
} } else {
VERIFY_NOT_REACHED();
} }
} }
} }