From a26f2f0aab396bdafa5f29c44c8da38271d453ab Mon Sep 17 00:00:00 2001 From: PaddiM8 Date: Tue, 25 Jul 2023 23:51:29 +0200 Subject: [PATCH] LibWeb: Handle flex reverse togther with justify-content Containers with both flex reverse and justify content would sometimes place children outside the container. This happened because it assumed any reversed container would have items aligned to the right, which isn't true when using eg. `flex-end`. Both `justify-content: start` and `justify-content: end` are now also independent of the reverseness. --- .../expected/flex/justify-content-1.txt | 72 +++++++++---------- .../LibWeb/Layout/FlexFormattingContext.cpp | 15 +++- 2 files changed, 48 insertions(+), 39 deletions(-) diff --git a/Tests/LibWeb/Layout/expected/flex/justify-content-1.txt b/Tests/LibWeb/Layout/expected/flex/justify-content-1.txt index f1ff65e86d..be7303da24 100644 --- a/Tests/LibWeb/Layout/expected/flex/justify-content-1.txt +++ b/Tests/LibWeb/Layout/expected/flex/justify-content-1.txt @@ -148,19 +148,19 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline BlockContainer <(anonymous)> at (10,506) content-size 780x0 children: inline TextNode <#text> Box at (11,507) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline - BlockContainer
at (260,508) content-size 50x50 flex-item [BFC] children: inline + BlockContainer
at (12,508) content-size 50x50 flex-item [BFC] children: inline line 0 width: 41.234375, height: 17.46875, bottom: 17.46875, baseline: 13.53125 - frag 0 from TextNode start: 0, length: 5, rect: [260,508 41.234375x17.46875] + frag 0 from TextNode start: 0, length: 5, rect: [12,508 41.234375x17.46875] "start" TextNode <#text> - BlockContainer
at (208,508) content-size 50x50 flex-item [BFC] children: inline + BlockContainer
at (64,508) content-size 50x50 flex-item [BFC] children: inline line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125 - frag 0 from TextNode start: 0, length: 1, rect: [208,508 9.34375x17.46875] + frag 0 from TextNode start: 0, length: 1, rect: [64,508 9.34375x17.46875] "a" TextNode <#text> - BlockContainer
at (156,508) content-size 50x50 flex-item [BFC] children: inline + BlockContainer
at (116,508) content-size 50x50 flex-item [BFC] children: inline line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125 - frag 0 from TextNode start: 0, length: 1, rect: [156,508 9.46875x17.46875] + frag 0 from TextNode start: 0, length: 1, rect: [116,508 9.46875x17.46875] "b" TextNode <#text> BlockContainer <(anonymous)> at (10,568) content-size 780x0 children: inline @@ -184,37 +184,37 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline BlockContainer <(anonymous)> at (10,630) content-size 780x0 children: inline TextNode <#text> Box at (11,631) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline - BlockContainer
at (-40,632) content-size 50x50 flex-item [BFC] children: inline + BlockContainer
at (260,632) content-size 50x50 flex-item [BFC] children: inline line 0 width: 26.1875, height: 17.46875, bottom: 17.46875, baseline: 13.53125 - frag 0 from TextNode start: 0, length: 3, rect: [-40,632 26.1875x17.46875] + frag 0 from TextNode start: 0, length: 3, rect: [260,632 26.1875x17.46875] "end" TextNode <#text> - BlockContainer
at (-92,632) content-size 50x50 flex-item [BFC] children: inline + BlockContainer
at (208,632) content-size 50x50 flex-item [BFC] children: inline line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125 - frag 0 from TextNode start: 0, length: 1, rect: [-92,632 9.34375x17.46875] + frag 0 from TextNode start: 0, length: 1, rect: [208,632 9.34375x17.46875] "a" TextNode <#text> - BlockContainer
at (-144,632) content-size 50x50 flex-item [BFC] children: inline + BlockContainer
at (156,632) content-size 50x50 flex-item [BFC] children: inline line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125 - frag 0 from TextNode start: 0, length: 1, rect: [-144,632 9.46875x17.46875] + frag 0 from TextNode start: 0, length: 1, rect: [156,632 9.46875x17.46875] "b" TextNode <#text> BlockContainer <(anonymous)> at (10,692) content-size 780x0 children: inline TextNode <#text> Box at (11,693) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline - BlockContainer
at (-40,694) content-size 50x50 flex-item [BFC] children: inline + BlockContainer
at (12,694) content-size 50x50 flex-item [BFC] children: inline line 0 width: 61.765625, height: 17.46875, bottom: 17.46875, baseline: 13.53125 - frag 0 from TextNode start: 0, length: 8, rect: [-40,694 61.765625x17.46875] + frag 0 from TextNode start: 0, length: 8, rect: [12,694 61.765625x17.46875] "flex-end" TextNode <#text> - BlockContainer
at (-92,694) content-size 50x50 flex-item [BFC] children: inline + BlockContainer
at (64,694) content-size 50x50 flex-item [BFC] children: inline line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125 - frag 0 from TextNode start: 0, length: 1, rect: [-92,694 9.34375x17.46875] + frag 0 from TextNode start: 0, length: 1, rect: [64,694 9.34375x17.46875] "a" TextNode <#text> - BlockContainer
at (-144,694) content-size 50x50 flex-item [BFC] children: inline + BlockContainer
at (116,694) content-size 50x50 flex-item [BFC] children: inline line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125 - frag 0 from TextNode start: 0, length: 1, rect: [-144,694 9.46875x17.46875] + frag 0 from TextNode start: 0, length: 1, rect: [116,694 9.46875x17.46875] "b" TextNode <#text> BlockContainer <(anonymous)> at (10,754) content-size 780x0 children: inline @@ -436,19 +436,19 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline BlockContainer <(anonymous)> at (10,3418) content-size 780x0 children: inline TextNode <#text> Box at (11,3419) content-size 60x300 flex-container(column-reverse) [FFC] children: not-inline - BlockContainer
at (12,3668) content-size 50x50 flex-item [BFC] children: inline + BlockContainer
at (12,3420) content-size 50x50 flex-item [BFC] children: inline line 0 width: 41.234375, height: 17.46875, bottom: 17.46875, baseline: 13.53125 - frag 0 from TextNode start: 0, length: 5, rect: [12,3668 41.234375x17.46875] + frag 0 from TextNode start: 0, length: 5, rect: [12,3420 41.234375x17.46875] "start" TextNode <#text> - BlockContainer
at (12,3616) content-size 50x50 flex-item [BFC] children: inline + BlockContainer
at (12,3472) content-size 50x50 flex-item [BFC] children: inline line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125 - frag 0 from TextNode start: 0, length: 1, rect: [12,3616 9.34375x17.46875] + frag 0 from TextNode start: 0, length: 1, rect: [12,3472 9.34375x17.46875] "a" TextNode <#text> - BlockContainer
at (12,3564) content-size 50x50 flex-item [BFC] children: inline + BlockContainer
at (12,3524) content-size 50x50 flex-item [BFC] children: inline line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125 - frag 0 from TextNode start: 0, length: 1, rect: [12,3564 9.46875x17.46875] + frag 0 from TextNode start: 0, length: 1, rect: [12,3524 9.46875x17.46875] "b" TextNode <#text> BlockContainer <(anonymous)> at (10,3720) content-size 780x0 children: inline @@ -472,37 +472,37 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline BlockContainer <(anonymous)> at (10,4022) content-size 780x0 children: inline TextNode <#text> Box at (11,4023) content-size 60x300 flex-container(column-reverse) [FFC] children: not-inline - BlockContainer
at (12,3972) content-size 50x50 flex-item [BFC] children: inline + BlockContainer
at (12,4272) content-size 50x50 flex-item [BFC] children: inline line 0 width: 26.1875, height: 17.46875, bottom: 17.46875, baseline: 13.53125 - frag 0 from TextNode start: 0, length: 3, rect: [12,3972 26.1875x17.46875] + frag 0 from TextNode start: 0, length: 3, rect: [12,4272 26.1875x17.46875] "end" TextNode <#text> - BlockContainer
at (12,3920) content-size 50x50 flex-item [BFC] children: inline + BlockContainer
at (12,4220) content-size 50x50 flex-item [BFC] children: inline line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125 - frag 0 from TextNode start: 0, length: 1, rect: [12,3920 9.34375x17.46875] + frag 0 from TextNode start: 0, length: 1, rect: [12,4220 9.34375x17.46875] "a" TextNode <#text> - BlockContainer
at (12,3868) content-size 50x50 flex-item [BFC] children: inline + BlockContainer
at (12,4168) content-size 50x50 flex-item [BFC] children: inline line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125 - frag 0 from TextNode start: 0, length: 1, rect: [12,3868 9.46875x17.46875] + frag 0 from TextNode start: 0, length: 1, rect: [12,4168 9.46875x17.46875] "b" TextNode <#text> BlockContainer <(anonymous)> at (10,4324) content-size 780x0 children: inline TextNode <#text> Box at (11,4325) content-size 60x300 flex-container(column-reverse) [FFC] children: not-inline - BlockContainer
at (12,4274) content-size 50x50 flex-item [BFC] children: inline + BlockContainer
at (12,4326) content-size 50x50 flex-item [BFC] children: inline line 0 width: 61.765625, height: 17.46875, bottom: 17.46875, baseline: 13.53125 - frag 0 from TextNode start: 0, length: 8, rect: [12,4274 61.765625x17.46875] + frag 0 from TextNode start: 0, length: 8, rect: [12,4326 61.765625x17.46875] "flex-end" TextNode <#text> - BlockContainer
at (12,4222) content-size 50x50 flex-item [BFC] children: inline + BlockContainer
at (12,4378) content-size 50x50 flex-item [BFC] children: inline line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125 - frag 0 from TextNode start: 0, length: 1, rect: [12,4222 9.34375x17.46875] + frag 0 from TextNode start: 0, length: 1, rect: [12,4378 9.34375x17.46875] "a" TextNode <#text> - BlockContainer
at (12,4170) content-size 50x50 flex-item [BFC] children: inline + BlockContainer
at (12,4430) content-size 50x50 flex-item [BFC] children: inline line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125 - frag 0 from TextNode start: 0, length: 1, rect: [12,4170 9.46875x17.46875] + frag 0 from TextNode start: 0, length: 1, rect: [12,4430 9.46875x17.46875] "b" TextNode <#text> BlockContainer <(anonymous)> at (10,4626) content-size 780x0 children: inline diff --git a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp index 4fd48a79c8..35b9c96016 100644 --- a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp @@ -1303,6 +1303,8 @@ void FlexFormattingContext::distribute_any_remaining_free_space() if (auto_margins == 0 && number_of_items > 0) { switch (flex_container().computed_values().justify_content()) { case CSS::JustifyContent::Start: + initial_offset = 0; + break; case CSS::JustifyContent::FlexStart: if (is_direction_reverse()) { initial_offset = inner_main_size(flex_container()); @@ -1311,6 +1313,8 @@ void FlexFormattingContext::distribute_any_remaining_free_space() } break; case CSS::JustifyContent::End: + initial_offset = inner_main_size(flex_container()); + break; case CSS::JustifyContent::FlexEnd: if (is_direction_reverse()) { initial_offset = 0; @@ -1364,13 +1368,18 @@ void FlexFormattingContext::distribute_any_remaining_free_space() auto flex_region_render_cursor = FlexRegionRenderCursor::Left; switch (flex_container().computed_values().justify_content()) { - case CSS::JustifyContent::Start: case CSS::JustifyContent::FlexStart: + case CSS::JustifyContent::Center: + case CSS::JustifyContent::SpaceAround: + case CSS::JustifyContent::SpaceBetween: + case CSS::JustifyContent::SpaceEvenly: if (is_direction_reverse()) { flex_region_render_cursor = FlexRegionRenderCursor::Right; } break; case CSS::JustifyContent::End: + flex_region_render_cursor = FlexRegionRenderCursor::Right; + break; case CSS::JustifyContent::FlexEnd: if (!is_direction_reverse()) { flex_region_render_cursor = FlexRegionRenderCursor::Right; @@ -1392,7 +1401,7 @@ void FlexFormattingContext::distribute_any_remaining_free_space() + item.padding.main_after + space_between_items; - if (is_direction_reverse()) { + 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; cursor_offset -= amount_of_main_size_used; } else if (flex_region_render_cursor == FlexRegionRenderCursor::Right) { @@ -1404,7 +1413,7 @@ void FlexFormattingContext::distribute_any_remaining_free_space() } }; - if (is_direction_reverse() || flex_region_render_cursor == FlexRegionRenderCursor::Right) { + 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);