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)