diff --git a/Tests/LibWeb/Layout/expected/flex/flex-constrained-wrap-reverse.txt b/Tests/LibWeb/Layout/expected/flex/flex-constrained-wrap-reverse.txt new file mode 100644 index 00000000000..8234c79df2a --- /dev/null +++ b/Tests/LibWeb/Layout/expected/flex/flex-constrained-wrap-reverse.txt @@ -0,0 +1,131 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x1024 [BFC] children: not-inline + BlockContainer at (8,8) content-size 784x1008 children: not-inline + Box at (9,9) content-size 250x250 flex-container(row) [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 (112,158) content-size 100x100 flex-item [BFC] children: inline + frag 0 from TextNode start: 0, length: 1, rect: [112,158 8.8125x17] baseline: 13.296875 + "2" + TextNode <#text> + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + BlockContainer at (10,33) content-size 100x100 flex-item [BFC] children: inline + frag 0 from TextNode start: 0, length: 1, rect: [10,33 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> + Box at (9,261) content-size 250x250 flex-container(column) [FFC] children: not-inline + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + BlockContainer at (158,262) content-size 100x100 flex-item [BFC] children: inline + frag 0 from TextNode start: 0, length: 1, rect: [158,262 6.34375x17] baseline: 13.296875 + "1" + TextNode <#text> + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + BlockContainer at (158,364) content-size 100x100 flex-item [BFC] children: inline + frag 0 from TextNode start: 0, length: 1, rect: [158,364 8.8125x17] baseline: 13.296875 + "2" + TextNode <#text> + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + BlockContainer at (33,262) content-size 100x100 flex-item [BFC] children: inline + frag 0 from TextNode start: 0, length: 1, rect: [33,262 9.09375x17] baseline: 13.296875 + "3" + TextNode <#text> + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + BlockContainer <(anonymous)> at (8,512) content-size 784x0 children: inline + TextNode <#text> + Box at (9,513) content-size 250x250 flex-container(row) [FFC] children: not-inline + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + BlockContainer at (10,639) content-size 100x100 flex-item [BFC] children: inline + frag 0 from TextNode start: 0, length: 1, rect: [10,639 6.34375x17] baseline: 13.296875 + "1" + TextNode <#text> + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + BlockContainer at (112,639) content-size 100x100 flex-item [BFC] children: inline + frag 0 from TextNode start: 0, length: 1, rect: [112,639 8.8125x17] baseline: 13.296875 + "2" + TextNode <#text> + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + BlockContainer at (10,514) content-size 100x100 flex-item [BFC] children: inline + frag 0 from TextNode start: 0, length: 1, rect: [10,514 9.09375x17] baseline: 13.296875 + "3" + TextNode <#text> + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + BlockContainer <(anonymous)> at (8,764) content-size 784x0 children: inline + TextNode <#text> + Box at (9,765) content-size 250x250 flex-container(column) [FFC] children: not-inline + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + BlockContainer at (135,766) content-size 100x100 flex-item [BFC] children: inline + frag 0 from TextNode start: 0, length: 1, rect: [135,766 6.34375x17] baseline: 13.296875 + "1" + TextNode <#text> + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + BlockContainer at (135,868) content-size 100x100 flex-item [BFC] children: inline + frag 0 from TextNode start: 0, length: 1, rect: [135,868 8.8125x17] baseline: 13.296875 + "2" + TextNode <#text> + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + BlockContainer at (10,766) content-size 100x100 flex-item [BFC] children: inline + frag 0 from TextNode start: 0, length: 1, rect: [10,766 9.09375x17] baseline: 13.296875 + "3" + TextNode <#text> + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + BlockContainer <(anonymous)> at (8,1016) content-size 784x0 children: inline + TextNode <#text> + +ViewportPaintable (Viewport<#document>) [0,0 800x600] overflow: [0,0 800x1024] + PaintableWithLines (BlockContainer) [0,0 800x1024] + PaintableWithLines (BlockContainer) [8,8 784x1008] + PaintableBox (Box
.row) [8,8 252x252] + PaintableWithLines (BlockContainer
.box) [9,157 102x102] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer
.box) [111,157 102x102] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer
.box) [9,32 102x102] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer(anonymous)) [8,260 784x0] + PaintableBox (Box
.column) [8,260 252x252] + PaintableWithLines (BlockContainer
.box) [157,261 102x102] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer
.box) [157,363 102x102] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer
.box) [32,261 102x102] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer(anonymous)) [8,512 784x0] + PaintableBox (Box
.row.start) [8,512 252x252] + PaintableWithLines (BlockContainer
.box) [9,638 102x102] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer
.box) [111,638 102x102] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer
.box) [9,513 102x102] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer(anonymous)) [8,764 784x0] + PaintableBox (Box
.column.start) [8,764 252x252] + PaintableWithLines (BlockContainer
.box) [134,765 102x102] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer
.box) [134,867 102x102] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer
.box) [9,765 102x102] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer(anonymous)) [8,1016 784x0] diff --git a/Tests/LibWeb/Layout/input/flex/flex-constrained-wrap-reverse.html b/Tests/LibWeb/Layout/input/flex/flex-constrained-wrap-reverse.html new file mode 100644 index 00000000000..2f6e9d057fd --- /dev/null +++ b/Tests/LibWeb/Layout/input/flex/flex-constrained-wrap-reverse.html @@ -0,0 +1,47 @@ + + +
+
1
+
2
+
3
+
+ +
+
1
+
2
+
3
+
+ +
+
1
+
2
+
3
+
+ +
+
1
+
2
+
3
+
diff --git a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp index 486b6b7c4ae..7ab731cc45b 100644 --- a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp @@ -764,8 +764,6 @@ CSSPixels FlexFormattingContext::content_based_minimum_size(FlexItem const& item // https://www.w3.org/TR/css-flexbox-1/#algo-line-break void FlexFormattingContext::collect_flex_items_into_flex_lines() { - // FIXME: Also support wrap-reverse - // If the flex container is single-line, collect all the flex items into a single flex line. if (is_single_line()) { FlexLine line; @@ -810,6 +808,9 @@ void FlexFormattingContext::collect_flex_items_into_flex_lines() line_main_size += main_gap(); } m_flex_lines.append(move(line)); + + if (flex_container().computed_values().flex_wrap() == CSS::FlexWrap::WrapReverse) + m_flex_lines.reverse(); } // https://drafts.csswg.org/css-flexbox-1/#resolve-flexible-lengths @@ -1446,13 +1447,21 @@ void FlexFormattingContext::align_all_flex_items_along_the_cross_axis() for (auto& item : flex_line.items) { CSSPixels half_line_size = flex_line.cross_size / 2; switch (alignment_for_item(item.box)) { + case CSS::AlignItems::Normal: + // https://drafts.csswg.org/css-flexbox/#flex-wrap-property + // When flex-wrap is wrap-reverse, the cross-start and cross-end directions are swapped. + if (flex_container().computed_values().flex_wrap() == CSS::FlexWrap::WrapReverse) { + item.cross_offset = half_line_size - item.cross_size.value() - item.margins.cross_after - item.borders.cross_after - item.padding.cross_after; + } else { + item.cross_offset = -half_line_size + item.margins.cross_before + item.borders.cross_before + item.padding.cross_before; + } + break; case CSS::AlignItems::Baseline: // FIXME: Implement this // Fallthrough case CSS::AlignItems::Start: case CSS::AlignItems::FlexStart: case CSS::AlignItems::Stretch: - case CSS::AlignItems::Normal: item.cross_offset = -half_line_size + item.margins.cross_before + item.borders.cross_before + item.padding.cross_before; break; case CSS::AlignItems::End: