diff --git a/Tests/LibWeb/Layout/expected/flex/abspos-flex-child-static-position-with-align-items.txt b/Tests/LibWeb/Layout/expected/flex/abspos-flex-child-static-position-with-align-items.txt new file mode 100644 index 0000000000..c5e32fb888 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/flex/abspos-flex-child-static-position-with-align-items.txt @@ -0,0 +1,77 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (1,1) content-size 798x322 [BFC] children: not-inline + Box at (10,10) content-size 780x304 flex-container(row) [FFC] children: not-inline + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + Box at (11,11) content-size 150x150 flex-container(row) flex-item [FFC] children: not-inline + BlockContainer
at (11,12) content-size 150x50 positioned [BFC] children: inline + line 0 width: 54.578125, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 6, rect: [11,12 54.578125x17.46875] + "normal" + TextNode <#text> + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + Box at (163,11) content-size 150x150 flex-container(row) flex-item [FFC] children: not-inline + BlockContainer
at (163,12) content-size 150x50 positioned [BFC] children: inline + line 0 width: 58.796875, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 7, rect: [163,12 58.796875x17.46875] + "stretch" + TextNode <#text> + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + Box at (315,11) content-size 150x150 flex-container(row) flex-item [FFC] children: not-inline + BlockContainer
at (315,12) content-size 150x50 positioned [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: [315,12 41.234375x17.46875] + "start" + TextNode <#text> + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + Box at (467,11) content-size 150x150 flex-container(row) flex-item [FFC] children: not-inline + BlockContainer
at (467,12) content-size 150x50 positioned [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: [467,12 76.8125x17.46875] + "flex-start" + TextNode <#text> + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + Box at (619,11) content-size 150x150 flex-container(row) flex-item [FFC] children: not-inline + BlockContainer
at (619,110) content-size 150x50 positioned [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: [619,110 26.1875x17.46875] + "end" + TextNode <#text> + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + Box at (11,163) content-size 150x150 flex-container(row) flex-item [FFC] children: not-inline + BlockContainer
at (11,262) content-size 150x50 positioned [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: [11,262 61.765625x17.46875] + "flex-end" + TextNode <#text> + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + Box at (163,163) content-size 150x150 flex-container(row) flex-item [FFC] children: not-inline + BlockContainer
at (163,213) content-size 150x50 positioned [BFC] children: inline + line 0 width: 51.625, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 6, rect: [163,213 51.625x17.46875] + "center" + TextNode <#text> + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + Box at (315,163) content-size 150x150 flex-container(row) flex-item [FFC] children: not-inline + BlockContainer
at (315,164) content-size 150x50 positioned [BFC] children: inline + line 0 width: 76.453125, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 10, rect: [315,164 76.453125x17.46875] + "self-start" + TextNode <#text> + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + Box at (467,163) content-size 150x150 flex-container(row) flex-item [FFC] children: not-inline + BlockContainer
at (467,262) content-size 150x50 positioned [BFC] children: inline + line 0 width: 61.40625, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 8, rect: [467,262 61.40625x17.46875] + "self-end" + TextNode <#text> + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> diff --git a/Tests/LibWeb/Layout/input/flex/abspos-flex-child-static-position-with-align-items.html b/Tests/LibWeb/Layout/input/flex/abspos-flex-child-static-position-with-align-items.html new file mode 100644 index 0000000000..87e7fcb0d4 --- /dev/null +++ b/Tests/LibWeb/Layout/input/flex/abspos-flex-child-static-position-with-align-items.html @@ -0,0 +1,40 @@ + + +
normal
+
stretch
+
start
+
flex-start
+
end
+
flex-end
+
center
+
self-start
+
self-end
diff --git a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp index 0789482f45..1cfba61179 100644 --- a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp @@ -2125,10 +2125,13 @@ CSSPixelPoint FlexFormattingContext::calculate_static_position(Box const& box) c // Fallthrough case CSS::AlignItems::Start: case CSS::AlignItems::FlexStart: + case CSS::AlignItems::SelfStart: case CSS::AlignItems::Stretch: + case CSS::AlignItems::Normal: cross_offset = -half_line_size + cross_margin_before + cross_border_before + cross_padding_before; break; case CSS::AlignItems::End: + case CSS::AlignItems::SelfEnd: case CSS::AlignItems::FlexEnd: cross_offset = half_line_size - inner_cross_size(box) - cross_margin_after - cross_border_after - cross_padding_after; break;