dmaax/ladybird
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

LibWeb: Use resolved subgrid inline size for row contributions

Browse source 
Row subgrid contribution sizing reused the parent grid's available
width, so descendants in flexible columns could contribute an unwrapped
height and then wrap during layout.

Use the resolved subgrid item width when measuring row contributions.
This commit is contained in:
Shannon Booth 2026-06-16 16:52:32 +02:00 committed by Alexander Kalenik
parent 870aaa8a1f
commit f890f289a7
3 changed files with 64 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
Libraries/LibWeb/Layout/GridFormattingContext.cpp
View file

@ -361,6 +361,8 @@ void GridFormattingContext::for_each_subgrid_item_contributing_to_track_sizing(G
// This introspection is recursive.
GridFormattingContext subgrid_context(m_state, LayoutMode::IntrinsicSizing, subgrid.box, this);
subgrid_context.m_available_space = *m_available_space;
if (dimension == GridDimension::Row && subgrid.used_values.has_definite_width())
subgrid_context.m_available_space->width = AvailableSize::make_definite(subgrid.used_values.content_width());
subgrid_context.init_grid_lines(GridDimension::Column);
subgrid_context.init_grid_lines(GridDimension::Row);
subgrid_context.build_grid_areas();
@ -368,7 +370,7 @@ void GridFormattingContext::for_each_subgrid_item_contributing_to_track_sizing(G
subgrid_context.m_explicit_rows_line_count = subgrid_context.m_row_lines.size();
subgrid_context.place_grid_items();
subgrid_context.initialize_grid_tracks_for_columns_and_rows();
subgrid_context.initialize_gap_tracks(*m_available_space);
subgrid_context.initialize_gap_tracks(*subgrid_context.m_available_space);
if (dimension == GridDimension::Row) {
subgrid_context.resolve_items_box_metrics(GridDimension::Column);

33
Tests/LibWeb/Layout/expected/grid/subgrid-row-contribution-uses-resolved-fr-column-width.txt Normal file
View file

@ -0,0 +1,33 @@
Viewport <#document> at [0,0] [0+0+0 800 0+0+0] [0+0+0 600 0+0+0] [BFC] children: not-inline
BlockContainer <html> at [1,1] [0+1+0 798 0+1+0] [0+1+0 67 0+1+0] [BFC] children: not-inline
BlockContainer <body> at [2,2] [0+1+0 796 0+1+0] [0+1+0 65 0+1+0] children: not-inline
Box <div.outer> at [3,3] [0+1+0 766 0+1+28] [0+1+0 63 0+1+0] [GFC] children: not-inline
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text> (not painted)
Box <div.card> at [4,4] [0+1+0 245.328125 0+1+0] [0+1+0 61 0+1+0] [GFC] children: not-inline
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text> (not painted)
BlockContainer <p> at [5,5] [0+1+0 243.328125 0+1+0] [0+1+0 37 0+1+0] [BFC] children: inline
frag 0 from TextNode start: 0, length: 26, rect: [5,5 222.375x18] baseline: 13.796875
"Some long text that should"
frag 1 from TextNode start: 27, length: 26, rect: [5,23 219.03125x18] baseline: 13.796875
"wrap over to the next line"
TextNode <#text> (not painted)
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text> (not painted)
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text> (not painted)
BlockContainer <(anonymous)> at [2,67] [0+0+0 796 0+0+0] [0+0+0 0 0+0+0] children: inline
TextNode <#text> (not painted)
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x69]
PaintableWithLines (BlockContainer<BODY>) [1,1 798x67]
PaintableBox (Box<DIV>.outer) [2,2 768x65]
PaintableBox (Box<DIV>.card) [3,3 247.328125x63]
PaintableWithLines (BlockContainer<P>) [4,4 245.328125x39]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [2,67 796x0]
SC for Viewport<#document> [0,0 800x600] (z-index: auto)
SC for BlockContainer<HTML> [1,1 798x67] (z-index: auto)

28
Tests/LibWeb/Layout/input/grid/subgrid-row-contribution-uses-resolved-fr-column-width.html Normal file
View file

@ -0,0 +1,28 @@
<!doctype html>
<style>
* {
box-sizing: border-box;
border: 1px solid;
margin: 0;
padding: 0;
}
.outer {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
width: 768px;
}
.card {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid;
gap: 12px;
}
</style>
<div class="outer">
<div class="card">
<p>Some long text that should wrap over to the next line</p>
</div>
</div>