system/serenity
system/serenity
1
0
Fork 0
mirror of https://github.com/SerenityOS/serenity synced 2024-07-21 18:15:58 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

LibWeb: Resolve grid items preferred width in GFC

Browse source 
Previously, the width and height of grid items were set to match the
size of the grid area they belonged to. With this change, if a grid
item has preferred width or height specified to not "auto" value it
will be resolved using grid area as containing block and used instead.
This commit is contained in:
Aliaksandr Kalenik 2023-05-11 17:46:22 +03:00 committed by Andreas Kling
parent c2f6ba8f5f
commit de970c2dce
5 changed files with 67 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
Tests/LibWeb/Layout/expected/grid/grid-item-fixed-size.txt Normal file
View file

@ -0,0 +1,9 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x200 children: not-inline
Box <div.grid-container> at (8,8) content-size 784x200 [GFC] children: not-inline
BlockContainer <div.first> at (8,8) content-size 100x200 [BFC] children: inline
line 0 width: 42.140625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 5, rect: [8,8 42.140625x17.46875]
"First"
TextNode <#text>

14
Tests/LibWeb/Layout/expected/grid/grid-item-percentage-width.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 800x600 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x17.46875 children: not-inline
Box <div.grid-container> at (8,8) content-size 784x17.46875 [GFC] children: not-inline
BlockContainer <div.first> at (8,8) content-size 313.599975x17.46875 [BFC] children: inline
line 0 width: 42.140625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 5, rect: [8,8 42.140625x17.46875]
"First"
TextNode <#text>
BlockContainer <div.second> at (400,8) content-size 78.399993x17.46875 [BFC] children: inline
line 0 width: 57.40625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 6, rect: [400,8 57.40625x17.46875]
"Second"
TextNode <#text>

13
Tests/LibWeb/Layout/input/grid/grid-item-fixed-size.html Normal file
View file

@ -0,0 +1,13 @@
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto;
}
.first {
background-color: lightcoral;
width: 100px;
height: 200px;
}
</style><div class="grid-container"><div class="first">First</div></div>

17
Tests/LibWeb/Layout/input/grid/grid-item-percentage-width.html Normal file
View file

@ -0,0 +1,17 @@
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto;
}
.first {
background-color: lightcoral;
width: 80%;
}
.second {
background-color: lightsteelblue;
width: 20%;
}
</style><div class="grid-container"><div class="first">First</div><div class="second">Second</div></div>

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

@ -1454,8 +1454,20 @@ void GridFormattingContext::run(Box const& box, LayoutMode, AvailableSpace const
else
y_end += m_grid_rows[i].full_vertical_size();
}
child_box_state.set_content_width(max(CSSPixels(0), x_end - x_start - m_grid_columns[column_start].border_left - m_grid_columns[column_start].border_right));
child_box_state.set_content_height(y_end - y_start);
// A grid item containing block is created by the grid area to which it belongs.
auto containing_block_width = max(CSSPixels(0), x_end - x_start - m_grid_columns[column_start].border_left - m_grid_columns[column_start].border_right);
auto containing_block_height = y_end - y_start;
auto computed_width = child_box.computed_values().width();
auto computed_height = child_box.computed_values().height();
auto used_width = computed_width.is_auto() ? containing_block_width : computed_width.to_px(grid_container(), containing_block_width);
auto used_height = computed_height.is_auto() ? containing_block_height : computed_height.to_px(grid_container(), containing_block_height);
child_box_state.set_content_width(used_width);
child_box_state.set_content_height(used_height);
child_box_state.offset = { x_start + m_grid_columns[column_start].border_left, y_start + m_grid_rows[row_start].border_top };
child_box_state.border_left = child_box.computed_values().border_left().width;