RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 02:27:43 +00:00
Code Issues Activity Actions

LibWeb: Resolve grid item's min-width and max-width in GFC

Browse source 
Now min-width and max-width properties affect resulting width of grid
item instead of being ignored.
This commit is contained in:
Aliaksandr Kalenik 2023-10-23 17:54:37 +02:00 • committed by Andreas Kling
parent db929e0fcf
commit 802b58d7e1
5 changed files with 59 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

11
Tests/LibWeb/Layout/expected/grid/item-max-width.txt Normal file
View file

@ -0,0 +1,11 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x116 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x100 children: not-inline
Box <div.app-privacy__cards> at (8,8) content-size 784x100 [GFC] children: not-inline
BlockContainer <div.app-privacy__card> at (8,8) content-size 392x100 [BFC] children: not-inline
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x116]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x100]
PaintableBox (Box<DIV>.app-privacy__cards) [8,8 784x100]
PaintableWithLines (BlockContainer<DIV>.app-privacy__card) [8,8 392x100]

11
Tests/LibWeb/Layout/expected/grid/item-min-width.txt Normal file
View file

@ -0,0 +1,11 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x116 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x100 children: not-inline
Box <div.app-privacy__cards> at (8,8) content-size 784x100 [GFC] children: not-inline
BlockContainer <div.app-privacy__card> at (8,8) content-size 392x100 [BFC] children: not-inline
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x116]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x100]
PaintableBox (Box<DIV>.app-privacy__cards) [8,8 784x100]
PaintableWithLines (BlockContainer<DIV>.app-privacy__card) [8,8 392x100]

11
Tests/LibWeb/Layout/input/grid/item-max-width.html Normal file
View file

@ -0,0 +1,11 @@
<!DOCTYPE html><style type="text/css">
.app-privacy__cards {
display: grid;
}
.app-privacy__card {
height: 100px;
width: 100%;
max-width: 50%;
background-color: magenta;
}
</style><div class="app-privacy__cards"><div class="app-privacy__card"></div></div>

11
Tests/LibWeb/Layout/input/grid/item-min-width.html Normal file
View file

@ -0,0 +1,11 @@
<!DOCTYPE html><style type="text/css">
.app-privacy__cards {
display: grid;
}
.app-privacy__card {
height: 100px;
width: 0px;
min-width: 50%;
background-color: magenta;
}
</style><div class="app-privacy__cards"><div class="app-privacy__card"></div></div>

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

@ -1626,6 +1626,21 @@ void GridFormattingContext::resolve_grid_item_widths()
} else {
used_width = try_compute_width(computed_width.to_px(grid_container(), containing_block_width));
}
if (!should_treat_max_width_as_none(item.box, m_available_space->width)) {
auto max_width = try_compute_width(computed_values.max_width().to_px(grid_container(), containing_block_width));
if (used_width > max_width) {
used_width = max_width;
}
}
if (!computed_values.min_width().is_auto()) {
auto min_width = try_compute_width(computed_values.min_width().to_px(grid_container(), containing_block_width));
if (used_width < min_width) {
used_width = min_width;
}
}
box_state.set_content_width(used_width);
}
}