LibWeb: Wrap out-of-flow table children in anonymous table cells

This fixes an issue where floating children of a table box would not get
laid out at all if they were surrounded by nothing but whitespace.
This commit is contained in:
Andreas Kling 2025-08-25 14:19:25 +02:00 committed by Jelle Raaijmakers
parent 92b560edce
commit 3d97251da3
4 changed files with 66 additions and 9 deletions

View File

@ -495,8 +495,13 @@ static bool is_ignorable_whitespace(Layout::Node const& node)
if (node.is_anonymous() && node.is_block_container() && static_cast<BlockContainer const&>(node).children_are_inline()) {
bool contains_only_white_space = true;
node.for_each_in_inclusive_subtree_of_type<TextNode>([&contains_only_white_space](auto& text_node) {
if (!text_node.text_for_rendering().is_ascii_whitespace()) {
node.for_each_in_inclusive_subtree([&contains_only_white_space](auto& descendant) {
if (auto* text_node = as_if<TextNode>(descendant)) {
if (!text_node->text_for_rendering().is_ascii_whitespace()) {
contains_only_white_space = false;
return TraversalDecision::Break;
}
} else if (descendant.is_out_of_flow()) {
contains_only_white_space = false;
return TraversalDecision::Break;
}

View File

@ -3,19 +3,21 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <body> at (8,8) content-size 784x4 children: not-inline
TableWrapper <(anonymous)> at (8,8) content-size 784x4 [BFC] children: not-inline
Box <table> at (8,8) content-size 784x4 table-box [TFC] children: not-inline
Box <thead> at (10,10) content-size 0x0 table-header-group children: not-inline
Box <tr> at (10,10) content-size 0x0 table-row children: not-inline
BlockContainer <(anonymous)> at (0,590) content-size 800x10 positioned [BFC] children: inline
TextNode <#text>
Box <thead> at (10,10) content-size 780x0 table-header-group children: not-inline
Box <tr> at (10,10) content-size 780x0 table-row children: not-inline
BlockContainer <(anonymous)> at (10,10) content-size 780x0 table-cell [BFC] children: not-inline
BlockContainer <(anonymous)> at (0,590) content-size 800x10 positioned [BFC] children: inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x20]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x4]
PaintableWithLines (TableWrapper(anonymous)) [8,8 784x4]
PaintableBox (Box<TABLE>) [8,8 784x4]
PaintableBox (Box<THEAD>) [10,10 0x0]
PaintableBox (Box<TR>) [10,10 0x0]
PaintableWithLines (BlockContainer(anonymous)) [0,590 800x10]
PaintableBox (Box<THEAD>) [10,10 780x0]
PaintableBox (Box<TR>) [10,10 780x0]
PaintableWithLines (BlockContainer(anonymous)) [10,10 780x0]
PaintableWithLines (BlockContainer(anonymous)) [0,590 800x10]
SC for Viewport<#document> [0,0 800x600] [children: 1] (z-index: auto)
SC for BlockContainer<HTML> [0,0 800x20] [children: 0] (z-index: auto)

View File

@ -0,0 +1,25 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x316 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 300x300 children: not-inline
TableWrapper <(anonymous)> at (8,8) content-size 200x100 positioned [BFC] children: not-inline
Box <main> at (8,8) content-size 200x100 table-box [TFC] children: not-inline
Box <(anonymous)> at (8,8) content-size 200x100 table-row children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 100x100 table-cell [BFC] children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 100x0 children: inline
BlockContainer <div.floaty> at (8,8) content-size 100x100 floating [BFC] children: not-inline
TextNode <#text>
BlockContainer <div.cell> at (108,108) content-size 100x0 table-cell [BFC] children: not-inline
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x316]
PaintableWithLines (BlockContainer<BODY>) [8,8 300x300]
PaintableWithLines (TableWrapper(anonymous)) [8,8 200x100]
PaintableBox (Box<MAIN>) [8,8 200x100]
PaintableBox (Box(anonymous)) [8,8 200x100]
PaintableWithLines (BlockContainer(anonymous)) [8,8 100x100]
PaintableWithLines (BlockContainer(anonymous)) [8,8 100x0] overflow: [8,8 100x100]
PaintableWithLines (BlockContainer<DIV>.floaty) [8,8 100x100]
PaintableWithLines (BlockContainer<DIV>.cell) [108,8 100x100]
SC for Viewport<#document> [0,0 800x600] [children: 1] (z-index: auto)
SC for BlockContainer<HTML> [0,0 800x316] [children: 0] (z-index: auto)

View File

@ -0,0 +1,25 @@
<!doctype html><style type="text/css">
* { outline: 1px solid black; }
html { background: white; }
body {
width: 300px;
height: 300px;
background: pink;
}
main {
display: table;
position: relative;
}
.cell {
display: table-cell;
width: 100px;
height: 100px;
background: magenta;
}
.floaty {
float: left;
width: 100px;
height: 100px;
background: orange;
}
</style><body><main><div class="floaty"></div> <div class="cell"></div>