mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-09-20 16:28:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

LibWeb: Correctly calculate grid item size while accommodating fr track

Browse source 
Implements text from grid layout specification.
Improves layout on https://cal.com/
This commit is contained in:
Aliaksandr Kalenik 2025-08-06 19:36:56 +02:00 • committed by Andreas Kling
commit e3aa3016bf
Notes: github-actions[bot] 2025-08-06 20:43:08 +00:00
3 changed files with 40 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1038,6 +1038,7 @@ void GridFormattingContext::increase_sizes_to_accommodate_spanning_items_crossin
void GridFormattingContext::increase_sizes_to_accommodate_spanning_items_crossing_flexible_tracks(GridDimension dimension)
{
auto& tracks = dimension == GridDimension::Column ? m_grid_columns : m_grid_rows;
auto const& available_size = dimension == GridDimension::Column ? m_available_space->width : m_available_space->height;
for (auto& item : m_grid_items) {
Vector<GridTrack&> spanned_tracks;
for_each_spanned_track_by_item(item, dimension, [&](GridTrack& track) {
@ -1052,9 +1053,15 @@ void GridFormattingContext::increase_sizes_to_accommodate_spanning_items_crossin
// 1. For intrinsic minimums: First increase the base size of tracks with an intrinsic min track sizing
// function by distributing extra space as needed to accommodate these items’ minimum contributions.
auto item_minimum_contribution = calculate_minimum_contribution(item, dimension);
auto item_size_contribution = [&] {
// If the grid container is being sized under a min- or max-content constraint, use the items’ limited
// min-content contributions in place of their minimum contributions here.
if (available_size.is_intrinsic_sizing_constraint())
return calculate_limited_min_content_contribution(item, dimension);
return calculate_minimum_contribution(item, dimension);
}();
distribute_extra_space_across_spanned_tracks_base_size(dimension,
item_minimum_contribution, SpaceDistributionPhase::AccommodateMinimumContribution, spanned_tracks, [&](GridTrack const& track) {
item_size_contribution, SpaceDistributionPhase::AccommodateMinimumContribution, spanned_tracks, [&](GridTrack const& track) {
return track.max_track_sizing_function.is_flexible_length();
});

14
Tests/LibWeb/Layout/expected/grid/use-limited-contribution-if-container-has-intrinsic-available-size.txt Normal file
View file

@ -0,0 +1,14 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x116 [BFC] children: not-inline
Box <body> at (8,8) content-size 200x100 [GFC] children: not-inline
BlockContainer <div.grid-item> at (8,8) content-size 200x100 [BFC] children: not-inline
BlockContainer <div.orange-thing> at (8,8) content-size 100x100 children: not-inline
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x116]
PaintableBox (Box<BODY>) [8,8 200x100]
PaintableWithLines (BlockContainer<DIV>.grid-item) [8,8 200x100]
PaintableWithLines (BlockContainer<DIV>.orange-thing) [8,8 100x100]
SC for Viewport<#document> [0,0 800x600] [children: 1] (z-index: auto)
SC for BlockContainer<HTML> [0,0 800x116] [children: 0] (z-index: auto)

17
Tests/LibWeb/Layout/input/grid/use-limited-contribution-if-container-has-intrinsic-available-size.html Normal file
View file

@ -0,0 +1,17 @@
<!doctype html><style>
* { outline: 1px solid black; }
html { background: white; }
body {
display: grid;
grid-template-rows: minmax(0px, 1fr);
width: 200px;
height: min-content;
background: pink;
}
.orange-thing {
background: orange;
width: 100px;
height: 100px;
}
</style>
<body><div class="grid-item"><div class="orange-thing"></div></div>