LibWeb: Account for gaps in grid container's intrinsic size calculation

Fixes https://github.com/SerenityOS/serenity/issues/22804
This commit is contained in:
Aliaksandr Kalenik 2024-01-16 21:23:48 +01:00 committed by Andreas Kling
parent f529188fb8
commit 6a4dd8fa47
Notes: sideshowbarker 2024-07-17 07:20:49 +09:00
3 changed files with 52 additions and 2 deletions

View File

@ -0,0 +1,27 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x34 [BFC] children: not-inline
BlockContainer <body> at (0,0) content-size 216.09375x34 children: not-inline
Box <div#menu> at (0,0) content-size 216.09375x17 [GFC] children: not-inline
BlockContainer <div> at (0,0) content-size 83.046875x17 [BFC] children: inline
frag 0 from TextNode start: 0, length: 9, rect: [0,0 83.046875x17] baseline: 13.296875
"Community"
TextNode <#text>
BlockContainer <div> at (133.046875,0) content-size 83.046875x17 [BFC] children: inline
frag 0 from TextNode start: 0, length: 9, rect: [133.046875,0 83.046875x17] baseline: 13.296875
"Community"
TextNode <#text>
BlockContainer <div#wat> at (0,17) content-size 216.09375x17 children: inline
frag 0 from TextNode start: 0, length: 3, rect: [0,17 27.421875x17] baseline: 13.296875
"wat"
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x34]
PaintableWithLines (BlockContainer<BODY>) [0,0 216.09375x34]
PaintableBox (Box<DIV>#menu) [0,0 216.09375x17]
PaintableWithLines (BlockContainer<DIV>) [0,0 83.046875x17]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>) [133.046875,0 83.046875x17]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>#wat) [0,17 216.09375x17]
TextPaintable (TextNode<#text>)

View File

@ -0,0 +1,23 @@
<!DOCTYPE html><style type="text/css">
* {
outline: 1px solid black;
margin: 0px;
padding: 0px;
}
html {
background: white;
}
body {
width: max-content;
background: pink;
}
#menu {
display: grid;
grid-auto-flow: column;
gap: 50px;
background: orange;
}
#wat {
background: green;
}
</style><body><div id="menu"><div>Community</div><div>Community</div></div><div id="wat">wat</div>

View File

@ -2211,7 +2211,7 @@ void GridFormattingContext::determine_intrinsic_size_of_grid_container(Available
if (available_space.height.is_intrinsic_sizing_constraint()) {
CSSPixels grid_container_height = 0;
for (auto& track : m_grid_rows) {
for (auto& track : m_grid_rows_and_gaps) {
grid_container_height += track.base_size;
}
m_state.get_mutable(grid_container()).set_content_height(grid_container_height);
@ -2219,7 +2219,7 @@ void GridFormattingContext::determine_intrinsic_size_of_grid_container(Available
if (available_space.width.is_intrinsic_sizing_constraint()) {
CSSPixels grid_container_width = 0;
for (auto& track : m_grid_columns) {
for (auto& track : m_grid_columns_and_gaps) {
grid_container_width += track.base_size;
}
m_state.get_mutable(grid_container()).set_content_width(grid_container_width);