diff --git a/Tests/LibWeb/Layout/expected/acid1.txt b/Tests/LibWeb/Layout/expected/acid1.txt index 7a2992f068..5d2c4088bd 100644 --- a/Tests/LibWeb/Layout/expected/acid1.txt +++ b/Tests/LibWeb/Layout/expected/acid1.txt @@ -74,30 +74,28 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline TextNode <#text> BlockContainer <(anonymous)> at (135,45) content-size 340x0 children: inline TextNode <#text> - BlockContainer
at (280,195) content-size 50x90 floating children: not-inline - BlockContainer <(anonymous)> at (280,195) content-size 50x0 children: inline - TextNode <#text> - BlockContainer
at (280,195) content-size 50x20 children: inline - line 0 width: 17.275390, height: 10, bottom: 10, baseline: 7.998046 - frag 0 from TextNode start: 0, length: 3, rect: [280,195 17.275390x10] - "bar" - line 1 width: 30.224609, height: 10, bottom: 20, baseline: 7.998046 - frag 0 from TextNode start: 4, length: 6, rect: [280,205 30.224609x10] - "maids," - TextNode <#text> - BlockContainer <(anonymous)> at (280,215) content-size 50x0 children: inline - TextNode <#text> - BlockContainer <(anonymous)> at (135,45) content-size 340x0 children: inline + BlockContainer
at (280,195) content-size 50x90 floating children: not-inline + BlockContainer <(anonymous)> at (280,195) content-size 50x0 children: inline + TextNode <#text> + BlockContainer
at (280,195) content-size 50x20 children: inline + line 0 width: 17.275390, height: 10, bottom: 10, baseline: 7.998046 + frag 0 from TextNode start: 0, length: 3, rect: [280,195 17.275390x10] + "bar" + line 1 width: 30.224609, height: 10, bottom: 20, baseline: 7.998046 + frag 0 from TextNode start: 4, length: 6, rect: [280,205 30.224609x10] + "maids," + TextNode <#text> + BlockContainer <(anonymous)> at (280,215) content-size 50x0 children: inline + TextNode <#text> TextNode <#text> - BlockContainer

at (365,185) content-size 100x100 floating children: inline - line 0 width: 56.416015, height: 10, bottom: 10, baseline: 7.998046 - frag 0 from TextNode start: 0, length: 11, rect: [365,185 56.416015x10] - "sing to me," - line 1 width: 65.449218, height: 10, bottom: 20, baseline: 7.998046 - frag 0 from TextNode start: 12, length: 12, rect: [365,195 65.449218x10] - "erbarme dich" - TextNode <#text> - BlockContainer <(anonymous)> at (135,45) content-size 340x0 children: inline + BlockContainer

at (365,185) content-size 100x100 floating children: inline + line 0 width: 56.416015, height: 10, bottom: 10, baseline: 7.998046 + frag 0 from TextNode start: 0, length: 11, rect: [365,185 56.416015x10] + "sing to me," + line 1 width: 65.449218, height: 10, bottom: 20, baseline: 7.998046 + frag 0 from TextNode start: 12, length: 12, rect: [365,195 65.449218x10] + "erbarme dich" + TextNode <#text> TextNode <#text> TextNode <#text> BlockContainer <(anonymous)> at (20,30) content-size 480x0 children: inline diff --git a/Tests/LibWeb/Layout/expected/bfc-float-left-break-vertically.txt b/Tests/LibWeb/Layout/expected/bfc-float-left-break-vertically.txt index 8be04e1370..9a28e9d6cb 100644 --- a/Tests/LibWeb/Layout/expected/bfc-float-left-break-vertically.txt +++ b/Tests/LibWeb/Layout/expected/bfc-float-left-break-vertically.txt @@ -1,5 +1,5 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline - BlockContainer at (1,1) content-size 798x107 children: not-inline + BlockContainer at (1,1) content-size 798x106 children: not-inline BlockContainer <(anonymous)> at (1,1) content-size 798x0 children: inline TextNode <#text> BlockContainer at (2,2) content-size 400x2 children: not-inline @@ -13,6 +13,5 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline TextNode <#text> BlockContainer <(anonymous)> at (2,4) content-size 400x0 children: inline TextNode <#text> - BlockContainer at (3,57) content-size 100x50 floating children: not-inline - BlockContainer <(anonymous)> at (2,4) content-size 400x0 children: inline + BlockContainer at (3,56) content-size 100x50 floating children: not-inline TextNode <#text> diff --git a/Tests/LibWeb/Layout/expected/clearfix.txt b/Tests/LibWeb/Layout/expected/clearfix.txt index 06c90f6cfa..8f996d0ea9 100644 --- a/Tests/LibWeb/Layout/expected/clearfix.txt +++ b/Tests/LibWeb/Layout/expected/clearfix.txt @@ -9,8 +9,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline BlockContainer at (8,108) content-size 784x0 children: not-inline BlockContainer <(anonymous)> at (8,108) content-size 784x0 children: inline TextNode <#text> - BlockContainer at (8,108) content-size 49x49 floating children: not-inline - BlockContainer <(anonymous)> at (8,108) content-size 784x0 children: inline + BlockContainer at (8,108) content-size 49x49 floating children: not-inline TextNode <#text> BlockContainer <(anonymous)> at (8,108) content-size 784x0 children: inline TextNode <#text> diff --git a/Tests/LibWeb/Layout/expected/join-out-of-flow-box-with-previous-sibling-if-wrapped-in-anonymous-box.txt b/Tests/LibWeb/Layout/expected/join-out-of-flow-box-with-previous-sibling-if-wrapped-in-anonymous-box.txt new file mode 100644 index 0000000000..e9a9081597 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/join-out-of-flow-box-with-previous-sibling-if-wrapped-in-anonymous-box.txt @@ -0,0 +1,9 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x76 children: not-inline + BlockContainer at (8,8) content-size 784x60 children: not-inline + BlockContainer at (8,8) content-size 200x30 children: not-inline + BlockContainer <(anonymous)> at (8,38) content-size 784x30 children: inline + line 0 width: 200, height: 30, bottom: 30, baseline: 30 + frag 0 from BlockContainer start: 0, length: 0, rect: [8,38 200x30] + BlockContainer at (8,38) content-size 200x30 inline-block children: not-inline + BlockContainer at (592,38) content-size 200x30 floating children: not-inline diff --git a/Tests/LibWeb/Layout/input/join-out-of-flow-box-with-previous-sibling-if-wrapped-in-anonymous-box.html b/Tests/LibWeb/Layout/input/join-out-of-flow-box-with-previous-sibling-if-wrapped-in-anonymous-box.html new file mode 100644 index 0000000000..14966ee7af --- /dev/null +++ b/Tests/LibWeb/Layout/input/join-out-of-flow-box-with-previous-sibling-if-wrapped-in-anonymous-box.html @@ -0,0 +1,17 @@ +
\ No newline at end of file diff --git a/Userland/Libraries/LibWeb/Layout/TreeBuilder.cpp b/Userland/Libraries/LibWeb/Layout/TreeBuilder.cpp index f66944355c..4022652be4 100644 --- a/Userland/Libraries/LibWeb/Layout/TreeBuilder.cpp +++ b/Userland/Libraries/LibWeb/Layout/TreeBuilder.cpp @@ -89,12 +89,22 @@ static Layout::Node& insertion_parent_for_block_node(Layout::NodeWithStyle& layo return layout_parent; } + bool is_out_of_flow = layout_node.is_absolutely_positioned() || layout_node.is_floating(); + + if (is_out_of_flow + && layout_parent.last_child()->is_anonymous() + && layout_parent.last_child()->children_are_inline()) { + // Block is out-of-flow & previous sibling was wrapped in an anonymous block. + // Join the previous sibling inside the anonymous block. + return *layout_parent.last_child(); + } + if (!layout_parent.children_are_inline()) { // Parent block has block-level children, insert this block into parent. return layout_parent; } - if (layout_node.is_absolutely_positioned() || layout_node.is_floating()) { + if (is_out_of_flow) { // Block is out-of-flow, it can have inline siblings if necessary. return layout_parent; }