mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-07-30 20:59:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb: Fix min-width and max-width resolution for grid items

Browse source 
Change try_compute_width() to check whether min-width/max-width or width
is auto instead of always using `computed_values.width()`.

`grid/min-max-content.html` test is affected but it's progression.
This commit is contained in:
Aliaksandr Kalenik 2024-09-13 00:05:43 +02:00 • committed by Andreas Kling
commit de3c007d79
Notes: github-actions[bot] 2024-09-13 10:00:41 +00:00
4 changed files with 50 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

21
Tests/LibWeb/Layout/expected/grid/item-with-percentage-max-width.txt Normal file
View file

@ -0,0 +1,21 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x120 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x104 children: not-inline
Box <div.grid-container> at (29,29) content-size 500x62 [GFC] children: not-inline
BlockContainer <div.grid-item> at (49,49) content-size 120x22 [BFC] children: inline
frag 0 from TextNode start: 0, length: 3, rect: [90,49 37.28125x22] baseline: 17
"One"
TextNode <#text>
BlockContainer <div.grid-item> at (309,49) content-size 120x22 [BFC] children: inline
frag 0 from TextNode start: 0, length: 3, rect: [348,49 42.359375x22] baseline: 17
"Two"
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x120]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x104]
PaintableBox (Box<DIV>.grid-container) [8,8 542x104]
PaintableWithLines (BlockContainer<DIV>.grid-item) [29,29 160x62]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>.grid-item) [289,29 160x62]
TextPaintable (TextNode<#text>)

4
Tests/LibWeb/Layout/expected/grid/min-max-content.txt
View file

@ -4,7 +4,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
Box <div.grid-container> at (8,8) content-size 784x17 [GFC] children: not-inline
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (8,8) content-size 196x17 [BFC] children: inline
BlockContainer <div.grid-item> at (8,8) content-size 98x17 [BFC] children: inline
frag 0 from TextNode start: 0, length: 11, rect: [8,8 93.765625x17] baseline: 13.296875
"min-content"
TextNode <#text>
@ -27,7 +27,7 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x17]
PaintableBox (Box<DIV>.grid-container) [8,8 784x17]
PaintableWithLines (BlockContainer<DIV>.grid-item) [8,8 196x17]
PaintableWithLines (BlockContainer<DIV>.grid-item) [8,8 98x17]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>.grid-item) [204,8 98.640625x17]
TextPaintable (TextNode<#text>)

20
Tests/LibWeb/Layout/input/grid/item-with-percentage-max-width.html Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
width: 500px;
background-color: #fff;
padding: 20px;
border: 1px solid black;
}
.grid-item {
background-color: #87ceeb;
padding: 20px;
text-align: center;
font-size: 20px;
max-width: 50%;
}
</style><div class="grid-container"><div class="grid-item">One</div><div class="grid-item">Two</div></div>

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

@ -1491,7 +1491,7 @@ void GridFormattingContext::resolve_grid_item_widths()
.width = box_state.content_width()
};
auto try_compute_width = [&](CSSPixels a_width) -> ItemAlignment {
auto try_compute_width = [&](CSSPixels a_width, CSS::Size const& computed_width) -> ItemAlignment {
ItemAlignment result = initial;
result.width = a_width;
@ -1504,7 +1504,7 @@ void GridFormattingContext::resolve_grid_item_widths()
result.margin_left = free_space_left_for_margins;
} else if (computed_values.margin().right().is_auto()) {
result.margin_right = free_space_left_for_margins;
} else if (computed_values.width().is_auto()) {
} else if (computed_width.is_auto()) {
result.width += free_space_left_for_margins;
}
@ -1540,17 +1540,17 @@ void GridFormattingContext::resolve_grid_item_widths()
ItemAlignment used_alignment;
AvailableSpace available_space { AvailableSize::make_definite(containing_block_width), AvailableSize::make_indefinite() };
if (computed_width.is_auto()) {
used_alignment = try_compute_width(calculate_fit_content_width(item.box, available_space));
used_alignment = try_compute_width(calculate_fit_content_width(item.box, available_space), computed_width);
} else if (computed_width.is_fit_content()) {
used_alignment = try_compute_width(calculate_fit_content_width(item.box, available_space));
used_alignment = try_compute_width(calculate_fit_content_width(item.box, available_space), computed_width);
} else {
auto width_px = calculate_inner_width(item.box, available_space.width, computed_width);
used_alignment = try_compute_width(width_px);
used_alignment = try_compute_width(width_px, computed_width);
}
if (!should_treat_max_width_as_none(item.box, m_available_space->width)) {
auto max_width_px = calculate_inner_width(item.box, available_space.width, computed_values.max_width());
auto max_width_alignment = try_compute_width(max_width_px);
auto max_width_alignment = try_compute_width(max_width_px, computed_values.max_width());
if (used_alignment.width > max_width_alignment.width) {
used_alignment = max_width_alignment;
}
@ -1558,7 +1558,7 @@ void GridFormattingContext::resolve_grid_item_widths()
if (!computed_values.min_width().is_auto()) {
auto min_width_px = calculate_inner_width(item.box, available_space.width, computed_values.min_width());
auto min_width_alignment = try_compute_width(min_width_px);
auto min_width_alignment = try_compute_width(min_width_px, computed_values.min_width());
if (used_alignment.width < min_width_alignment.width) {
used_alignment = min_width_alignment;
}