From 4164af2ca4a94b50f69991c0463a9d96d83653b6 Mon Sep 17 00:00:00 2001 From: Aliaksandr Kalenik Date: Wed, 15 Nov 2023 13:32:16 +0100 Subject: [PATCH] LibWeb: Do not compensate padding for abspos boxes with static position When a box does not have a top, left, bottom, or right, there is no need to adjust the offset for positioning relative to the padding edge, because the box remains in the normal flow. --- .../abspos-only-with-inset-left.txt | 11 ++++++++++ ...t-insets-relative-to-box-with-paddings.txt | 11 ++++++++++ ...sets-relative-top-box-with-padding-top.txt | 11 ++++++++++ .../abspos-without-insets.txt | 11 ++++++++++ .../abspos-only-with-inset-left.html | 21 ++++++++++++++++++ ...-insets-relative-to-box-with-paddings.html | 22 +++++++++++++++++++ ...ets-relative-top-box-with-padding-top.html | 15 +++++++++++++ .../abspos-without-insets.html | 20 +++++++++++++++++ .../LibWeb/Layout/FormattingContext.cpp | 7 +++++- 9 files changed, 128 insertions(+), 1 deletion(-) create mode 100644 Tests/LibWeb/Layout/expected/block-and-inline/abspos-only-with-inset-left.txt create mode 100644 Tests/LibWeb/Layout/expected/block-and-inline/abspos-with-bottom-right-insets-relative-to-box-with-paddings.txt create mode 100644 Tests/LibWeb/Layout/expected/block-and-inline/abspos-without-insets-relative-top-box-with-padding-top.txt create mode 100644 Tests/LibWeb/Layout/expected/block-and-inline/abspos-without-insets.txt create mode 100644 Tests/LibWeb/Layout/input/block-and-inline/abspos-only-with-inset-left.html create mode 100644 Tests/LibWeb/Layout/input/block-and-inline/abspos-with-bottom-right-insets-relative-to-box-with-paddings.html create mode 100644 Tests/LibWeb/Layout/input/block-and-inline/abspos-without-insets-relative-top-box-with-padding-top.html create mode 100644 Tests/LibWeb/Layout/input/block-and-inline/abspos-without-insets.html diff --git a/Tests/LibWeb/Layout/expected/block-and-inline/abspos-only-with-inset-left.txt b/Tests/LibWeb/Layout/expected/block-and-inline/abspos-only-with-inset-left.txt new file mode 100644 index 0000000000..27b00dd8f7 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/block-and-inline/abspos-only-with-inset-left.txt @@ -0,0 +1,11 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (1,1) content-size 798x330 [BFC] children: not-inline + BlockContainer at (10,10) content-size 780x312 children: not-inline + BlockContainer at (31,21) content-size 200x200 positioned children: not-inline + BlockContainer at (12,22) content-size 100x100 positioned [BFC] children: not-inline + +ViewportPaintable (Viewport<#document>) [0,0 800x600] + PaintableWithLines (BlockContainer) [0,0 800x332] + PaintableWithLines (BlockContainer) [9,9 782x314] + PaintableWithLines (BlockContainer
.box) [10,10 272x312] + PaintableWithLines (BlockContainer
.inner) [11,21 102x102] diff --git a/Tests/LibWeb/Layout/expected/block-and-inline/abspos-with-bottom-right-insets-relative-to-box-with-paddings.txt b/Tests/LibWeb/Layout/expected/block-and-inline/abspos-with-bottom-right-insets-relative-to-box-with-paddings.txt new file mode 100644 index 0000000000..38f7d4fedc --- /dev/null +++ b/Tests/LibWeb/Layout/expected/block-and-inline/abspos-with-bottom-right-insets-relative-to-box-with-paddings.txt @@ -0,0 +1,11 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (1,1) content-size 798x330 [BFC] children: not-inline + BlockContainer at (10,10) content-size 780x312 children: not-inline + BlockContainer at (31,21) content-size 200x200 positioned children: not-inline + BlockContainer at (180,220) content-size 100x100 positioned [BFC] children: not-inline + +ViewportPaintable (Viewport<#document>) [0,0 800x600] + PaintableWithLines (BlockContainer) [0,0 800x332] + PaintableWithLines (BlockContainer) [9,9 782x314] + PaintableWithLines (BlockContainer
.box) [10,10 272x312] + PaintableWithLines (BlockContainer
.inner) [179,219 102x102] diff --git a/Tests/LibWeb/Layout/expected/block-and-inline/abspos-without-insets-relative-top-box-with-padding-top.txt b/Tests/LibWeb/Layout/expected/block-and-inline/abspos-without-insets-relative-top-box-with-padding-top.txt new file mode 100644 index 0000000000..60e313a1ce --- /dev/null +++ b/Tests/LibWeb/Layout/expected/block-and-inline/abspos-without-insets-relative-top-box-with-padding-top.txt @@ -0,0 +1,11 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x66 [BFC] children: not-inline + BlockContainer at (8,8) content-size 784x50 children: not-inline + BlockContainer at (8,58) content-size 784x0 positioned children: not-inline + BlockContainer at (8,58) content-size 784x50 positioned [BFC] children: not-inline + +ViewportPaintable (Viewport<#document>) [0,0 800x600] + PaintableWithLines (BlockContainer) [0,0 800x66] overflow: [0,0 800x108] + PaintableWithLines (BlockContainer) [8,8 784x50] overflow: [8,8 784x100] + PaintableWithLines (BlockContainer
.box) [8,8 784x50] overflow: [8,8 784x100] + PaintableWithLines (BlockContainer
.inner) [8,58 784x50] diff --git a/Tests/LibWeb/Layout/expected/block-and-inline/abspos-without-insets.txt b/Tests/LibWeb/Layout/expected/block-and-inline/abspos-without-insets.txt new file mode 100644 index 0000000000..feec122551 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/block-and-inline/abspos-without-insets.txt @@ -0,0 +1,11 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (1,1) content-size 798x330 [BFC] children: not-inline + BlockContainer at (10,10) content-size 780x312 children: not-inline + BlockContainer at (31,21) content-size 200x200 positioned children: not-inline + BlockContainer at (32,22) content-size 100x100 positioned [BFC] children: not-inline + +ViewportPaintable (Viewport<#document>) [0,0 800x600] + PaintableWithLines (BlockContainer) [0,0 800x332] + PaintableWithLines (BlockContainer) [9,9 782x314] + PaintableWithLines (BlockContainer
.box) [10,10 272x312] + PaintableWithLines (BlockContainer
.inner) [31,21 102x102] diff --git a/Tests/LibWeb/Layout/input/block-and-inline/abspos-only-with-inset-left.html b/Tests/LibWeb/Layout/input/block-and-inline/abspos-only-with-inset-left.html new file mode 100644 index 0000000000..4c997d6d11 --- /dev/null +++ b/Tests/LibWeb/Layout/input/block-and-inline/abspos-only-with-inset-left.html @@ -0,0 +1,21 @@ +
\ No newline at end of file diff --git a/Tests/LibWeb/Layout/input/block-and-inline/abspos-with-bottom-right-insets-relative-to-box-with-paddings.html b/Tests/LibWeb/Layout/input/block-and-inline/abspos-with-bottom-right-insets-relative-to-box-with-paddings.html new file mode 100644 index 0000000000..0ac1398a80 --- /dev/null +++ b/Tests/LibWeb/Layout/input/block-and-inline/abspos-with-bottom-right-insets-relative-to-box-with-paddings.html @@ -0,0 +1,22 @@ +
\ No newline at end of file diff --git a/Tests/LibWeb/Layout/input/block-and-inline/abspos-without-insets-relative-top-box-with-padding-top.html b/Tests/LibWeb/Layout/input/block-and-inline/abspos-without-insets-relative-top-box-with-padding-top.html new file mode 100644 index 0000000000..4b0eda5895 --- /dev/null +++ b/Tests/LibWeb/Layout/input/block-and-inline/abspos-without-insets-relative-top-box-with-padding-top.html @@ -0,0 +1,15 @@ + +
\ No newline at end of file diff --git a/Tests/LibWeb/Layout/input/block-and-inline/abspos-without-insets.html b/Tests/LibWeb/Layout/input/block-and-inline/abspos-without-insets.html new file mode 100644 index 0000000000..b7c3934506 --- /dev/null +++ b/Tests/LibWeb/Layout/input/block-and-inline/abspos-without-insets.html @@ -0,0 +1,20 @@ +
\ No newline at end of file diff --git a/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp index cebfe0740d..9b9137abbe 100644 --- a/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp @@ -1123,7 +1123,12 @@ void FormattingContext::layout_absolutely_positioned_element(Box const& box, Ava used_offset.set_x(box_state.inset_left + box_state.margin_box_left()); used_offset.set_y(box_state.inset_top + box_state.margin_box_top()); // NOTE: Absolutely positioned boxes are relative to the *padding edge* of the containing block. - used_offset.translate_by(-containing_block_state.padding_left, -containing_block_state.padding_top); + // Padding offset only need to be compensated when top/left/bottom/right is not auto because otherwise + // the box is positioned at the static position of the containing block. + if (!box.computed_values().inset().top().is_auto() || !box.computed_values().inset().bottom().is_auto()) + used_offset.translate_by(0, -containing_block_state.padding_top); + if (!box.computed_values().inset().left().is_auto() || !box.computed_values().inset().right().is_auto()) + used_offset.translate_by(-containing_block_state.padding_left, 0); box_state.set_content_offset(used_offset); if (independent_formatting_context)