RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 12:27:35 +00:00
Code Issues Activity Actions

LibWeb: Don't put abspos grid/flex items in anonymous wrapper

Browse source 
Grid and flex containers have their own rules for abspos items, so we
shouldn't try to be clever and put them in the "current" anonymous
wrapper block. That behavior is primarily for the benefit of block &
inline layout.
This commit is contained in:
Andreas Kling 2023-04-06 18:01:01 +02:00
parent 8760376abe
commit 7b4c76788b
3 changed files with 25 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

7
Tests/LibWeb/Layout/expected/flex-abspos-item-with-preceding-whitespace.txt Normal file
View file

@ -0,0 +1,7 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x20 children: not-inline
BlockContainer <body> at (10,10) content-size 780x2 children: not-inline
Box <div.pink> at (11,11) content-size 778x0 flex-container(row) children: not-inline
BlockContainer <(anonymous)> at (11,11) content-size 0x0 children: inline
TextNode <#text>
BlockContainer <div.orange> at (11,-39) content-size 100x100 positioned children: not-inline

16
Tests/LibWeb/Layout/input/flex-abspos-item-with-preceding-whitespace.html Normal file
View file

@ -0,0 +1,16 @@
<!DOCTYPE html><html><head><style>
* {
border: 1px solid black !important;
}
.pink {
background: pink;
display: flex;
align-items: center;
}
.orange {
background: orange;
width: 100px;
height: 100px;
position: absolute;
}
</style></head><body><div class="pink"> <div class="orange">

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

@ -92,6 +92,8 @@ static Layout::Node& insertion_parent_for_block_node(Layout::NodeWithStyle& layo
bool is_out_of_flow = layout_node.is_absolutely_positioned() || layout_node.is_floating(); bool is_out_of_flow = layout_node.is_absolutely_positioned() || layout_node.is_floating();
if (is_out_of_flow if (is_out_of_flow
&& !layout_parent.display().is_flex_inside()
&& !layout_parent.display().is_grid_inside()
&& layout_parent.last_child()->is_anonymous() && layout_parent.last_child()->is_anonymous()
&& layout_parent.last_child()->children_are_inline()) { && layout_parent.last_child()->children_are_inline()) {
// Block is out-of-flow & previous sibling was wrapped in an anonymous block. // Block is out-of-flow & previous sibling was wrapped in an anonymous block.