From 3250a424f0a5d449ea7c8256c44ad75149aa1051 Mon Sep 17 00:00:00 2001 From: Andreas Kling Date: Sun, 8 Oct 2023 08:23:27 +0200 Subject: [PATCH] LibWeb: Don't offset abspos children of flex container by padding twice We were incorrectly offsetting the static position of abspos children of flex containers by the padding twice. This was a misguided attempt to adjust to the abspos containing block being the padding box, not the content box. Fixes #21344. --- ...osition-with-padding-on-flex-container.txt | 20 +++++++++++++++++++ ...sition-with-padding-on-flex-container.html | 17 ++++++++++++++++ .../LibWeb/Layout/FlexFormattingContext.cpp | 8 -------- 3 files changed, 37 insertions(+), 8 deletions(-) create mode 100644 Tests/LibWeb/Layout/expected/flex/abspos-flex-child-static-position-with-padding-on-flex-container.txt create mode 100644 Tests/LibWeb/Layout/input/flex/abspos-flex-child-static-position-with-padding-on-flex-container.html diff --git a/Tests/LibWeb/Layout/expected/flex/abspos-flex-child-static-position-with-padding-on-flex-container.txt b/Tests/LibWeb/Layout/expected/flex/abspos-flex-child-static-position-with-padding-on-flex-container.txt new file mode 100644 index 0000000000..1289eeb29b --- /dev/null +++ b/Tests/LibWeb/Layout/expected/flex/abspos-flex-child-static-position-with-padding-on-flex-container.txt @@ -0,0 +1,20 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x53.46875 [BFC] children: not-inline + BlockContainer at (8,8) content-size 784x37.46875 children: not-inline + Box at (18,18) content-size 764x17.46875 flex-container(row) [FFC] children: not-inline + BlockContainer at (18,18) content-size 50x50 positioned [BFC] children: not-inline + BlockContainer at (18,18) content-size 50x50 children: not-inline + BlockContainer at (18,18) content-size 9.703125x17.46875 flex-item [BFC] children: inline + line 0 width: 9.703125, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 1, rect: [18,18 9.703125x17.46875] + "x" + TextNode <#text> + +ViewportPaintable (Viewport<#document>) [0,0 800x600] + PaintableWithLines (BlockContainer) [0,0 800x53.46875] overflow: [0,0 800x68] + PaintableWithLines (BlockContainer) [8,8 784x37.46875] overflow: [8,8 784x60] + PaintableBox (Box
#flex-container) [8,8 784x37.46875] overflow: [8,8 784x60] + PaintableWithLines (BlockContainer
#absolute) [18,18 50x50] + PaintableWithLines (BlockContainer
#orange) [18,18 50x50] + PaintableWithLines (BlockContainer
#red) [18,18 9.703125x17.46875] + TextPaintable (TextNode<#text>) diff --git a/Tests/LibWeb/Layout/input/flex/abspos-flex-child-static-position-with-padding-on-flex-container.html b/Tests/LibWeb/Layout/input/flex/abspos-flex-child-static-position-with-padding-on-flex-container.html new file mode 100644 index 0000000000..c654dc8fac --- /dev/null +++ b/Tests/LibWeb/Layout/input/flex/abspos-flex-child-static-position-with-padding-on-flex-container.html @@ -0,0 +1,17 @@ +
x diff --git a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp index 61f67908f6..953d3e76f0 100644 --- a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp @@ -2240,14 +2240,6 @@ CSSPixelPoint FlexFormattingContext::calculate_static_position(Box const& box) c break; } - // NOTE: Next, we add the flex container's padding since abspos boxes are placed relative to the padding edge - // of their abspos containing block. - if (pack_from_end) { - main_offset += is_row_layout() ? m_flex_container_state.padding_right : m_flex_container_state.padding_bottom; - } else { - main_offset += is_row_layout() ? m_flex_container_state.padding_left : m_flex_container_state.padding_top; - } - if (pack_from_end) main_offset += inner_main_size(flex_container()) - inner_main_size(box) - main_border_before - main_border_after;