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:
parent
90142ad307
commit
9c72807976
3 changed files with 38 additions and 3 deletions
|
@ -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>)
|
|
@ -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>
|
|
@ -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();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue