mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2024-11-22 15:40:19 +00:00
LibWeb: Add out-of-flow boxes to anonymous wrapper block when possible
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
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
|
|
@ -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 <blockquote> at (280,195) content-size 50x90 floating children: not-inline
|
||||
BlockContainer <(anonymous)> at (280,195) content-size 50x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <address> 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 <blockquote> at (280,195) content-size 50x90 floating children: not-inline
|
||||
BlockContainer <(anonymous)> at (280,195) content-size 50x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <address> 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 <h1> 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 <h1> 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
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
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
|
||||
TextNode <#text>
|
||||
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>
|
||||
BlockContainer <(anonymous)> at (2,4) content-size 400x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.green> at (3,57) content-size 100x50 floating children: not-inline
|
||||
BlockContainer <(anonymous)> at (2,4) content-size 400x0 children: inline
|
||||
BlockContainer <div.green> at (3,56) content-size 100x50 floating children: not-inline
|
||||
TextNode <#text>
|
||||
|
|
|
|||
|
|
@ -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 <(anonymous)> at (8,108) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.square.black> at (8,108) content-size 49x49 floating children: not-inline
|
||||
BlockContainer <(anonymous)> at (8,108) content-size 784x0 children: inline
|
||||
BlockContainer <div.square.black> at (8,108) content-size 49x49 floating children: not-inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,108) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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">
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue