diff --git a/Tests/LibWeb/Layout/expected/flex/flex-column-reverse-constrained-wrap.txt b/Tests/LibWeb/Layout/expected/flex/flex-column-reverse-constrained-wrap.txt new file mode 100644 index 00000000000..cbc3c825d4f --- /dev/null +++ b/Tests/LibWeb/Layout/expected/flex/flex-column-reverse-constrained-wrap.txt @@ -0,0 +1,38 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x600 [BFC] children: not-inline + BlockContainer at (8,8) content-size 784x252 children: not-inline + Box at (9,9) content-size 250x250 flex-container(column-reverse) [FFC] children: not-inline + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + BlockContainer at (10,158) content-size 100x100 flex-item [BFC] children: inline + frag 0 from TextNode start: 0, length: 1, rect: [10,158 6.34375x17] baseline: 13.296875 + "1" + TextNode <#text> + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + BlockContainer at (10,56) content-size 100x100 flex-item [BFC] children: inline + frag 0 from TextNode start: 0, length: 1, rect: [10,56 8.8125x17] baseline: 13.296875 + "2" + TextNode <#text> + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + BlockContainer at (135,158) content-size 100x100 flex-item [BFC] children: inline + frag 0 from TextNode start: 0, length: 1, rect: [135,158 9.09375x17] baseline: 13.296875 + "3" + TextNode <#text> + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + BlockContainer <(anonymous)> at (8,260) content-size 784x0 children: inline + TextNode <#text> + +ViewportPaintable (Viewport<#document>) [0,0 800x600] + PaintableWithLines (BlockContainer) [0,0 800x600] + PaintableWithLines (BlockContainer) [8,8 784x252] + PaintableBox (Box
.container.column) [8,8 252x252] + PaintableWithLines (BlockContainer
.box) [9,157 102x102] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer
.box) [9,55 102x102] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer
.box) [134,157 102x102] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer(anonymous)) [8,260 784x0] diff --git a/Tests/LibWeb/Layout/expected/flex/flex-row-reverse-constrained-wrap.txt b/Tests/LibWeb/Layout/expected/flex/flex-row-reverse-constrained-wrap.txt new file mode 100644 index 00000000000..dcb5668b034 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/flex/flex-row-reverse-constrained-wrap.txt @@ -0,0 +1,38 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x600 [BFC] children: not-inline + BlockContainer at (8,8) content-size 784x206 children: not-inline + Box at (9,9) content-size 250x204 flex-container(row-reverse) [FFC] children: not-inline + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + BlockContainer at (158,10) content-size 100x100 flex-item [BFC] children: inline + frag 0 from TextNode start: 0, length: 1, rect: [158,10 6.34375x17] baseline: 13.296875 + "1" + TextNode <#text> + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + BlockContainer at (56,10) content-size 100x100 flex-item [BFC] children: inline + frag 0 from TextNode start: 0, length: 1, rect: [56,10 8.8125x17] baseline: 13.296875 + "2" + TextNode <#text> + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + BlockContainer at (158,112) content-size 100x100 flex-item [BFC] children: inline + frag 0 from TextNode start: 0, length: 1, rect: [158,112 9.09375x17] baseline: 13.296875 + "3" + TextNode <#text> + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + BlockContainer <(anonymous)> at (8,214) content-size 784x0 children: inline + TextNode <#text> + +ViewportPaintable (Viewport<#document>) [0,0 800x600] + PaintableWithLines (BlockContainer) [0,0 800x600] + PaintableWithLines (BlockContainer) [8,8 784x206] + PaintableBox (Box
.container) [8,8 252x206] + PaintableWithLines (BlockContainer
.box) [157,9 102x102] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer
.box) [55,9 102x102] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer
.box) [157,111 102x102] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer(anonymous)) [8,214 784x0] diff --git a/Tests/LibWeb/Layout/input/flex/flex-column-reverse-constrained-wrap.html b/Tests/LibWeb/Layout/input/flex/flex-column-reverse-constrained-wrap.html new file mode 100644 index 00000000000..919ad8fb8ff --- /dev/null +++ b/Tests/LibWeb/Layout/input/flex/flex-column-reverse-constrained-wrap.html @@ -0,0 +1,25 @@ + +
+
1
+
2
+
3
+
diff --git a/Tests/LibWeb/Layout/input/flex/flex-row-reverse-constrained-wrap.html b/Tests/LibWeb/Layout/input/flex/flex-row-reverse-constrained-wrap.html new file mode 100644 index 00000000000..385df2f6686 --- /dev/null +++ b/Tests/LibWeb/Layout/input/flex/flex-row-reverse-constrained-wrap.html @@ -0,0 +1,24 @@ + +
+
1
+
2
+
3
+
diff --git a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp index 4cc27ef8e83..486b6b7c4ae 100644 --- a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp @@ -295,14 +295,8 @@ void FlexFormattingContext::generate_anonymous_flex_items() auto order_bucket = order_item_bucket.get(key); if (order_bucket.has_value()) { auto& items = order_bucket.value(); - if (is_direction_reverse()) { - for (auto item : items.in_reverse()) { - m_flex_items.append(move(item)); - } - } else { - for (auto item : items) { - m_flex_items.append(move(item)); - } + for (auto item : items) { + m_flex_items.append(move(item)); } } } @@ -776,7 +770,11 @@ void FlexFormattingContext::collect_flex_items_into_flex_lines() if (is_single_line()) { FlexLine line; for (auto& item : m_flex_items) { - line.items.append(item); + if (is_direction_reverse()) { + line.items.prepend(item); + } else { + line.items.append(item); + } } m_flex_lines.append(move(line)); return; @@ -800,7 +798,13 @@ void FlexFormattingContext::collect_flex_items_into_flex_lines() line = {}; line_main_size = 0; } - line.items.append(item); + + if (is_direction_reverse()) { + line.items.prepend(item); + } else { + line.items.append(item); + } + line_main_size += outer_hypothetical_main_size; // CSS-FLEXBOX-2: Account for gap between flex items. line_main_size += main_gap();