mirror of
https://github.com/RGBCube/serenity
synced 2025-07-25 06:07:34 +00:00
LibWeb: Fix regression in definite grid row heights
Fixes a row height bug when a grid item in a row has a definite height.
This commit is contained in:
martinfalisse
Andreas Kling
parent
e65f4b3dc5
commit
6f52272d34
4 changed files with 76 additions and 5 deletions
34
Tests/LibWeb/Layout/expected/grid/row-height.txt
Normal file
34
Tests/LibWeb/Layout/expected/grid/row-height.txt
Normal 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
22
Tests/LibWeb/Layout/input/grid/row-height.html
Normal 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>
|
||||
|
|
@ -1261,7 +1261,7 @@ void GridFormattingContext::calculate_sizes_of_rows(Box const& box)
|
|||
case CSS::GridSize::Type::MinContent: {
|
||||
CSSPixels row_height = 0;
|
||||
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;
|
||||
} break;
|
||||
// - For max-content minimums:
|
||||
|
|
@ -1270,7 +1270,7 @@ void GridFormattingContext::calculate_sizes_of_rows(Box const& box)
|
|||
case CSS::GridSize::Type::MaxContent: {
|
||||
CSSPixels row_height = 0;
|
||||
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;
|
||||
} break;
|
||||
// - For auto minimums:
|
||||
|
|
@ -1294,7 +1294,7 @@ void GridFormattingContext::calculate_sizes_of_rows(Box const& box)
|
|||
case CSS::GridSize::Type::FlexibleLength: {
|
||||
CSSPixels grid_row_height = 0;
|
||||
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;
|
||||
} break;
|
||||
default:
|
||||
|
|
@ -1308,7 +1308,7 @@ void GridFormattingContext::calculate_sizes_of_rows(Box const& box)
|
|||
case CSS::GridSize::Type::MinContent: {
|
||||
CSSPixels row_height = 0;
|
||||
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;
|
||||
} break;
|
||||
// - For max-content maximums:
|
||||
|
|
@ -1318,7 +1318,7 @@ void GridFormattingContext::calculate_sizes_of_rows(Box const& box)
|
|||
case CSS::GridSize::Type::MaxContent: {
|
||||
CSSPixels row_height = 0;
|
||||
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;
|
||||
} break;
|
||||
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;
|
||||
}
|
||||
|
||||
// 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));
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -145,6 +145,8 @@ private:
|
|||
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_rows(Box const&);
|
||||
|
||||
CSSPixels content_based_minimum_height(GridItem const&, Box const& parent_box);
|
||||
};
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue