0ct0pu5/ladybird
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

LibWeb: Include anonymous boxes with no lines into computing BFC height

Browse source 
Pseudo-elements like ::before and ::after were discarded when their
content property was an empty string (ignoring whitespace), because they
are anonymous containers with no lines.

Our previous way around it was to add an empty line box (see b062a0fb7c)
however it didn't actually work for cases described in the previous
commit.

This makes avatars and cover arts square on last.fm and "fixes" the test
css-pseudo-element-should-not-be-affected-by-presentational-hints.html.
Unfortunately, this also regresses on block-and-inline/clearfix.html,
but that hopefully will be handled in subsequent commit.
This commit is contained in:
Karol Kosek 2023-07-11 12:21:59 +02:00 • committed by Andreas Kling
parent d4b5205482
commit 142d498f14
Notes: sideshowbarker 2024-07-17 03:45:48 +09:00
7 changed files with 37 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
Tests/LibWeb/Layout/expected/css-pseudo-element-should-not-be-affected-by-inline-style.txt
View file

@ -3,9 +3,6 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <body> at (10,10) content-size 780x102 children: not-inline
BlockContainer <div.outer> at (11,11) content-size 100x100 children: not-inline
BlockContainer <(anonymous)> at (12,12) content-size 50x50 children: inline
line 0 width: 0, height: 21.828125, bottom: 21.828125, baseline: 16.890625
frag 0 from TextNode start: 0, length: 0, rect: [12,12 0x21.828125]
""
TextNode <#text>
BlockContainer <div.inner> at (12,64) content-size 98x0 children: inline
TextNode <#text>

7
Tests/LibWeb/Layout/expected/css-pseudo-element-should-not-be-affected-by-presentational-hints.txt
View file

@ -5,9 +5,6 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
Box <table> at (11,11) content-size 108x104 table-box [TFC] children: not-inline
Box <tbody> at (11,11) content-size 104x100 table-row-group children: not-inline
Box <tr> at (13,13) content-size 104x100 table-row children: not-inline
BlockContainer <td> at (15,51.078125) content-size 100x23.828125 table-cell [BFC] children: not-inline
BlockContainer <(anonymous)> at (16,52.078125) content-size 98x21.828125 children: inline
line 0 width: 0, height: 21.828125, bottom: 21.828125, baseline: 16.890625
frag 0 from TextNode start: 0, length: 0, rect: [16,52.078125 0x21.828125]
""
BlockContainer <td> at (15,62) content-size 100x2 table-cell [BFC] children: not-inline
BlockContainer <(anonymous)> at (16,63) content-size 98x0 children: inline
TextNode <#text>

11
Tests/LibWeb/Layout/expected/position-empty-pseudo-elements.txt Normal file
View file

@ -0,0 +1,11 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x158 [BFC] children: not-inline
BlockContainer <body> at (8,25) content-size 784x125 children: not-inline
BlockContainer <div.empty_content> at (33,25) content-size 50x50 children: not-inline
BlockContainer <(anonymous)> at (33,75) content-size 50x0 children: inline
TextNode <#text>
BlockContainer <div.content_with_space> at (33,100) content-size 50x50 children: not-inline
BlockContainer <(anonymous)> at (33,150) content-size 50x0 children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,175) content-size 784x0 children: inline
TextNode <#text>

15
Tests/LibWeb/Layout/expected/pseudo-element-with-custom-properties-2.txt
View file

@ -9,12 +9,9 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BreakNode <br>
TextNode <#text>
BlockContainer <div.a> at (8,29.828125) content-size 784x100 children: inline
line 0 width: 200, height: 100, bottom: 100, baseline: 16.890625
line 0 width: 200, height: 100, bottom: 100, baseline: 100
frag 0 from BlockContainer start: 0, length: 0, rect: [8,29.828125 200x100]
BlockContainer <(anonymous)> at (8,29.828125) content-size 200x100 inline-block [BFC] children: inline
line 0 width: 0, height: 21.828125, bottom: 21.828125, baseline: 16.890625
frag 0 from TextNode start: 0, length: 0, rect: [8,29.828125 0x21.828125]
""
TextNode <#text>
BlockContainer <(anonymous)> at (8,129.828125) content-size 784x65.484375 children: inline
line 0 width: 0, height: 21.828125, bottom: 21.828125, baseline: 16.890625
@ -29,12 +26,9 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BreakNode <br>
TextNode <#text>
BlockContainer <div.b> at (8,195.3125) content-size 784x100 children: inline
line 0 width: 200, height: 100, bottom: 100, baseline: 16.890625
line 0 width: 200, height: 100, bottom: 100, baseline: 100
frag 0 from BlockContainer start: 0, length: 0, rect: [8,195.3125 200x100]
BlockContainer <(anonymous)> at (8,195.3125) content-size 200x100 inline-block [BFC] children: inline
line 0 width: 0, height: 21.828125, bottom: 21.828125, baseline: 16.890625
frag 0 from TextNode start: 0, length: 0, rect: [8,195.3125 0x21.828125]
""
TextNode <#text>
BlockContainer <(anonymous)> at (8,295.3125) content-size 784x65.484375 children: inline
line 0 width: 0, height: 21.828125, bottom: 21.828125, baseline: 16.890625
@ -49,12 +43,9 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BreakNode <br>
TextNode <#text>
BlockContainer <div.c> at (8,360.796875) content-size 784x100 children: inline
line 0 width: 200, height: 100, bottom: 100, baseline: 16.890625
line 0 width: 200, height: 100, bottom: 100, baseline: 100
frag 0 from BlockContainer start: 0, length: 0, rect: [8,360.796875 200x100]
BlockContainer <(anonymous)> at (8,360.796875) content-size 200x100 inline-block [BFC] children: inline
line 0 width: 0, height: 21.828125, bottom: 21.828125, baseline: 16.890625
frag 0 from TextNode start: 0, length: 0, rect: [8,360.796875 0x21.828125]
""
TextNode <#text>
BlockContainer <(anonymous)> at (8,460.796875) content-size 784x0 children: inline
TextNode <#text>

3
Tests/LibWeb/Layout/expected/pseudo-element-with-custom-properties.txt
View file

@ -3,7 +3,4 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <body> at (8,8) content-size 784x0 children: not-inline
BlockContainer <div.hello> at (8,8) content-size 784x0 children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 500x100 positioned [BFC] children: inline
line 0 width: 0, height: 21.828125, bottom: 21.828125, baseline: 16.890625
frag 0 from TextNode start: 0, length: 0, rect: [8,8 0x21.828125]
""
TextNode <#text>

20
Tests/LibWeb/Layout/input/position-empty-pseudo-elements.html Normal file
View file

@ -0,0 +1,20 @@
<!doctype html><style>
div {
background: green;
display: block;
width: 50px;
margin: 25px;
}
div.empty_content::after {
content: "";
display: block;
padding-top: 100%;
}
div.content_with_space::after {
content: " ";
display: block;
padding-top: 100%;
}
</style><div class=empty_content></div><div class=content_with_space></div></div>

3
Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp
View file

@ -568,8 +568,7 @@ CSSPixels BlockFormattingContext::compute_auto_height_for_block_level_element(Bo
auto const& child_box_state = m_state.get(*child_box);
// Ignore anonymous block containers with no lines. These don't count as in-flow block boxes.
if (!child_box->is_table_wrapper() && child_box->is_anonymous() && child_box->is_block_container() && child_box_state.line_boxes.is_empty())
if (margins_collapse_through(*child_box, m_state))
continue;
auto margin_bottom = m_margin_state.current_collapsed_margin();