diff --git a/Libraries/LibWeb/Layout/FlexFormattingContext.cpp b/Libraries/LibWeb/Layout/FlexFormattingContext.cpp index 3f1cfb62640..ae4b3e8299c 100644 --- a/Libraries/LibWeb/Layout/FlexFormattingContext.cpp +++ b/Libraries/LibWeb/Layout/FlexFormattingContext.cpp @@ -1394,7 +1394,7 @@ void FlexFormattingContext::distribute_any_remaining_free_space() CSSPixels cursor_offset = initial_offset; - auto place_item = [&](FlexItem& item) { + auto place_item = [&](FlexItem& item, size_t index) { // CSS-FLEXBOX-2: Account for gap between items. auto amount_of_main_size_used = item.main_size.value() + item.margins.main_before @@ -1403,8 +1403,15 @@ void FlexFormattingContext::distribute_any_remaining_free_space() + item.margins.main_after + item.borders.main_after + item.padding.main_after - + space_between_items - + main_gap(); + + space_between_items; + + if (!is_direction_reverse() && flex_region_render_cursor == FlexRegionRenderCursor::Right) { + if (index < flex_line.items.size() - 1) { + amount_of_main_size_used += main_gap(); + } + } else { + amount_of_main_size_used += main_gap(); + } if (is_direction_reverse() && flex_region_render_cursor == FlexRegionRenderCursor::Right) { item.main_offset = cursor_offset - item.main_size.value() - item.margins.main_after - item.borders.main_after - item.padding.main_after; @@ -1421,12 +1428,12 @@ void FlexFormattingContext::distribute_any_remaining_free_space() if (flex_region_render_cursor == FlexRegionRenderCursor::Right) { for (ssize_t i = flex_line.items.size() - 1; i >= 0; --i) { auto& item = flex_line.items[i]; - place_item(item); + place_item(item, i); } } else { for (size_t i = 0; i < flex_line.items.size(); ++i) { auto& item = flex_line.items[i]; - place_item(item); + place_item(item, i); } } } diff --git a/Tests/LibWeb/Layout/expected/flex-justify-end-gap.txt b/Tests/LibWeb/Layout/expected/flex-justify-end-gap.txt new file mode 100644 index 00000000000..e1bc8cdce7b --- /dev/null +++ b/Tests/LibWeb/Layout/expected/flex-justify-end-gap.txt @@ -0,0 +1,46 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x474 [BFC] children: not-inline + BlockContainer at (8,8) content-size 784x458 children: not-inline + Box at (10,10) content-size 50x400 flex-container(column) [FFC] children: not-inline + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + BlockContainer at (10,160) content-size 50x50 flex-item [BFC] children: not-inline + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + BlockContainer at (10,260) content-size 50x50 flex-item [BFC] children: not-inline + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + BlockContainer at (10,360) content-size 50x50 flex-item [BFC] children: not-inline + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + BlockContainer <(anonymous)> at (8,412) content-size 784x0 children: inline + TextNode <#text> + Box at (10,414) content-size 400x50 flex-container(row) [FFC] children: not-inline + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + BlockContainer at (160,414) content-size 50x50 flex-item [BFC] children: not-inline + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + BlockContainer at (260,414) content-size 50x50 flex-item [BFC] children: not-inline + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + BlockContainer at (360,414) content-size 50x50 flex-item [BFC] children: not-inline + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + BlockContainer <(anonymous)> at (8,466) content-size 784x0 children: inline + TextNode <#text> + TextNode <#text> + +ViewportPaintable (Viewport<#document>) [0,0 800x600] + PaintableWithLines (BlockContainer) [0,0 800x474] + PaintableWithLines (BlockContainer) [8,8 784x458] + PaintableBox (Box
.container.col) [8,8 54x404] + PaintableWithLines (BlockContainer
.item) [10,160 50x50] + PaintableWithLines (BlockContainer
.item) [10,260 50x50] + PaintableWithLines (BlockContainer
.item) [10,360 50x50] + PaintableWithLines (BlockContainer(anonymous)) [8,412 784x0] + PaintableBox (Box
.container.row) [8,412 404x54] + PaintableWithLines (BlockContainer
.item) [160,414 50x50] + PaintableWithLines (BlockContainer
.item) [260,414 50x50] + PaintableWithLines (BlockContainer
.item) [360,414 50x50] + PaintableWithLines (BlockContainer(anonymous)) [8,466 784x0] diff --git a/Tests/LibWeb/Layout/input/flex-justify-end-gap.html b/Tests/LibWeb/Layout/input/flex-justify-end-gap.html new file mode 100644 index 00000000000..95ded1b0cb0 --- /dev/null +++ b/Tests/LibWeb/Layout/input/flex-justify-end-gap.html @@ -0,0 +1,37 @@ + +
+
+
+
+
+
+
+
+
+
+