From 6de701b5c3152af36eca2b0073db588d36ad7d1c Mon Sep 17 00:00:00 2001 From: PaddiM8 Date: Wed, 26 Jul 2023 00:50:08 +0200 Subject: [PATCH] LibWeb: Handle auto margins with flex and justify-content Auto margins used together with justify-content would previously result in children being positioned outside their parent. This was solved by letting auto margins take precedence when they are used, which was already implemented to some extent before, but not fully. --- .../expected/flex/justify-content-1.txt | 32 +- ...justify-content-with-margin-auto-child.txt | 293 ++++++++++++++++++ ...ustify-content-with-margin-auto-child.html | 56 ++++ .../LibWeb/Layout/FlexFormattingContext.cpp | 38 +-- 4 files changed, 385 insertions(+), 34 deletions(-) create mode 100644 Tests/LibWeb/Layout/expected/flex/justify-content-with-margin-auto-child.txt create mode 100644 Tests/LibWeb/Layout/input/flex/justify-content-with-margin-auto-child.html diff --git a/Tests/LibWeb/Layout/expected/flex/justify-content-1.txt b/Tests/LibWeb/Layout/expected/flex/justify-content-1.txt index be7303da24..3e7d109ea8 100644 --- a/Tests/LibWeb/Layout/expected/flex/justify-content-1.txt +++ b/Tests/LibWeb/Layout/expected/flex/justify-content-1.txt @@ -148,9 +148,9 @@ 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 (12,508) content-size 50x50 flex-item [BFC] children: inline + BlockContainer
at (116,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: [12,508 41.234375x17.46875] + frag 0 from TextNode start: 0, length: 5, rect: [116,508 41.234375x17.46875] "start" TextNode <#text> BlockContainer
at (64,508) content-size 50x50 flex-item [BFC] children: inline @@ -158,9 +158,9 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline frag 0 from TextNode start: 0, length: 1, rect: [64,508 9.34375x17.46875] "a" TextNode <#text> - BlockContainer
at (116,508) content-size 50x50 flex-item [BFC] children: inline + BlockContainer
at (12,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: [116,508 9.46875x17.46875] + frag 0 from TextNode start: 0, length: 1, rect: [12,508 9.46875x17.46875] "b" TextNode <#text> BlockContainer <(anonymous)> at (10,568) content-size 780x0 children: inline @@ -202,9 +202,9 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline 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 (12,694) content-size 50x50 flex-item [BFC] children: inline + BlockContainer
at (116,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: [12,694 61.765625x17.46875] + frag 0 from TextNode start: 0, length: 8, rect: [116,694 61.765625x17.46875] "flex-end" TextNode <#text> BlockContainer
at (64,694) content-size 50x50 flex-item [BFC] children: inline @@ -212,9 +212,9 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline frag 0 from TextNode start: 0, length: 1, rect: [64,694 9.34375x17.46875] "a" TextNode <#text> - BlockContainer
at (116,694) content-size 50x50 flex-item [BFC] children: inline + BlockContainer
at (12,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: [116,694 9.46875x17.46875] + frag 0 from TextNode start: 0, length: 1, rect: [12,694 9.46875x17.46875] "b" TextNode <#text> BlockContainer <(anonymous)> at (10,754) content-size 780x0 children: inline @@ -436,9 +436,9 @@ 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,3420) content-size 50x50 flex-item [BFC] children: inline + BlockContainer
at (12,3524) 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,3420 41.234375x17.46875] + frag 0 from TextNode start: 0, length: 5, rect: [12,3524 41.234375x17.46875] "start" TextNode <#text> BlockContainer
at (12,3472) content-size 50x50 flex-item [BFC] children: inline @@ -446,9 +446,9 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline frag 0 from TextNode start: 0, length: 1, rect: [12,3472 9.34375x17.46875] "a" TextNode <#text> - BlockContainer
at (12,3524) content-size 50x50 flex-item [BFC] children: inline + BlockContainer
at (12,3420) 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,3524 9.46875x17.46875] + frag 0 from TextNode start: 0, length: 1, rect: [12,3420 9.46875x17.46875] "b" TextNode <#text> BlockContainer <(anonymous)> at (10,3720) content-size 780x0 children: inline @@ -490,9 +490,9 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline 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,4326) content-size 50x50 flex-item [BFC] children: inline + BlockContainer
at (12,4430) 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,4326 61.765625x17.46875] + frag 0 from TextNode start: 0, length: 8, rect: [12,4430 61.765625x17.46875] "flex-end" TextNode <#text> BlockContainer
at (12,4378) content-size 50x50 flex-item [BFC] children: inline @@ -500,9 +500,9 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline frag 0 from TextNode start: 0, length: 1, rect: [12,4378 9.34375x17.46875] "a" TextNode <#text> - BlockContainer
at (12,4430) content-size 50x50 flex-item [BFC] children: inline + BlockContainer
at (12,4326) 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,4430 9.46875x17.46875] + frag 0 from TextNode start: 0, length: 1, rect: [12,4326 9.46875x17.46875] "b" TextNode <#text> BlockContainer <(anonymous)> at (10,4626) content-size 780x0 children: inline diff --git a/Tests/LibWeb/Layout/expected/flex/justify-content-with-margin-auto-child.txt b/Tests/LibWeb/Layout/expected/flex/justify-content-with-margin-auto-child.txt new file mode 100644 index 0000000000..9158e3dd5d --- /dev/null +++ b/Tests/LibWeb/Layout/expected/flex/justify-content-with-margin-auto-child.txt @@ -0,0 +1,293 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (1,1) content-size 798x2930 [BFC] children: not-inline + BlockContainer at (10,10) content-size 780x2912 children: not-inline + BlockContainer <(anonymous)> at (10,10) content-size 780x0 children: inline + TextNode <#text> + Box at (11,11) content-size 300x60 flex-container(row) [FFC] children: not-inline + BlockContainer
at (60,12) 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: [60,12 41.234375x17.46875] + "start" + TextNode <#text> + BlockContainer
at (160,12) 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: [160,12 9.34375x17.46875] + "a" + TextNode <#text> + BlockContainer
at (260,12) 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: [260,12 9.46875x17.46875] + "b" + TextNode <#text> + BlockContainer <(anonymous)> at (10,72) content-size 780x0 children: inline + TextNode <#text> + Box at (11,73) content-size 300x60 flex-container(row) [FFC] children: not-inline + BlockContainer
at (60,74) content-size 50x50 flex-item [BFC] children: inline + line 0 width: 76.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 10, rect: [60,74 76.8125x17.46875] + "flex-start" + TextNode <#text> + BlockContainer
at (160,74) 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: [160,74 9.34375x17.46875] + "a" + TextNode <#text> + BlockContainer
at (260,74) 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: [260,74 9.46875x17.46875] + "b" + TextNode <#text> + BlockContainer <(anonymous)> at (10,134) content-size 780x0 children: inline + TextNode <#text> + Box at (11,135) content-size 300x60 flex-container(row) [FFC] children: not-inline + BlockContainer
at (12,136) 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,136 26.1875x17.46875] + "end" + TextNode <#text> + BlockContainer
at (112,136) 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: [112,136 9.34375x17.46875] + "a" + TextNode <#text> + BlockContainer
at (212,136) 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: [212,136 9.46875x17.46875] + "b" + TextNode <#text> + BlockContainer <(anonymous)> at (10,196) content-size 780x0 children: inline + TextNode <#text> + Box at (11,197) content-size 300x60 flex-container(row) [FFC] children: not-inline + BlockContainer
at (12,198) 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,198 61.765625x17.46875] + "flex-end" + TextNode <#text> + BlockContainer
at (112,198) 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: [112,198 9.34375x17.46875] + "a" + TextNode <#text> + BlockContainer
at (212,198) 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: [212,198 9.46875x17.46875] + "b" + TextNode <#text> + BlockContainer <(anonymous)> at (10,258) content-size 780x0 children: inline + TextNode <#text> + Box at (11,259) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline + BlockContainer
at (260,260) 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,260 41.234375x17.46875] + "start" + TextNode <#text> + BlockContainer
at (160,260) 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: [160,260 9.34375x17.46875] + "a" + TextNode <#text> + BlockContainer
at (60,260) 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: [60,260 9.46875x17.46875] + "b" + TextNode <#text> + BlockContainer <(anonymous)> at (10,320) content-size 780x0 children: inline + TextNode <#text> + Box at (11,321) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline + BlockContainer
at (260,322) content-size 50x50 flex-item [BFC] children: inline + line 0 width: 76.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 10, rect: [260,322 76.8125x17.46875] + "flex-start" + TextNode <#text> + BlockContainer
at (160,322) 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: [160,322 9.34375x17.46875] + "a" + TextNode <#text> + BlockContainer
at (60,322) 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: [60,322 9.46875x17.46875] + "b" + TextNode <#text> + BlockContainer <(anonymous)> at (10,382) content-size 780x0 children: inline + TextNode <#text> + Box at (11,383) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline + BlockContainer
at (212,384) 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: [212,384 26.1875x17.46875] + "end" + TextNode <#text> + BlockContainer
at (112,384) 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: [112,384 9.34375x17.46875] + "a" + TextNode <#text> + BlockContainer
at (12,384) 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,384 9.46875x17.46875] + "b" + TextNode <#text> + BlockContainer <(anonymous)> at (10,444) content-size 780x0 children: inline + TextNode <#text> + Box at (11,445) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline + BlockContainer
at (212,446) 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: [212,446 61.765625x17.46875] + "flex-end" + TextNode <#text> + BlockContainer
at (112,446) 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: [112,446 9.34375x17.46875] + "a" + TextNode <#text> + BlockContainer
at (12,446) 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,446 9.46875x17.46875] + "b" + TextNode <#text> + BlockContainer <(anonymous)> at (10,506) content-size 780x0 children: inline + TextNode <#text> + Box at (11,507) content-size 60x300 flex-container(column) [FFC] children: not-inline + BlockContainer
at (20,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: [20,508 41.234375x17.46875] + "start" + TextNode <#text> + BlockContainer
at (20,560) 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: [20,560 9.34375x17.46875] + "a" + TextNode <#text> + BlockContainer
at (20,612) 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: [20,612 9.46875x17.46875] + "b" + TextNode <#text> + BlockContainer <(anonymous)> at (10,808) content-size 780x0 children: inline + TextNode <#text> + Box at (11,809) content-size 60x300 flex-container(column) [FFC] children: not-inline + BlockContainer
at (20,810) content-size 50x50 flex-item [BFC] children: inline + line 0 width: 76.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 10, rect: [20,810 76.8125x17.46875] + "flex-start" + TextNode <#text> + BlockContainer
at (20,862) 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: [20,862 9.34375x17.46875] + "a" + TextNode <#text> + BlockContainer
at (20,914) 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: [20,914 9.46875x17.46875] + "b" + TextNode <#text> + BlockContainer <(anonymous)> at (10,1110) content-size 780x0 children: inline + TextNode <#text> + Box at (11,1111) content-size 60x300 flex-container(column) [FFC] children: not-inline + BlockContainer
at (12,1256) 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,1256 26.1875x17.46875] + "end" + TextNode <#text> + BlockContainer
at (12,1308) 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,1308 9.34375x17.46875] + "a" + TextNode <#text> + BlockContainer
at (12,1360) 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,1360 9.46875x17.46875] + "b" + TextNode <#text> + BlockContainer <(anonymous)> at (10,1412) content-size 780x0 children: inline + TextNode <#text> + Box at (11,1413) content-size 60x300 flex-container(column) [FFC] children: not-inline + BlockContainer
at (12,1558) 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,1558 61.765625x17.46875] + "flex-end" + TextNode <#text> + BlockContainer
at (12,1610) 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,1610 9.34375x17.46875] + "a" + TextNode <#text> + BlockContainer
at (12,1662) 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,1662 9.46875x17.46875] + "b" + TextNode <#text> + BlockContainer <(anonymous)> at (10,1714) content-size 780x0 children: inline + TextNode <#text> + Box at (11,1715) content-size 60x300 flex-container(column-reverse) [FFC] children: not-inline + BlockContainer
at (20,1820) 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: [20,1820 41.234375x17.46875] + "start" + TextNode <#text> + BlockContainer
at (20,1768) 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: [20,1768 9.34375x17.46875] + "a" + TextNode <#text> + BlockContainer
at (20,1716) 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: [20,1716 9.46875x17.46875] + "b" + TextNode <#text> + BlockContainer <(anonymous)> at (10,2016) content-size 780x0 children: inline + TextNode <#text> + Box at (11,2017) content-size 60x300 flex-container(column-reverse) [FFC] children: not-inline + BlockContainer
at (20,2266) content-size 50x50 flex-item [BFC] children: inline + line 0 width: 76.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 10, rect: [20,2266 76.8125x17.46875] + "flex-start" + TextNode <#text> + BlockContainer
at (20,2214) 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: [20,2214 9.34375x17.46875] + "a" + TextNode <#text> + BlockContainer
at (20,2162) 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: [20,2162 9.46875x17.46875] + "b" + TextNode <#text> + BlockContainer <(anonymous)> at (10,2318) content-size 780x0 children: inline + TextNode <#text> + Box at (11,2319) content-size 60x300 flex-container(column-reverse) [FFC] children: not-inline + BlockContainer
at (12,2568) 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,2568 26.1875x17.46875] + "end" + TextNode <#text> + BlockContainer
at (12,2516) 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,2516 9.34375x17.46875] + "a" + TextNode <#text> + BlockContainer
at (12,2464) 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,2464 9.46875x17.46875] + "b" + TextNode <#text> + BlockContainer <(anonymous)> at (10,2620) content-size 780x0 children: inline + TextNode <#text> + Box at (11,2621) content-size 60x300 flex-container(column-reverse) [FFC] children: not-inline + BlockContainer
at (12,2726) 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,2726 61.765625x17.46875] + "flex-end" + TextNode <#text> + BlockContainer
at (12,2674) 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,2674 9.34375x17.46875] + "a" + TextNode <#text> + BlockContainer
at (12,2622) 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,2622 9.46875x17.46875] + "b" + TextNode <#text> + BlockContainer <(anonymous)> at (10,2922) content-size 780x0 children: inline + TextNode <#text> diff --git a/Tests/LibWeb/Layout/input/flex/justify-content-with-margin-auto-child.html b/Tests/LibWeb/Layout/input/flex/justify-content-with-margin-auto-child.html new file mode 100644 index 0000000000..eb6ac4f5f5 --- /dev/null +++ b/Tests/LibWeb/Layout/input/flex/justify-content-with-margin-auto-child.html @@ -0,0 +1,56 @@ + + +
start
a
b
+
flex-start
a
b
+
end
a
b
+
flex-end
a
b
+
start
a
b
+
flex-start
a
b
+
end
a
b
+
flex-end
a
b
+
start
a
b
+
flex-start
a
b
+
end
a
b
+
flex-end
a
b
+
start
a
b
+
flex-start
a
b
+
end
a
b
+
flex-end
a
b
diff --git a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp index 35b9c96016..dee505204f 100644 --- a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp @@ -1367,26 +1367,28 @@ void FlexFormattingContext::distribute_any_remaining_free_space() }; auto flex_region_render_cursor = FlexRegionRenderCursor::Left; - switch (flex_container().computed_values().justify_content()) { - case CSS::JustifyContent::FlexStart: - case CSS::JustifyContent::Center: - case CSS::JustifyContent::SpaceAround: - case CSS::JustifyContent::SpaceBetween: - case CSS::JustifyContent::SpaceEvenly: - if (is_direction_reverse()) { + if (auto_margins == 0) { + switch (flex_container().computed_values().justify_content()) { + 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; + } + break; + default: + break; } - 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; - } - break; - default: - break; } CSSPixels cursor_offset = initial_offset;