From bab67960999e804768c7d2b98fa5b23db5a69c57 Mon Sep 17 00:00:00 2001 From: Andreas Kling Date: Tue, 16 May 2023 09:46:45 +0200 Subject: LibWeb: Rewrite calculation of available space between floats This code now works in terms of *intrusion* by left and right side floats into a given box whose insides we're trying to layout. Previously, it worked in terms of space occupied by floats in the root box of the BFC they participated in. That created a bunch of edge cases since the code asking about the information wasn't operating in root coordinate space, but in the coordinate space of some arbitrarily nested block descendant of the root. This finally allows horizontal margins in the containing block chain to affect floats and nested content correctly, and it also allows us to remove a bogus workaround in InlineFormattingContext. --- .../float-left-and-right-with-text-in-between.txt | 62 ++++++++++++++++++++++ .../expected/block-and-inline/float-stress-1.txt | 22 ++++---- .../expected/block-and-inline/float-stress-3.txt | 2 +- .../float-left-and-right-with-text-in-between.html | 24 +++++++++ 4 files changed, 98 insertions(+), 12 deletions(-) create mode 100644 Tests/LibWeb/Layout/expected/block-and-inline/float-left-and-right-with-text-in-between.txt create mode 100644 Tests/LibWeb/Layout/input/block-and-inline/float-left-and-right-with-text-in-between.html (limited to 'Tests') diff --git a/Tests/LibWeb/Layout/expected/block-and-inline/float-left-and-right-with-text-in-between.txt b/Tests/LibWeb/Layout/expected/block-and-inline/float-left-and-right-with-text-in-between.txt new file mode 100644 index 0000000000..de998e86b1 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/block-and-inline/float-left-and-right-with-text-in-between.txt @@ -0,0 +1,62 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (1,1) content-size 798x600 [BFC] children: not-inline + BlockContainer at (252,10) content-size 538x398.257812 children: inline + line 0 width: 228.339843, height: 21.835937, bottom: 21.835937, baseline: 16.914062 + frag 0 from TextNode start: 1, length: 21, rect: [554,10 228.339843x21.835937] + "Lorem ipsum dolor sit" + line 1 width: 183.769531, height: 22.671875, bottom: 44.507812, baseline: 16.914062 + frag 0 from TextNode start: 23, length: 17, rect: [554,31 183.769531x21.835937] + "amet, consectetur" + line 2 width: 140.546875, height: 22.507812, bottom: 66.179687, baseline: 16.914062 + frag 0 from TextNode start: 41, length: 16, rect: [554,53 140.546875x21.835937] + "adipiscing elit." + line 3 width: 145, height: 22.34375, bottom: 87.851562, baseline: 16.914062 + frag 0 from TextNode start: 58, length: 13, rect: [554,75 145x21.835937] + "Suspendisse a" + line 4 width: 196.699218, height: 22.179687, bottom: 109.523437, baseline: 16.914062 + frag 0 from TextNode start: 72, length: 19, rect: [554,97 196.699218x21.835937] + "placerat mauris, ut" + line 5 width: 234.6875, height: 22.015625, bottom: 131.195312, baseline: 16.914062 + frag 0 from TextNode start: 92, length: 22, rect: [554,119 234.6875x21.835937] + "elementum mi. Morbi ut" + line 6 width: 201.523437, height: 21.851562, bottom: 152.867187, baseline: 16.914062 + frag 0 from TextNode start: 115, length: 20, rect: [554,141 201.523437x21.835937] + "vehicula ipsum, eget" + line 7 width: 232.539062, height: 22.6875, bottom: 175.539062, baseline: 16.914062 + frag 0 from TextNode start: 136, length: 23, rect: [554,162 232.539062x21.835937] + "placerat augue. Integer" + line 8 width: 202.96875, height: 22.523437, bottom: 197.210937, baseline: 16.914062 + frag 0 from TextNode start: 160, length: 20, rect: [554,184 202.96875x21.835937] + "rutrum nisi eget dui" + line 9 width: 0, height: 0, bottom: 0, baseline: 0 + line 10 width: 208.828125, height: 22.359375, bottom: 223.882812, baseline: 16.914062 + frag 0 from TextNode start: 181, length: 19, rect: [252,211 208.828125x21.835937] + "dictum, eu accumsan" + line 11 width: 180.195312, height: 22.195312, bottom: 245.554687, baseline: 16.914062 + frag 0 from TextNode start: 201, length: 18, rect: [252,233 180.195312x21.835937] + "enim tristique. Ut" + line 12 width: 195.273437, height: 22.03125, bottom: 267.226562, baseline: 16.914062 + frag 0 from TextNode start: 220, length: 19, rect: [252,255 195.273437x21.835937] + "lobortis lorem eget" + line 13 width: 222.910156, height: 21.867187, bottom: 288.898437, baseline: 16.914062 + frag 0 from TextNode start: 240, length: 22, rect: [252,277 222.910156x21.835937] + "est vulputate egestas." + line 14 width: 223.125, height: 22.703125, bottom: 311.570312, baseline: 16.914062 + frag 0 from TextNode start: 263, length: 23, rect: [252,298 223.125x21.835937] + "Integer laoreet lacinia" + line 15 width: 222.617187, height: 22.539062, bottom: 333.242187, baseline: 16.914062 + frag 0 from TextNode start: 287, length: 22, rect: [252,320 222.617187x21.835937] + "ante sodales lobortis." + line 16 width: 178.300781, height: 22.375, bottom: 354.914062, baseline: 16.914062 + frag 0 from TextNode start: 310, length: 17, rect: [252,342 178.300781x21.835937] + "Donec a tincidunt" + line 17 width: 231.074218, height: 22.210937, bottom: 376.585937, baseline: 16.914062 + frag 0 from TextNode start: 328, length: 22, rect: [252,364 231.074218x21.835937] + "ante. Phasellus a arcu" + line 18 width: 70.546875, height: 22.046875, bottom: 398.257812, baseline: 16.914062 + frag 0 from TextNode start: 351, length: 7, rect: [252,386 70.546875x21.835937] + "tortor." + BlockContainer at (253,11) content-size 300x200 floating [BFC] children: not-inline + TextNode <#text> + BlockContainer at (489,213) content-size 300x200 floating [BFC] children: not-inline + TextNode <#text> 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 951a049857..c1ed8ecd0c 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,18 +5,18 @@ 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: [61,9 212x16] + frag 0 from TextNode start: 1, length: 24, rect: [60,9 212x16] "foo bar baz foo bar baz " - frag 1 from TextNode start: 1, length: 3, rect: [273,9 27.15625x16] + frag 1 from TextNode start: 1, length: 3, rect: [272,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: [263,25 27.640625x16] + frag 0 from TextNode start: 5, length: 3, rect: [262,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: [263,41 27.203125x16] + frag 0 from TextNode start: 9, length: 3, rect: [262,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: [263,57 27.15625x16] + frag 0 from TextNode start: 13, length: 3, rect: [262,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 @@ -40,20 +40,20 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline 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: [61,173 176.84375x16] + 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: [238,173 62.796875x16] + 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: [61,189 141.203125x16] + frag 0 from TextNode start: 9, length: 16, rect: [60,189 141.203125x16] "baz foo bar baz " - frag 1 from TextNode start: 1, length: 7, rect: [202,189 62.796875x16] + frag 1 from TextNode start: 1, length: 7, rect: [201,189 62.796875x16] "foo bar" line 13 width: 204, height: 16, bottom: 212, baseline: 12.796875 - frag 0 from TextNode start: 9, length: 23, rect: [61,205 204x16] + 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: [61,221 239.203125x16] + 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] 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 db2dc0cbe3..86c2821ed3 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: [61,9 204x16] + frag 0 from TextNode start: 1, length: 23, rect: [60,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/input/block-and-inline/float-left-and-right-with-text-in-between.html b/Tests/LibWeb/Layout/input/block-and-inline/float-left-and-right-with-text-in-between.html new file mode 100644 index 0000000000..64d6bc99f5 --- /dev/null +++ b/Tests/LibWeb/Layout/input/block-and-inline/float-left-and-right-with-text-in-between.html @@ -0,0 +1,24 @@ + +

+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a placerat mauris, ut elementum mi. Morbi ut vehicula ipsum, eget placerat augue. Integer rutrum nisi eget dui dictum, eu accumsan enim tristique. Ut lobortis lorem eget est vulputate egestas. Integer laoreet lacinia ante sodales lobortis. Donec a tincidunt ante. Phasellus a arcu tortor. -- cgit v1.2.3