beenull/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-11-22 23:50:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

LibWeb: Add out-of-flow boxes to anonymous wrapper block when possible

Browse source 
If the previous sibling of an out-of-flow box has been wrapped in an
anonymous block, we now stuff the out-of-flow box into the anonymous
block as well.

Co-authored-by: Aliaksandr Kalenik <kalenik.aliaksandr@gmail.com>
This commit is contained in:
Andreas Kling 2023-03-25 15:33:22 +01:00
parent 71bdee2837
commit 8f311c61af
Notes: sideshowbarker 2024-07-17 05:02:42 +09:00 
Author: https://github.com/awesomekling
Commit: https://github.com/SerenityOS/serenity/commit/8f311c61af
6 changed files with 61 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
Tests/LibWeb/Layout/expected/acid1.txt
View file

@ -74,30 +74,28 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
TextNode <#text> TextNode <#text>
BlockContainer <(anonymous)> at (135,45) content-size 340x0 children: inline BlockContainer <(anonymous)> at (135,45) content-size 340x0 children: inline
TextNode <#text> TextNode <#text>
BlockContainer <blockquote> at (280,195) content-size 50x90 floating children: not-inline BlockContainer <blockquote> at (280,195) content-size 50x90 floating children: not-inline
BlockContainer <(anonymous)> at (280,195) content-size 50x0 children: inline BlockContainer <(anonymous)> at (280,195) content-size 50x0 children: inline
TextNode <#text> TextNode <#text>
BlockContainer <address> at (280,195) content-size 50x20 children: inline BlockContainer <address> at (280,195) content-size 50x20 children: inline
line 0 width: 17.275390, height: 10, bottom: 10, baseline: 7.998046 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] frag 0 from TextNode start: 0, length: 3, rect: [280,195 17.275390x10]
"bar" "bar"
line 1 width: 30.224609, height: 10, bottom: 20, baseline: 7.998046 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] frag 0 from TextNode start: 4, length: 6, rect: [280,205 30.224609x10]
"maids," "maids,"
TextNode <#text> TextNode <#text>
BlockContainer <(anonymous)> at (280,215) content-size 50x0 children: inline BlockContainer <(anonymous)> at (280,215) content-size 50x0 children: inline
TextNode <#text> TextNode <#text>
BlockContainer <(anonymous)> at (135,45) content-size 340x0 children: inline
TextNode <#text> TextNode <#text>
BlockContainer <h1> at (365,185) content-size 100x100 floating children: inline BlockContainer <h1> at (365,185) content-size 100x100 floating children: inline
line 0 width: 56.416015, height: 10, bottom: 10, baseline: 7.998046 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] frag 0 from TextNode start: 0, length: 11, rect: [365,185 56.416015x10]
"sing to me," "sing to me,"
line 1 width: 65.449218, height: 10, bottom: 20, baseline: 7.998046 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] frag 0 from TextNode start: 12, length: 12, rect: [365,195 65.449218x10]
"erbarme dich" "erbarme dich"
TextNode <#text> TextNode <#text>
BlockContainer <(anonymous)> at (135,45) content-size 340x0 children: inline
TextNode <#text> TextNode <#text>
TextNode <#text> TextNode <#text>
BlockContainer <(anonymous)> at (20,30) content-size 480x0 children: inline BlockContainer <(anonymous)> at (20,30) content-size 480x0 children: inline

5
Tests/LibWeb/Layout/expected/bfc-float-left-break-vertically.txt
View file

@ -1,5 +1,5 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x107 children: not-inline BlockContainer <html> at (1,1) content-size 798x106 children: not-inline
BlockContainer <(anonymous)> at (1,1) content-size 798x0 children: inline BlockContainer <(anonymous)> at (1,1) content-size 798x0 children: inline
TextNode <#text> TextNode <#text>
BlockContainer <body> at (2,2) content-size 400x2 children: not-inline BlockContainer <body> 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> TextNode <#text>
BlockContainer <(anonymous)> at (2,4) content-size 400x0 children: inline BlockContainer <(anonymous)> at (2,4) content-size 400x0 children: inline
TextNode <#text> TextNode <#text>
BlockContainer <div.green> at (3,57) content-size 100x50 floating children: not-inline BlockContainer <div.green> at (3,56) content-size 100x50 floating children: not-inline
BlockContainer <(anonymous)> at (2,4) content-size 400x0 children: inline
TextNode <#text> TextNode <#text>

3
Tests/LibWeb/Layout/expected/clearfix.txt
View file

@ -9,8 +9,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <div.clearfix> at (8,108) content-size 784x0 children: not-inline BlockContainer <div.clearfix> at (8,108) content-size 784x0 children: not-inline
BlockContainer <(anonymous)> at (8,108) content-size 784x0 children: inline BlockContainer <(anonymous)> at (8,108) content-size 784x0 children: inline
TextNode <#text> TextNode <#text>
BlockContainer <div.square.black> at (8,108) content-size 49x49 floating children: not-inline BlockContainer <div.square.black> at (8,108) content-size 49x49 floating children: not-inline
BlockContainer <(anonymous)> at (8,108) content-size 784x0 children: inline
TextNode <#text> TextNode <#text>
BlockContainer <(anonymous)> at (8,108) content-size 784x0 children: inline BlockContainer <(anonymous)> at (8,108) content-size 784x0 children: inline
TextNode <#text> TextNode <#text>

9
Tests/LibWeb/Layout/expected/join-out-of-flow-box-with-previous-sibling-if-wrapped-in-anonymous-box.txt Normal file
View file

@ -0,0 +1,9 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x76 children: not-inline
BlockContainer <body> at (8,8) content-size 784x60 children: not-inline
BlockContainer <div.banner> 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 <div.tab> at (8,38) content-size 200x30 inline-block children: not-inline
BlockContainer <div.timeline> at (592,38) content-size 200x30 floating children: not-inline

17
Tests/LibWeb/Layout/input/join-out-of-flow-box-with-previous-sibling-if-wrapped-in-anonymous-box.html Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html><html><head><style>
div {
width: 200px;
height: 30px;
}
.banner {
background: lime;
}
.tab {
background: orange;
display: inline-block;
}
.timeline {
background: magenta;
float: right;
}
</style></head><body><div class="banner"></div><div class="tab"></div><div class="timeline">

12
Userland/Libraries/LibWeb/Layout/TreeBuilder.cpp
View file

@ -89,12 +89,22 @@ static Layout::Node& insertion_parent_for_block_node(Layout::NodeWithStyle& layo
return layout_parent; 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()) { if (!layout_parent.children_are_inline()) {
// Parent block has block-level children, insert this block into parent. // Parent block has block-level children, insert this block into parent.
return layout_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. // Block is out-of-flow, it can have inline siblings if necessary.
return layout_parent; return layout_parent;
} }