diff --git a/Tests/LibWeb/Layout/expected/flex/reverse-flex-layout-with-space-between-and-space-around.txt b/Tests/LibWeb/Layout/expected/flex/reverse-flex-layout-with-space-between-and-space-around.txt new file mode 100644 index 0000000000..5d199496d3 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/flex/reverse-flex-layout-with-space-between-and-space-around.txt @@ -0,0 +1,73 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x616 [BFC] children: not-inline + BlockContainer at (8,8) content-size 784x600 children: not-inline + Box at (8,8) content-size 150x150 flex-container(row) [FFC] children: not-inline + BlockContainer at (12.619791,8) content-size 30.078125x150 flex-item [BFC] children: inline + line 0 width: 30.078125, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 4, rect: [12.619791,8 30.078125x17.46875] + "Well" + TextNode <#text> + BlockContainer at (51.9375,8) content-size 36.84375x150 flex-item [BFC] children: inline + line 0 width: 36.84375, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 5, rect: [51.9375,8 36.84375x17.46875] + "hello" + TextNode <#text> + BlockContainer at (98.020833,8) content-size 55.359375x150 flex-item [BFC] children: inline + line 0 width: 55.359375, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 7, rect: [98.020833,8 55.359375x17.46875] + "friends" + TextNode <#text> + BlockContainer <(anonymous)> at (8,158) content-size 784x0 children: inline + TextNode <#text> + Box at (8,158) content-size 150x150 flex-container(row-reverse) [FFC] children: not-inline + BlockContainer at (123.302083,158) content-size 30.078125x150 flex-item [BFC] children: inline + line 0 width: 30.078125, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 4, rect: [123.302083,158 30.078125x17.46875] + "Well" + TextNode <#text> + BlockContainer at (77.21875,158) content-size 36.84375x150 flex-item [BFC] children: inline + line 0 width: 36.84375, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 5, rect: [77.21875,158 36.84375x17.46875] + "hello" + TextNode <#text> + BlockContainer at (12.619791,158) content-size 55.359375x150 flex-item [BFC] children: inline + line 0 width: 55.359375, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 7, rect: [12.619791,158 55.359375x17.46875] + "friends" + TextNode <#text> + BlockContainer <(anonymous)> at (8,308) content-size 784x0 children: inline + TextNode <#text> + Box at (8,308) content-size 150x150 flex-container(column) [FFC] children: not-inline + BlockContainer at (8,324.265625) content-size 150x17.46875 flex-item [BFC] children: inline + line 0 width: 30.078125, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 4, rect: [8,324.265625 30.078125x17.46875] + "Well" + TextNode <#text> + BlockContainer at (8,374.265625) content-size 150x17.46875 flex-item [BFC] children: inline + line 0 width: 36.84375, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 5, rect: [8,374.265625 36.84375x17.46875] + "hello" + TextNode <#text> + BlockContainer at (8,424.265625) content-size 150x17.46875 flex-item [BFC] children: inline + line 0 width: 55.359375, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 7, rect: [8,424.265625 55.359375x17.46875] + "friends" + TextNode <#text> + BlockContainer <(anonymous)> at (8,458) content-size 784x0 children: inline + TextNode <#text> + Box at (8,458) content-size 150x150 flex-container(column-reverse) [FFC] children: not-inline + BlockContainer at (8,574.265625) content-size 150x17.46875 flex-item [BFC] children: inline + line 0 width: 30.078125, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 4, rect: [8,574.265625 30.078125x17.46875] + "Well" + TextNode <#text> + BlockContainer at (8,524.265625) content-size 150x17.46875 flex-item [BFC] children: inline + line 0 width: 36.84375, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 5, rect: [8,524.265625 36.84375x17.46875] + "hello" + TextNode <#text> + BlockContainer at (8,474.265625) content-size 150x17.46875 flex-item [BFC] children: inline + line 0 width: 55.359375, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 7, rect: [8,474.265625 55.359375x17.46875] + "friends" + TextNode <#text> diff --git a/Tests/LibWeb/Layout/input/flex/reverse-flex-layout-with-space-between-and-space-around.html b/Tests/LibWeb/Layout/input/flex/reverse-flex-layout-with-space-between-and-space-around.html new file mode 100644 index 0000000000..908565f02d --- /dev/null +++ b/Tests/LibWeb/Layout/input/flex/reverse-flex-layout-with-space-between-and-space-around.html @@ -0,0 +1,20 @@ + +
Well
hello
friends
+
Well
hello
friends
+
Well
hello
friends
+
Well
hello
friends
\ No newline at end of file diff --git a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp index 98a27eecf8..05c4f0aa1d 100644 --- a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp @@ -1323,11 +1323,20 @@ void FlexFormattingContext::distribute_any_remaining_free_space() } break; case CSS::JustifyContent::SpaceBetween: + if (is_direction_reverse()) { + initial_offset = inner_main_size(flex_container()); + } else { + initial_offset = 0; + } space_between_items = flex_line.remaining_free_space / (number_of_items - 1); break; case CSS::JustifyContent::SpaceAround: space_between_items = flex_line.remaining_free_space / number_of_items; - initial_offset = space_between_items / 2.0; + if (is_direction_reverse()) { + initial_offset = inner_main_size(flex_container()) - space_between_items / 2.0; + } else { + initial_offset = space_between_items / 2.0; + } break; } }