diff --git a/Tests/LibWeb/Layout/expected/abspos-flex-margin-limits-1.txt b/Tests/LibWeb/Layout/expected/abspos-flex-margin-limits-1.txt new file mode 100644 index 00000000000..18cf45cfc96 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/abspos-flex-margin-limits-1.txt @@ -0,0 +1,16 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x16 [BFC] children: not-inline + BlockContainer at (8,8) content-size 784x0 children: inline + Box at (8,8) content-size 100x100 positioned flex-container(row) [FFC] children: not-inline + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + BlockContainer at (18,48) content-size 50x50 positioned [BFC] children: not-inline + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + TextNode <#text> + +ViewportPaintable (Viewport<#document>) [0,0 800x600] + PaintableWithLines (BlockContainer) [0,0 800x16] + PaintableWithLines (BlockContainer) [8,8 784x0] + PaintableBox (Box
.container) [8,8 100x100] + PaintableWithLines (BlockContainer
.bottom-left) [8,38 70x70] 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 index 74868bd8f01..bc73f0e0a00 100644 --- 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 @@ -32,15 +32,15 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline BlockContainer <(anonymous)> (not painted) [BFC] children: inline TextNode <#text> Box at (38,208) content-size 150x150 flex-container(row) flex-item [FFC] children: not-inline - BlockContainer
at (48,308) content-size 150x50 positioned [BFC] children: inline - frag 0 from TextNode start: 0, length: 3, rect: [48,308 26.1875x17] baseline: 13.296875 + BlockContainer
at (48,298) content-size 150x50 positioned [BFC] children: inline + frag 0 from TextNode start: 0, length: 3, rect: [48,298 26.1875x17] baseline: 13.296875 "end" TextNode <#text> BlockContainer <(anonymous)> (not painted) [BFC] children: inline TextNode <#text> Box at (208,208) content-size 150x150 flex-container(row) flex-item [FFC] children: not-inline - BlockContainer
at (218,308) content-size 150x50 positioned [BFC] children: inline - frag 0 from TextNode start: 0, length: 8, rect: [218,308 61.765625x17] baseline: 13.296875 + BlockContainer
at (218,298) content-size 150x50 positioned [BFC] children: inline + frag 0 from TextNode start: 0, length: 8, rect: [218,298 61.765625x17] baseline: 13.296875 "flex-end" TextNode <#text> BlockContainer <(anonymous)> (not painted) [BFC] children: inline @@ -60,8 +60,8 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline BlockContainer <(anonymous)> (not painted) [BFC] children: inline TextNode <#text> Box at (38,378) content-size 150x150 flex-container(row) flex-item [FFC] children: not-inline - BlockContainer
at (48,478) content-size 150x50 positioned [BFC] children: inline - frag 0 from TextNode start: 0, length: 8, rect: [48,478 61.40625x17] baseline: 13.296875 + BlockContainer
at (48,468) content-size 150x50 positioned [BFC] children: inline + frag 0 from TextNode start: 0, length: 8, rect: [48,468 61.40625x17] baseline: 13.296875 "self-end" TextNode <#text> BlockContainer <(anonymous)> (not painted) [BFC] children: inline @@ -82,11 +82,11 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600] PaintableBox (Box
.outer.flex-start) [538,28 170x170] overflow: [548,38 170x150] PaintableWithLines (BlockContainer
) [548,38 170x70] TextPaintable (TextNode<#text>) - PaintableBox (Box
.outer.end) [28,198 170x170] overflow: [38,208 170x160] - PaintableWithLines (BlockContainer
) [38,298 170x70] + PaintableBox (Box
.outer.end) [28,198 170x170] overflow: [38,208 170x150] + PaintableWithLines (BlockContainer
) [38,288 170x70] TextPaintable (TextNode<#text>) - PaintableBox (Box
.outer.flex-end) [198,198 170x170] overflow: [208,208 170x160] - PaintableWithLines (BlockContainer
) [208,298 170x70] + PaintableBox (Box
.outer.flex-end) [198,198 170x170] overflow: [208,208 170x150] + PaintableWithLines (BlockContainer
) [208,288 170x70] TextPaintable (TextNode<#text>) PaintableBox (Box
.outer.center) [368,198 170x170] overflow: [378,208 170x150] PaintableWithLines (BlockContainer
) [378,248 170x70] @@ -94,6 +94,6 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600] PaintableBox (Box
.outer.self-start) [538,198 170x170] overflow: [548,208 170x150] PaintableWithLines (BlockContainer
) [548,208 170x70] TextPaintable (TextNode<#text>) - PaintableBox (Box
.outer.self-end) [28,368 170x170] overflow: [38,378 170x160] - PaintableWithLines (BlockContainer
) [38,468 170x70] + PaintableBox (Box
.outer.self-end) [28,368 170x170] overflow: [38,378 170x150] + PaintableWithLines (BlockContainer
) [38,458 170x70] TextPaintable (TextNode<#text>) diff --git a/Tests/LibWeb/Layout/input/abspos-flex-margin-limits-1.html b/Tests/LibWeb/Layout/input/abspos-flex-margin-limits-1.html new file mode 100644 index 00000000000..3dd1f8cac20 --- /dev/null +++ b/Tests/LibWeb/Layout/input/abspos-flex-margin-limits-1.html @@ -0,0 +1,23 @@ + + +
+
+
diff --git a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp index 782bb5ae258..24cbee158f5 100644 --- a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp @@ -2106,14 +2106,19 @@ CSSPixelPoint FlexFormattingContext::calculate_static_position(Box const& box) c CSSPixels cross_offset = 0; CSSPixels half_line_size = inner_cross_size(m_flex_container_state) / 2; + auto cross_to_px = [&](CSS::LengthPercentage const& length_percentage) -> CSSPixels { + return length_percentage.to_px(box, m_flex_container_state.content_width()); + }; + auto const& box_state = m_state.get(box); - CSSPixels cross_margin_before = is_row_layout() ? box_state.margin_top : box_state.margin_left; - CSSPixels cross_margin_after = is_row_layout() ? box_state.margin_bottom : box_state.margin_right; - CSSPixels cross_border_before = is_row_layout() ? box_state.border_top : box_state.border_left; - CSSPixels cross_border_after = is_row_layout() ? box_state.border_bottom : box_state.border_right; - CSSPixels cross_padding_after = is_row_layout() ? box_state.padding_bottom : box_state.padding_right; - CSSPixels main_border_before = is_row_layout() ? box_state.border_left : box_state.border_top; - CSSPixels main_border_after = is_row_layout() ? box_state.border_right : box_state.border_bottom; + CSSPixels cross_margin_before = is_row_layout() ? cross_to_px(box.computed_values().margin().top()) : cross_to_px(box.computed_values().margin().left()); + CSSPixels cross_margin_after = is_row_layout() ? cross_to_px(box.computed_values().margin().bottom()) : cross_to_px(box.computed_values().margin().right()); + CSSPixels cross_border_before = is_row_layout() ? box.computed_values().border_top().width : box.computed_values().border_left().width; + CSSPixels cross_border_after = is_row_layout() ? box.computed_values().border_bottom().width : box.computed_values().border_right().width; + CSSPixels cross_padding_before = is_row_layout() ? cross_to_px(box.computed_values().padding().top()) : cross_to_px(box.computed_values().padding().left()); + CSSPixels cross_padding_after = is_row_layout() ? cross_to_px(box.computed_values().padding().bottom()) : cross_to_px(box.computed_values().padding().right()); + CSSPixels main_border_before = is_row_layout() ? box.computed_values().border_left().width : box.computed_values().border_top().width; + CSSPixels main_border_after = is_row_layout() ? box.computed_values().border_right().width : box.computed_values().border_bottom().width; switch (alignment_for_item(box)) { case CSS::AlignItems::Baseline: @@ -2124,15 +2129,15 @@ CSSPixelPoint FlexFormattingContext::calculate_static_position(Box const& box) c case CSS::AlignItems::SelfStart: case CSS::AlignItems::Stretch: case CSS::AlignItems::Normal: - cross_offset = -half_line_size + cross_margin_before; + cross_offset = -half_line_size; break; case CSS::AlignItems::End: case CSS::AlignItems::SelfEnd: case CSS::AlignItems::FlexEnd: - cross_offset = half_line_size - inner_cross_size(box_state) - cross_margin_after - cross_border_after - cross_padding_after; + cross_offset = half_line_size - inner_cross_size(box_state) - (cross_margin_before + cross_margin_after) - (cross_border_before + cross_border_after) - (cross_padding_before + cross_padding_after); break; case CSS::AlignItems::Center: - cross_offset = -((inner_cross_size(box_state) + cross_border_before + cross_border_after) / 2); + cross_offset = -((inner_cross_size(box_state) + cross_margin_after + cross_margin_before + cross_border_before + cross_border_after + cross_padding_before + cross_padding_after) / 2); break; default: break;