From de3c007d7946cc88828d2d85e7f65639c29b5e4f Mon Sep 17 00:00:00 2001 From: Aliaksandr Kalenik Date: Fri, 13 Sep 2024 00:05:43 +0200 Subject: [PATCH] LibWeb: Fix min-width and max-width resolution for grid items 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. --- .../grid/item-with-percentage-max-width.txt | 21 +++++++++++++++++++ .../Layout/expected/grid/min-max-content.txt | 4 ++-- .../grid/item-with-percentage-max-width.html | 20 ++++++++++++++++++ .../LibWeb/Layout/GridFormattingContext.cpp | 14 ++++++------- 4 files changed, 50 insertions(+), 9 deletions(-) create mode 100644 Tests/LibWeb/Layout/expected/grid/item-with-percentage-max-width.txt create mode 100644 Tests/LibWeb/Layout/input/grid/item-with-percentage-max-width.html diff --git a/Tests/LibWeb/Layout/expected/grid/item-with-percentage-max-width.txt b/Tests/LibWeb/Layout/expected/grid/item-with-percentage-max-width.txt new file mode 100644 index 00000000000..66a17ae964b --- /dev/null +++ b/Tests/LibWeb/Layout/expected/grid/item-with-percentage-max-width.txt @@ -0,0 +1,21 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x120 [BFC] children: not-inline + BlockContainer at (8,8) content-size 784x104 children: not-inline + Box at (29,29) content-size 500x62 [GFC] children: not-inline + BlockContainer 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 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) [0,0 800x120] + PaintableWithLines (BlockContainer) [8,8 784x104] + PaintableBox (Box
.grid-container) [8,8 542x104] + PaintableWithLines (BlockContainer
.grid-item) [29,29 160x62] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer
.grid-item) [289,29 160x62] + TextPaintable (TextNode<#text>) diff --git a/Tests/LibWeb/Layout/expected/grid/min-max-content.txt b/Tests/LibWeb/Layout/expected/grid/min-max-content.txt index 656a552ba30..7df8b3d1d30 100644 --- a/Tests/LibWeb/Layout/expected/grid/min-max-content.txt +++ b/Tests/LibWeb/Layout/expected/grid/min-max-content.txt @@ -4,7 +4,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline Box at (8,8) content-size 784x17 [GFC] children: not-inline BlockContainer <(anonymous)> (not painted) [BFC] children: inline TextNode <#text> - BlockContainer at (8,8) content-size 196x17 [BFC] children: inline + BlockContainer 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) [0,0 800x600] PaintableWithLines (BlockContainer) [8,8 784x17] PaintableBox (Box
.grid-container) [8,8 784x17] - PaintableWithLines (BlockContainer
.grid-item) [8,8 196x17] + PaintableWithLines (BlockContainer
.grid-item) [8,8 98x17] TextPaintable (TextNode<#text>) PaintableWithLines (BlockContainer
.grid-item) [204,8 98.640625x17] TextPaintable (TextNode<#text>) diff --git a/Tests/LibWeb/Layout/input/grid/item-with-percentage-max-width.html b/Tests/LibWeb/Layout/input/grid/item-with-percentage-max-width.html new file mode 100644 index 00000000000..5173332b5a1 --- /dev/null +++ b/Tests/LibWeb/Layout/input/grid/item-with-percentage-max-width.html @@ -0,0 +1,20 @@ + +
One
Two
\ No newline at end of file diff --git a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp index 46672beda6d..8b68ddc048e 100644 --- a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp @@ -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; }