From 202b24584f3555eabc2d61c82350b2e3c5e3d07f Mon Sep 17 00:00:00 2001 From: Aliaksandr Kalenik Date: Wed, 24 May 2023 18:16:09 +0300 Subject: [PATCH] LibWeb: Sum horizontal margins to calculate space used by floats This fixes the issue where max margin is used to find offset of floating box although horizonal margins do not collapse so they need to be summed instead. --- .../block-and-inline/float-stress-1.txt | 90 +++++++++---------- .../block-and-inline/float-stress-3.txt | 2 +- .../floats-and-negative-margins.txt | 16 ++++ .../floats-and-negative-margins.html | 20 +++++ .../LibWeb/Layout/BlockFormattingContext.cpp | 4 +- 5 files changed, 83 insertions(+), 49 deletions(-) create mode 100644 Tests/LibWeb/Layout/expected/block-and-inline/floats-and-negative-margins.txt create mode 100644 Tests/LibWeb/Layout/input/block-and-inline/floats-and-negative-margins.html diff --git a/Tests/LibWeb/Layout/expected/block-and-inline/float-stress-1.txt b/Tests/LibWeb/Layout/expected/block-and-inline/float-stress-1.txt index c1ed8ecd0c..3880462df2 100644 --- a/Tests/LibWeb/Layout/expected/block-and-inline/float-stress-1.txt +++ b/Tests/LibWeb/Layout/expected/block-and-inline/float-stress-1.txt @@ -5,65 +5,63 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline TextNode <#text> BlockContainer at (9,9) content-size 300x250 children: inline line 0 width: 239.15625, height: 16, bottom: 16, baseline: 12.796875 - frag 0 from TextNode start: 1, length: 24, rect: [60,9 212x16] + frag 0 from TextNode start: 1, length: 24, rect: [61,9 212x16] "foo bar baz foo bar baz " - frag 1 from TextNode start: 1, length: 3, rect: [272,9 27.15625x16] + frag 1 from TextNode start: 1, length: 3, rect: [273,9 27.15625x16] "foo" line 1 width: 27.640625, height: 16, bottom: 32, baseline: 12.796875 - frag 0 from TextNode start: 5, length: 3, rect: [262,25 27.640625x16] + frag 0 from TextNode start: 5, length: 3, rect: [263,25 27.640625x16] "bar" line 2 width: 27.203125, height: 16, bottom: 48, baseline: 12.796875 - frag 0 from TextNode start: 9, length: 3, rect: [262,41 27.203125x16] + frag 0 from TextNode start: 9, length: 3, rect: [263,41 27.203125x16] "baz" line 3 width: 27.15625, height: 16, bottom: 64, baseline: 12.796875 - frag 0 from TextNode start: 13, length: 3, rect: [262,57 27.15625x16] + frag 0 from TextNode start: 13, length: 3, rect: [263,57 27.15625x16] "foo" line 4 width: 0, height: 0, bottom: 0, baseline: 0 - line 5 width: 98, height: 16, bottom: 84, baseline: 12.796875 - frag 0 from TextNode start: 17, length: 11, rect: [9,77 98x16] - "bar baz foo" - line 6 width: 98, height: 16, bottom: 100, baseline: 12.796875 - frag 0 from TextNode start: 29, length: 11, rect: [9,93 98x16] - "bar baz foo" - line 7 width: 98, height: 16, bottom: 116, baseline: 12.796875 - frag 0 from TextNode start: 41, length: 8, rect: [9,109 70.84375x16] - "bar baz " - frag 1 from TextNode start: 1, length: 3, rect: [80,109 27.15625x16] - "foo" - line 8 width: 62.84375, height: 16, bottom: 132, baseline: 12.796875 - frag 0 from TextNode start: 5, length: 7, rect: [9,125 62.84375x16] + line 5 width: 62.84375, height: 16, bottom: 84, baseline: 12.796875 + frag 0 from TextNode start: 17, length: 7, rect: [9,77 62.84375x16] "bar baz" - line 9 width: 62.796875, height: 16, bottom: 148, baseline: 12.796875 - frag 0 from TextNode start: 13, length: 7, rect: [9,141 62.796875x16] + line 6 width: 62.796875, height: 16, bottom: 100, baseline: 12.796875 + frag 0 from TextNode start: 25, length: 7, rect: [9,93 62.796875x16] "foo bar" - line 10 width: 274.359375, height: 16, bottom: 164, baseline: 12.796875 - frag 0 from TextNode start: 21, length: 31, rect: [9,157 274.359375x16] - "baz foo bar baz foo bar baz foo" - line 11 width: 239.640625, height: 16, bottom: 180, baseline: 12.796875 - frag 0 from TextNode start: 53, length: 20, rect: [60,173 176.84375x16] - "bar baz foo bar baz " - frag 1 from TextNode start: 1, length: 7, rect: [237,173 62.796875x16] - "foo bar" - line 12 width: 204, height: 16, bottom: 196, baseline: 12.796875 - frag 0 from TextNode start: 9, length: 16, rect: [60,189 141.203125x16] + line 7 width: 62.359375, height: 16, bottom: 116, baseline: 12.796875 + frag 0 from TextNode start: 33, length: 7, rect: [9,109 62.359375x16] + "baz foo" + line 8 width: 62.84375, height: 16, bottom: 132, baseline: 12.796875 + frag 0 from TextNode start: 41, length: 7, rect: [9,125 62.84375x16] + "bar baz" + line 9 width: 239.15625, height: 16, bottom: 148, baseline: 12.796875 + frag 0 from TextNode start: 1, length: 27, rect: [9,141 239.15625x16] + "foo bar baz foo bar baz foo" + line 10 width: 239.640625, height: 16, bottom: 164, baseline: 12.796875 + frag 0 from TextNode start: 29, length: 27, rect: [9,157 239.640625x16] + "bar baz foo bar baz foo bar" + line 11 width: 239.203125, height: 16, bottom: 180, baseline: 12.796875 + frag 0 from TextNode start: 57, length: 16, rect: [61,173 141.203125x16] "baz foo bar baz " - frag 1 from TextNode start: 1, length: 7, rect: [201,189 62.796875x16] - "foo bar" + frag 1 from TextNode start: 1, length: 11, rect: [202,173 98x16] + "foo bar baz" + line 12 width: 204, height: 16, bottom: 196, baseline: 12.796875 + frag 0 from TextNode start: 13, length: 12, rect: [61,189 106x16] + "foo bar baz " + frag 1 from TextNode start: 1, length: 11, rect: [167,189 98x16] + "foo bar baz" line 13 width: 204, height: 16, bottom: 212, baseline: 12.796875 - frag 0 from TextNode start: 9, length: 23, rect: [60,205 204x16] - "baz foo bar baz foo bar" - line 14 width: 239.203125, height: 16, bottom: 228, baseline: 12.796875 - frag 0 from TextNode start: 33, length: 27, rect: [60,221 239.203125x16] - "baz foo bar baz foo bar baz" - line 15 width: 274.796875, height: 16, bottom: 244, baseline: 12.796875 - frag 0 from TextNode start: 61, length: 31, rect: [9,237 274.796875x16] + frag 0 from TextNode start: 13, length: 23, rect: [61,205 204x16] + "foo bar baz foo bar baz" + line 14 width: 239.15625, height: 16, bottom: 228, baseline: 12.796875 + frag 0 from TextNode start: 37, length: 27, rect: [61,221 239.15625x16] + "foo bar baz foo bar baz foo" + line 15 width: 274.84375, height: 16, bottom: 244, baseline: 12.796875 + frag 0 from TextNode start: 65, length: 31, rect: [9,237 274.84375x16] + "bar baz foo bar baz foo bar baz" + line 16 width: 274.796875, height: 16, bottom: 260, baseline: 12.796875 + frag 0 from TextNode start: 97, length: 31, rect: [9,253 274.796875x16] "foo bar baz foo bar baz foo bar" - line 16 width: 274.359375, height: 16, bottom: 260, baseline: 12.796875 - frag 0 from TextNode start: 93, length: 31, rect: [9,253 274.359375x16] - "baz foo bar baz foo bar baz foo" - line 17 width: 168.84375, height: 16, bottom: 276, baseline: 12.796875 - frag 0 from TextNode start: 125, length: 19, rect: [9,269 168.84375x16] - "bar baz foo bar baz" + line 17 width: 133.203125, height: 16, bottom: 276, baseline: 12.796875 + frag 0 from TextNode start: 129, length: 15, rect: [9,269 133.203125x16] + "baz foo bar baz" TextNode <#text> BlockContainer at (10,10) content-size 50x50 floating [BFC] children: not-inline TextNode <#text> @@ -71,7 +69,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline TextNode <#text> BlockContainer at (108,78) content-size 200x50 floating [BFC] children: not-inline TextNode <#text> - BlockContainer at (76,126) content-size 30x30 floating [BFC] children: not-inline + BlockContainer at (278,142) content-size 30x30 floating [BFC] children: not-inline TextNode <#text> BlockContainer at (10,174) content-size 50x50 floating [BFC] children: not-inline TextNode <#text> diff --git a/Tests/LibWeb/Layout/expected/block-and-inline/float-stress-3.txt b/Tests/LibWeb/Layout/expected/block-and-inline/float-stress-3.txt index 86c2821ed3..db2dc0cbe3 100644 --- a/Tests/LibWeb/Layout/expected/block-and-inline/float-stress-3.txt +++ b/Tests/LibWeb/Layout/expected/block-and-inline/float-stress-3.txt @@ -5,7 +5,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline TextNode <#text> BlockContainer at (9,9) content-size 300x250 children: inline line 0 width: 204, height: 16, bottom: 16, baseline: 12.796875 - frag 0 from TextNode start: 1, length: 23, rect: [60,9 204x16] + frag 0 from TextNode start: 1, length: 23, rect: [61,9 204x16] "foo bar baz foo bar baz" TextNode <#text> BlockContainer at (10,10) content-size 50x50 floating [BFC] children: not-inline diff --git a/Tests/LibWeb/Layout/expected/block-and-inline/floats-and-negative-margins.txt b/Tests/LibWeb/Layout/expected/block-and-inline/floats-and-negative-margins.txt new file mode 100644 index 0000000000..667aeda504 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/block-and-inline/floats-and-negative-margins.txt @@ -0,0 +1,16 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x600 [BFC] children: not-inline + BlockContainer at (100,8) content-size 200x200 children: not-inline + BlockContainer at (50,8) content-size 250x200 children: inline + BlockContainer at (50,8) content-size 125x17.46875 floating [BFC] children: inline + line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 1, length: 1, rect: [50,8 9.34375x17.46875] + "a" + TextNode <#text> + TextNode <#text> + BlockContainer at (175,8) content-size 125x17.46875 floating [BFC] children: inline + line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 1, length: 1, rect: [175,8 9.46875x17.46875] + "b" + TextNode <#text> + TextNode <#text> diff --git a/Tests/LibWeb/Layout/input/block-and-inline/floats-and-negative-margins.html b/Tests/LibWeb/Layout/input/block-and-inline/floats-and-negative-margins.html new file mode 100644 index 0000000000..ab53a9a236 --- /dev/null +++ b/Tests/LibWeb/Layout/input/block-and-inline/floats-and-negative-margins.html @@ -0,0 +1,20 @@ +
+ a
+
+ b
+
\ No newline at end of file diff --git a/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp index a335d8999a..b5ac2bfaff 100644 --- a/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp @@ -1011,7 +1011,7 @@ BlockFormattingContext::SpaceUsedByFloats BlockFormattingContext::space_used_by_ CSSPixels offset_from_containing_block_chain_margins_between_here_and_root = 0; for (auto const* containing_block = floating_box.box->containing_block(); containing_block && containing_block != &root(); containing_block = containing_block->containing_block()) { auto const& containing_block_state = m_state.get(*containing_block); - offset_from_containing_block_chain_margins_between_here_and_root = max(offset_from_containing_block_chain_margins_between_here_and_root, containing_block_state.margin_box_left()); + offset_from_containing_block_chain_margins_between_here_and_root += containing_block_state.margin_box_left(); } space_used_by_floats.left = offset_from_containing_block_chain_margins_between_here_and_root + floating_box.offset_from_edge @@ -1030,7 +1030,7 @@ BlockFormattingContext::SpaceUsedByFloats BlockFormattingContext::space_used_by_ CSSPixels offset_from_containing_block_chain_margins_between_here_and_root = 0; for (auto const* containing_block = floating_box.box->containing_block(); containing_block && containing_block != &root(); containing_block = containing_block->containing_block()) { auto const& containing_block_state = m_state.get(*containing_block); - offset_from_containing_block_chain_margins_between_here_and_root = max(offset_from_containing_block_chain_margins_between_here_and_root, containing_block_state.margin_box_right()); + offset_from_containing_block_chain_margins_between_here_and_root += containing_block_state.margin_box_right(); } space_used_by_floats.right = offset_from_containing_block_chain_margins_between_here_and_root + floating_box.offset_from_edge