RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 05:47:35 +00:00
Code Issues Activity Actions

LibWeb: Fix regression in definite grid row heights

Browse source 
Fixes a row height bug when a grid item in a row has a definite height.
This commit is contained in:
martinfalisse 2023-04-01 19:09:19 +02:00 • committed by Andreas Kling
parent e65f4b3dc5
commit 6f52272d34
4 changed files with 76 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

34
Tests/LibWeb/Layout/expected/grid/row-height.txt Normal file
View file

@ -0,0 +1,34 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x83.46875 children: not-inline
BlockContainer <body> at (8,8) content-size 784x67.46875 children: not-inline
Box <div.grid-container> at (8,8) content-size 784x67.46875 children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (8,8) content-size 392.140625x50 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: [8,8 6.34375x17.46875]
"1"
TextNode <#text>
BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (400.140625,8) content-size 392x50 children: inline
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [400.140625,8 8.8125x17.46875]
"2"
TextNode <#text>
BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (8,58) content-size 392.140625x17.46875 children: inline
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [8,58 9.09375x17.46875]
"3"
TextNode <#text>
BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (400.140625,58) content-size 392x17.46875 children: inline
line 0 width: 7.75, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [400.140625,58 7.75x17.46875]
"4"
TextNode <#text>
BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
TextNode <#text>

22
Tests/LibWeb/Layout/input/grid/row-height.html Normal file
View file

@ -0,0 +1,22 @@
<style>
body {
font-family: 'SerenitySans';
}
.grid-container {
display: grid;
background-color: lightsalmon;
}
.grid-item {
background-color: lightblue;
}
</style>
<!-- Should render a 2x2 grid with the first row having a height of 50px -->
<div class="grid-container" style="grid-template-columns: auto auto;">
<div class="grid-item" style="height: 50px;">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
</div>

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

@ -1261,7 +1261,7 @@ void GridFormattingContext::calculate_sizes_of_rows(Box const& box)
case CSS::GridSize::Type::MinContent: { case CSS::GridSize::Type::MinContent: {
CSSPixels row_height = 0; CSSPixels row_height = 0;
for (auto& grid_item : grid_items_of_row) for (auto& grid_item : grid_items_of_row)
row_height = max(row_height, calculate_min_content_height(grid_item.box(), AvailableSize::make_definite(m_grid_columns[grid_item.gap_adjusted_column(box)].base_size))); row_height = max(row_height, content_based_minimum_height(grid_item, box));
grid_row.base_size = row_height; grid_row.base_size = row_height;
} break; } break;
// - For max-content minimums: // - For max-content minimums:
@ -1270,7 +1270,7 @@ void GridFormattingContext::calculate_sizes_of_rows(Box const& box)
case CSS::GridSize::Type::MaxContent: { case CSS::GridSize::Type::MaxContent: {
CSSPixels row_height = 0; CSSPixels row_height = 0;
for (auto& grid_item : grid_items_of_row) for (auto& grid_item : grid_items_of_row)
row_height = max(row_height, calculate_max_content_height(grid_item.box(), AvailableSize::make_definite(m_grid_columns[grid_item.gap_adjusted_column(box)].base_size))); row_height = max(row_height, content_based_minimum_height(grid_item, box));
grid_row.base_size = row_height; grid_row.base_size = row_height;
} break; } break;
// - For auto minimums: // - For auto minimums:
@ -1294,7 +1294,7 @@ void GridFormattingContext::calculate_sizes_of_rows(Box const& box)
case CSS::GridSize::Type::FlexibleLength: { case CSS::GridSize::Type::FlexibleLength: {
CSSPixels grid_row_height = 0; CSSPixels grid_row_height = 0;
for (auto& grid_item : grid_items_of_row) for (auto& grid_item : grid_items_of_row)
grid_row_height = max(grid_row_height, calculate_min_content_height(grid_item.box(), AvailableSize::make_definite(m_grid_columns[grid_item.gap_adjusted_column(box)].base_size))); grid_row_height = max(grid_row_height, content_based_minimum_height(grid_item, box));
grid_row.base_size = grid_row_height; grid_row.base_size = grid_row_height;
} break; } break;
default: default:
@ -1308,7 +1308,7 @@ void GridFormattingContext::calculate_sizes_of_rows(Box const& box)
case CSS::GridSize::Type::MinContent: { case CSS::GridSize::Type::MinContent: {
CSSPixels row_height = 0; CSSPixels row_height = 0;
for (auto& grid_item : grid_items_of_row) for (auto& grid_item : grid_items_of_row)
row_height = max(row_height, calculate_max_content_height(grid_item.box(), AvailableSize::make_definite(m_grid_columns[grid_item.gap_adjusted_column(box)].base_size))); row_height = max(row_height, content_based_minimum_height(grid_item, box));
grid_row.base_size = row_height; grid_row.base_size = row_height;
} break; } break;
// - For max-content maximums: // - For max-content maximums:
@ -1318,7 +1318,7 @@ void GridFormattingContext::calculate_sizes_of_rows(Box const& box)
case CSS::GridSize::Type::MaxContent: { case CSS::GridSize::Type::MaxContent: {
CSSPixels row_height = 0; CSSPixels row_height = 0;
for (auto& grid_item : grid_items_of_row) for (auto& grid_item : grid_items_of_row)
row_height = max(row_height, calculate_max_content_height(grid_item.box(), AvailableSize::make_definite(m_grid_columns[grid_item.gap_adjusted_column(box)].base_size))); row_height = max(row_height, content_based_minimum_height(grid_item, box));
grid_row.base_size = row_height; grid_row.base_size = row_height;
} break; } break;
case CSS::GridSize::Type::Length: case CSS::GridSize::Type::Length:
@ -2056,4 +2056,17 @@ int GridItem::gap_adjusted_column(Box const& parent_box) const
return parent_box.computed_values().column_gap().is_auto() ? m_column : m_column * 2; return parent_box.computed_values().column_gap().is_auto() ? m_column : m_column * 2;
} }
// https://www.w3.org/TR/css-grid-2/#min-size-auto
CSSPixels GridFormattingContext::content_based_minimum_height(GridItem const& item, Box const& parent_box)
{
// The content-based minimum size for a grid item in a given dimension is its specified size suggestion if it exists
if (!item.box().computed_values().height().is_auto()) {
if (item.box().computed_values().height().is_length())
return item.box().computed_values().height().length().to_px(item.box());
}
// FIXME: otherwise its transferred size suggestion if that exists
// else its content size suggestion
return calculate_min_content_height(item.box(), AvailableSize::make_definite(m_grid_columns[item.gap_adjusted_column(parent_box)].base_size));
}
} }

2
Userland/Libraries/LibWeb/Layout/GridFormattingContext.h
View file

@ -145,6 +145,8 @@ private:
void initialize_grid_tracks(Box const&, AvailableSpace const&, int column_count, int row_count); void initialize_grid_tracks(Box const&, AvailableSpace const&, int column_count, int row_count);
void calculate_sizes_of_columns(Box const&, AvailableSpace const&); void calculate_sizes_of_columns(Box const&, AvailableSpace const&);
void calculate_sizes_of_rows(Box const&); void calculate_sizes_of_rows(Box const&);
CSSPixels content_based_minimum_height(GridItem const&, Box const& parent_box);
}; };
} }