From d3d67857b27b6f6a97fa9f8882170a5c7a2d9768 Mon Sep 17 00:00:00 2001 From: Aliaksandr Kalenik Date: Sun, 27 Aug 2023 02:05:58 +0200 Subject: [PATCH] LibWeb: Use containing block width to measure fit-content width in GFC When the grid layout gets to `resolve_items_box_metrics(GridDimension::Column)`, we've already determined the width of each column. However, the widths of the individual grid items themselves haven't been set. Rather than using `get_available_space_for_item()`, which returns an indefinite size if an item's width/height hasn't been set, we should use the already known track width as the available size to calculate the fit-content width. --- .../grid/place-items-center-nested-grids.txt | 28 +++++++++++++++++++ .../grid/place-items-center-nested-grids.html | 13 +++++++++ .../LibWeb/Layout/GridFormattingContext.cpp | 5 ++-- 3 files changed, 44 insertions(+), 2 deletions(-) create mode 100644 Tests/LibWeb/Layout/expected/grid/place-items-center-nested-grids.txt create mode 100644 Tests/LibWeb/Layout/input/grid/place-items-center-nested-grids.html diff --git a/Tests/LibWeb/Layout/expected/grid/place-items-center-nested-grids.txt b/Tests/LibWeb/Layout/expected/grid/place-items-center-nested-grids.txt new file mode 100644 index 00000000000..efd7d00598e --- /dev/null +++ b/Tests/LibWeb/Layout/expected/grid/place-items-center-nested-grids.txt @@ -0,0 +1,28 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x104.21875 [BFC] children: not-inline + Box at (8,8) content-size 784x88.21875 [GFC] children: not-inline + Box
at (8,8) content-size 784x88.21875 [GFC] children: not-inline + BlockContainer <(anonymous)> at (8,8) content-size 65.328125x88.21875 [BFC] children: inline + line 0 width: 50.5625, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 6, rect: [8,8 50.5625x17.46875] + "Making" + line 1 width: 80.234375, height: 17.9375, bottom: 35.40625, baseline: 13.53125 + frag 0 from TextNode start: 7, length: 8, rect: [8,25 80.234375x17.46875] + "Commerce" + line 2 width: 49.328125, height: 18.40625, bottom: 53.34375, baseline: 13.53125 + frag 0 from TextNode start: 16, length: 6, rect: [8,42 49.328125x17.46875] + "Better" + line 3 width: 25.625, height: 17.875, bottom: 70.28125, baseline: 13.53125 + frag 0 from TextNode start: 23, length: 3, rect: [8,60 25.625x17.46875] + "for" + line 4 width: 73.46875, height: 18.34375, bottom: 88.21875, baseline: 13.53125 + frag 0 from TextNode start: 27, length: 8, rect: [8,77 73.46875x17.46875] + "Everyone" + TextNode <#text> + +ViewportPaintable (Viewport<#document>) [0,0 800x600] + PaintableWithLines (BlockContainer) [0,0 800x104.21875] + PaintableBox (Box) [8,8 784x88.21875] + PaintableBox (Box
) [8,8 784x88.21875] + PaintableWithLines (BlockContainer(anonymous)) [8,8 65.328125x88.21875] overflow: [8,8 80.234375x88.21875] + TextPaintable (TextNode<#text>) diff --git a/Tests/LibWeb/Layout/input/grid/place-items-center-nested-grids.html b/Tests/LibWeb/Layout/input/grid/place-items-center-nested-grids.html new file mode 100644 index 00000000000..a8ea4c04e37 --- /dev/null +++ b/Tests/LibWeb/Layout/input/grid/place-items-center-nested-grids.html @@ -0,0 +1,13 @@ +
Making Commerce Better for Everyone \ No newline at end of file diff --git a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp index 2ede58a38f2..605c40617c8 100644 --- a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp @@ -1636,10 +1636,11 @@ void GridFormattingContext::resolve_grid_item_widths() }; CSSPixels used_width; + AvailableSpace available_space { AvailableSize::make_definite(containing_block_width), AvailableSize::make_indefinite() }; if (computed_width.is_auto()) { - used_width = try_compute_width(calculate_fit_content_width(item.box, get_available_space_for_item(item))); + used_width = try_compute_width(calculate_fit_content_width(item.box, available_space)); } else if (computed_width.is_fit_content()) { - used_width = try_compute_width(calculate_fit_content_width(item.box, get_available_space_for_item(item))); + used_width = try_compute_width(calculate_fit_content_width(item.box, available_space)); } else { used_width = try_compute_width(computed_width.to_px(grid_container(), containing_block_width)); }