diff --git a/Tests/LibWeb/Layout/expected/grid/grid-item-with-fit-content-width.txt b/Tests/LibWeb/Layout/expected/grid/grid-item-with-fit-content-width.txt new file mode 100644 index 00000000000..2d4c5ba43dc --- /dev/null +++ b/Tests/LibWeb/Layout/expected/grid/grid-item-with-fit-content-width.txt @@ -0,0 +1,8 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (1,1) content-size 798x37.46875 [BFC] children: not-inline + Box at (10,10) content-size 780x19.46875 [GFC] children: not-inline + BlockContainer at (11,11) content-size 132.828125x17.46875 [BFC] children: inline + line 0 width: 132.828125, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 15, rect: [11,11 132.828125x17.46875] + "Press and Media" + TextNode <#text> diff --git a/Tests/LibWeb/Layout/input/grid/grid-item-with-fit-content-width.html b/Tests/LibWeb/Layout/input/grid/grid-item-with-fit-content-width.html new file mode 100644 index 00000000000..d9a07f6df34 --- /dev/null +++ b/Tests/LibWeb/Layout/input/grid/grid-item-with-fit-content-width.html @@ -0,0 +1,5 @@ +
Press and Media \ No newline at end of file diff --git a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp index 0b108ea3d47..609509a4e6b 100644 --- a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp @@ -1393,7 +1393,13 @@ void GridFormattingContext::resolve_grid_item_widths() box_state.border_right = border_right; auto const& computed_width = item.box().computed_values().width(); - auto used_width = computed_width.is_auto() ? (containing_block_width - box_state.border_left - box_state.border_right - box_state.padding_left - box_state.padding_right) : computed_width.to_px(grid_container(), containing_block_width); + CSSPixels used_width; + if (computed_width.is_auto()) + used_width = (containing_block_width - box_state.border_left - box_state.border_right - box_state.padding_left - box_state.padding_right); + else if (computed_width.is_fit_content()) + used_width = calculate_fit_content_width(item.box(), get_available_space_for_item(item)); + else + used_width = computed_width.to_px(grid_container(), containing_block_width); box_state.set_content_width(used_width); } }