Skip to content

LibWeb: Vertical alignment fixes for (text-)top and (text-)bottom #11052

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kalenikaliaksandr merged 2 commits into from
Aug 9, 2026
Merged

LibWeb: Vertical alignment fixes for (text-)top and (text-)bottom #11052

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3dad238
LibWeb: Implement text-top and text-bottom vertical alignment
gmta Aug 7, 2026
f01c515
LibWeb: Align top and bottom aligned subtrees to the line box
gmta Aug 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
246 changes: 210 additions & 36 deletions Libraries/LibWeb/Rust/src/layout/line_builder.rs
View file
Open in desktop

Large diffs are not rendered by default.

90 changes: 45 additions & 45 deletions Tests/LibWeb/Layout/expected/abspos-inline-containing-block-first-last-line-rule.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
Viewport <#document> at [0,0] [0+0+0 800 0+0+0] [0+0+0 600 0+0+0] [BFC] children: not-inline
BlockContainer <html> at [0,0] [0+0+0 800 0+0+0] [0+0+0 409 0+0+0] [BFC] children: not-inline
BlockContainer <body> at [0,8] [0+0+0 800 0+0+0] [0+0+0 393 0+0+0] children: not-inline
BlockContainer <html> at [0,0] [0+0+0 800 0+0+0] [0+0+0 404 0+0+0] [BFC] children: not-inline
BlockContainer <body> at [0,8] [0+0+0 800 0+0+0] [0+0+0 388 0+0+0] children: not-inline
BlockContainer <div.frame> at [8,8] [8+0+0 130 0+0+662] [8+0+0 60 0+0+8] children: inline
TextNode <#text> (not painted)
InlineNode <span.rel> at [8,10] [0+0+0 126.28125 0+0+0] [0+0+0 56 0+0+0]
Expand Down Expand Up @@ -69,54 +69,54 @@ Viewport <#document> at [0,0] [0+0+0 800 0+0+0] [0+0+0 600 0+0+0] [BFC] children
BlockContainer <(anonymous)> at [0,220] [0+0+0 800 0+0+0] [0+0+0 0 0+0+0] children: inline
TextNode <#text> (not painted)
TextNode <#text> (not painted)
BlockContainer <div.frame> at [8,220] [8+0+0 300 0+0+492] [8+0+0 65 0+0+8] children: inline
BlockContainer <div.frame> at [8,220] [8+0+0 300 0+0+492] [8+0+0 60 0+0+8] children: inline
TextNode <#text> (not painted)
InlineNode <span.rel> at [8,267] [0+0+0 46.875 0+0+0] [0+0+0 60 0+0+0]
frag 0 from TextNode start: 0, length: 1, rect: [8,267 9.703125x16] baseline: 12.796875
InlineNode <span.rel> at [8,262] [0+0+0 46.875 0+0+0] [0+0+0 60 0+0+0]
frag 0 from TextNode start: 0, length: 1, rect: [8,262 9.703125x16] baseline: 12.796875
"x"
frag 1 from BlockContainer start: 0, length: 0, rect: [17.703125,220 30x60] baseline: 60
frag 2 from TextNode start: 0, length: 1, rect: [47.703125,267 7.171875x16] baseline: 12.796875
frag 2 from TextNode start: 0, length: 1, rect: [47.703125,262 7.171875x16] baseline: 12.796875
"y"
TextNode <#text> (not painted)
BlockContainer <span> at [17.703125,220] inline-block [0+0+0 30 0+0+0] [0+0+0 60 0+0+0] [BFC] children: not-inline
TextNode <#text> (not painted)
BlockContainer <span.cb> at [8,267] positioned [0+0+0 46.875 0+0+0] [0+0+0 60 0+0+0] [BFC] children: not-inline
BlockContainer <span.cb> at [8,262] positioned [0+0+0 46.875 0+0+0] [0+0+0 60 0+0+0] [BFC] children: not-inline
TextNode <#text> (not painted)
BlockContainer <(anonymous)> at [0,293] [0+0+0 800 0+0+0] [0+0+0 0 0+0+0] children: inline
BlockContainer <(anonymous)> at [0,288] [0+0+0 800 0+0+0] [0+0+0 0 0+0+0] children: inline
TextNode <#text> (not painted)
TextNode <#text> (not painted)
TableWrapper <(anonymous)> at [0,293] [0+0+0 204 0+0+596] [0+0+0 20 0+0+0] [BFC] children: not-inline
Box <table> at [0,293] table-box [0+0+0 204 0+0+0] [0+0+0 20 0+0+0] [TFC] children: not-inline
Box <tbody> at [2,295] table-row-group [0+0+0 200 0+0+0] [0+0+0 16 0+0+0] children: not-inline
Box <tr> at [2,295] table-row [0+0+0 200 0+0+0] [0+0+0 16 0+0+0] children: not-inline
BlockContainer <td> at [2,295] table-cell [0+0+0 200 0+0+0] [0+0+0 16 0+0+0] [BFC] children: inline
InlineNode <span.rel> at [2,295] [0+0+0 66.21875 0+0+0] [0+0+0 16 0+0+0]
frag 0 from TextNode start: 0, length: 9, rect: [2,295 66.21875x16] baseline: 12.796875
TableWrapper <(anonymous)> at [0,288] [0+0+0 204 0+0+596] [0+0+0 20 0+0+0] [BFC] children: not-inline
Box <table> at [0,288] table-box [0+0+0 204 0+0+0] [0+0+0 20 0+0+0] [TFC] children: not-inline
Box <tbody> at [2,290] table-row-group [0+0+0 200 0+0+0] [0+0+0 16 0+0+0] children: not-inline
Box <tr> at [2,290] table-row [0+0+0 200 0+0+0] [0+0+0 16 0+0+0] children: not-inline
BlockContainer <td> at [2,290] table-cell [0+0+0 200 0+0+0] [0+0+0 16 0+0+0] [BFC] children: inline
InlineNode <span.rel> at [2,290] [0+0+0 66.21875 0+0+0] [0+0+0 16 0+0+0]
frag 0 from TextNode start: 0, length: 9, rect: [2,290 66.21875x16] baseline: 12.796875
"cell text"
TextNode <#text> (not painted)
BlockContainer <span.cb> at [2,295] positioned [0+0+0 66.21875 0+0+0] [0+0+0 16 0+0+0] [BFC] children: not-inline
BlockContainer <(anonymous)> at [0,313] [0+0+0 800 0+0+0] [0+0+0 0 0+0+0] children: inline
BlockContainer <span.cb> at [2,290] positioned [0+0+0 66.21875 0+0+0] [0+0+0 16 0+0+0] [BFC] children: not-inline
BlockContainer <(anonymous)> at [0,308] [0+0+0 800 0+0+0] [0+0+0 0 0+0+0] children: inline
TextNode <#text> (not painted)
TextNode <#text> (not painted)
BlockContainer <div.frame> at [8,321] [8+0+0 300 0+0+492] [8+0+0 80 0+0+8] children: inline
BlockContainer <div.frame> at [8,316] [8+0+0 300 0+0+492] [8+0+0 80 0+0+8] children: inline
TextNode <#text> (not painted)
InlineNode <span.rel> at [8,323] [0+0+0 6.859375 0+0+0] [0+0+0 76 0+0+0]
frag 0 from TextNode start: 0, length: 1, rect: [8,323 6.859375x16] baseline: 12.796875
InlineNode <span.rel> at [8,318] [0+0+0 6.859375 0+0+0] [0+0+0 76 0+0+0]
frag 0 from TextNode start: 0, length: 1, rect: [8,318 6.859375x16] baseline: 12.796875
"t"
frag 0 from Box start: 0, length: 0, rect: [8,341 300x40] baseline: 0
frag 0 from TextNode start: 0, length: 1, rect: [8,383 6.859375x16] baseline: 12.796875
frag 0 from Box start: 0, length: 0, rect: [8,336 300x40] baseline: 0
frag 0 from TextNode start: 0, length: 1, rect: [8,378 6.859375x16] baseline: 12.796875
"t"
TextNode <#text> (not painted)
Box <div> at [8,341] flex-container(row) [0+0+0 300 0+0+0] [0+0+0 40 0+0+0] [FFC] children: not-inline
BlockContainer <div.cb> at [8,323] positioned [0+0+0 6.859375 0+0+0] [0+0+0 76 0+0+0] [BFC] children: not-inline
Box <div> at [8,336] flex-container(row) [0+0+0 300 0+0+0] [0+0+0 40 0+0+0] [FFC] children: not-inline
BlockContainer <div.cb> at [8,318] positioned [0+0+0 6.859375 0+0+0] [0+0+0 76 0+0+0] [BFC] children: not-inline
TextNode <#text> (not painted)
TextNode <#text> (not painted)
BlockContainer <(anonymous)> at [0,409] [0+0+0 800 0+0+0] [0+0+0 0 0+0+0] children: inline
BlockContainer <(anonymous)> at [0,404] [0+0+0 800 0+0+0] [0+0+0 0 0+0+0] children: inline
TextNode <#text> (not painted)

ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x409]
PaintableWithLines (BlockContainer<BODY>) [0,8 800x393]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x404]
PaintableWithLines (BlockContainer<BODY>) [0,8 800x388]
PaintableWithLines (BlockContainer<DIV>.frame) [8,8 130x60]
InlinePaintable (InlineNode<SPAN>.rel) [8,10 126.28125x56]
PaintableWithLines (BlockContainer<SPAN>.cb) [8,10 17.4375x56]
Expand All @@ -134,24 +134,24 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
InlinePaintable (InlineNode<SPAN>.rel) [227.5625,194 56.71875x16]
PaintableWithLines (BlockContainer<SPAN>.cb) [231.5625,194 44.71875x16]
PaintableWithLines (BlockContainer(anonymous)) [0,220 800x0]
PaintableWithLines (BlockContainer<DIV>.frame) [8,220 300x65]
InlinePaintable (InlineNode<SPAN>.rel) [8,267 46.875x60]
PaintableWithLines (BlockContainer<DIV>.frame) [8,220 300x60]
InlinePaintable (InlineNode<SPAN>.rel) [8,262 46.875x60]
PaintableWithLines (BlockContainer<SPAN>) [17.703125,220 30x60]
PaintableWithLines (BlockContainer<SPAN>.cb) [8,267 46.875x60]
PaintableWithLines (BlockContainer(anonymous)) [0,293 800x0]
PaintableWithLines (TableWrapper(anonymous)) [0,293 204x20]
Paintable (Box<TABLE>) [0,293 204x20]
Paintable (Box<TBODY>) [2,295 200x16]
Paintable (Box<TR>) [2,295 200x16]
PaintableWithLines (BlockContainer<TD>) [2,295 200x16]
InlinePaintable (InlineNode<SPAN>.rel) [2,295 66.21875x16]
PaintableWithLines (BlockContainer<SPAN>.cb) [2,295 66.21875x16]
PaintableWithLines (BlockContainer(anonymous)) [0,313 800x0]
PaintableWithLines (BlockContainer<DIV>.frame) [8,321 300x80]
InlinePaintable (InlineNode<SPAN>.rel) [8,323 6.859375x76]
Paintable (Box<DIV>) [8,341 300x40]
PaintableWithLines (BlockContainer<DIV>.cb) [8,323 6.859375x76]
PaintableWithLines (BlockContainer(anonymous)) [0,409 800x0]
PaintableWithLines (BlockContainer<SPAN>.cb) [8,262 46.875x60]
PaintableWithLines (BlockContainer(anonymous)) [0,288 800x0]
PaintableWithLines (TableWrapper(anonymous)) [0,288 204x20]
Paintable (Box<TABLE>) [0,288 204x20]
Paintable (Box<TBODY>) [2,290 200x16]
Paintable (Box<TR>) [2,290 200x16]
PaintableWithLines (BlockContainer<TD>) [2,290 200x16]
InlinePaintable (InlineNode<SPAN>.rel) [2,290 66.21875x16]
PaintableWithLines (BlockContainer<SPAN>.cb) [2,290 66.21875x16]
PaintableWithLines (BlockContainer(anonymous)) [0,308 800x0]
PaintableWithLines (BlockContainer<DIV>.frame) [8,316 300x80]
InlinePaintable (InlineNode<SPAN>.rel) [8,318 6.859375x76]
Paintable (Box<DIV>) [8,336 300x40]
PaintableWithLines (BlockContainer<DIV>.cb) [8,318 6.859375x76]
PaintableWithLines (BlockContainer(anonymous)) [0,404 800x0]

SC for Viewport<#document> [0,0 800x600] (z-index: auto)
SC for BlockContainer<HTML> [0,0 800x409] (z-index: auto)
SC for BlockContainer<HTML> [0,0 800x404] (z-index: auto)
38 changes: 38 additions & 0 deletions Tests/LibWeb/Layout/expected/vertical-align-bottom-atomic-inline-line-height.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
Viewport <#document> at [0,0] [0+0+0 800 0+0+0] [0+0+0 600 0+0+0] [BFC] children: not-inline
BlockContainer <html> at [0,0] [0+0+0 800 0+0+0] [0+0+0 62 0+0+0] [BFC] children: not-inline
BlockContainer <body> at [8,8] [8+0+0 784 0+0+8] [8+0+0 46 0+0+8] children: not-inline
BlockContainer <div.line> at [8,8] [0+0+0 784 0+0+0] [0+0+0 23 0+0+0] children: inline
frag 0 from TextNode start: 0, length: 1, rect: [8,11 20x20] baseline: 16
"A"
frag 1 from BlockContainer start: 0, length: 0, rect: [28,8 20x23] baseline: 23
frag 2 from TextNode start: 0, length: 1, rect: [48,11 20x20] baseline: 16
"B"
TextNode <#text> (not painted)
BlockContainer <span.box.block> at [28,8] inline-block [0+0+0 20 0+0+0] [0+0+0 23 0+0+0] [BFC] children: not-inline
TextNode <#text> (not painted)
BlockContainer <(anonymous)> at [8,31] [0+0+0 784 0+0+0] [0+0+0 0 0+0+0] children: inline
TextNode <#text> (not painted)
BlockContainer <div.line> at [8,31] [0+0+0 784 0+0+0] [0+0+0 23 0+0+0] children: inline
frag 0 from TextNode start: 0, length: 1, rect: [8,34 20x20] baseline: 16
"A"
frag 1 from Box start: 0, length: 0, rect: [28,31 20x23] baseline: 23
frag 2 from TextNode start: 0, length: 1, rect: [48,34 20x20] baseline: 16
"B"
TextNode <#text> (not painted)
Box <span.box.flex> at [28,31] flex-container(row) [0+0+0 20 0+0+0] [0+0+0 23 0+0+0] [FFC] children: not-inline
TextNode <#text> (not painted)
BlockContainer <(anonymous)> at [8,54] [0+0+0 784 0+0+0] [0+0+0 0 0+0+0] children: inline
TextNode <#text> (not painted)

ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x62]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x46]
PaintableWithLines (BlockContainer<DIV>.line) [8,8 784x23]
PaintableWithLines (BlockContainer<SPAN>.box.block) [28,8 20x23]
PaintableWithLines (BlockContainer(anonymous)) [8,31 784x0]
PaintableWithLines (BlockContainer<DIV>.line) [8,31 784x23]
Paintable (Box<SPAN>.box.flex) [28,31 20x23]
PaintableWithLines (BlockContainer(anonymous)) [8,54 784x0]

SC for Viewport<#document> [0,0 800x600] (z-index: auto)
SC for BlockContainer<HTML> [0,0 800x62] (z-index: auto)
67 changes: 67 additions & 0 deletions Tests/LibWeb/Layout/expected/vertical-align-line-relative-subtrees.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
Viewport <#document> at [0,0] [0+0+0 800 0+0+0] [0+0+0 600 0+0+0] [BFC] children: not-inline
BlockContainer <html> at [0,0] [0+0+0 800 0+0+0] [0+0+0 372 0+0+0] [BFC] children: not-inline
BlockContainer <body> at [0,0] [0+0+0 800 0+0+0] [0+0+0 372 0+0+0] children: not-inline
BlockContainer <div.line> at [0,0] [0+0+0 800 0+0+0] [0+0+0 44 0+0+0] children: inline
frag 0 from TextNode start: 0, length: 1, rect: [0,0 20x20] baseline: 16
"A"
frag 1 from TextNode start: 0, length: 1, rect: [80,0 20x20] baseline: 16
"D"
TextNode <#text> (not painted)
InlineNode <span.subtree> at [20,24] [0+0+0 60 0+0+0] [0+0+0 40 0+0+0]
frag 0 from TextNode start: 0, length: 1, rect: [20,24 20x20] baseline: 16
"B"
frag 1 from BlockContainer start: 0, length: 0, rect: [40,0 20x40] baseline: 40
frag 2 from TextNode start: 0, length: 1, rect: [60,24 20x20] baseline: 16
"C"
TextNode <#text> (not painted)
BlockContainer <span.sub-atomic> at [40,0] inline-block [0+0+0 20 0+0+0] [0+0+0 40 0+0+0] [BFC] children: not-inline
TextNode <#text> (not painted)
TextNode <#text> (not painted)
BlockContainer <(anonymous)> at [0,44] [0+0+0 800 0+0+0] [0+0+0 0 0+0+0] children: inline
TextNode <#text> (not painted)
BlockContainer <div.line> at [0,44] [0+0+0 800 0+0+0] [0+0+0 64 0+0+0] children: inline
frag 0 from BlockContainer start: 0, length: 0, rect: [0,44 20x60] baseline: 60
frag 1 from BlockContainer start: 0, length: 0, rect: [20,83 20x25] baseline: 25
BlockContainer <span.tall> at [0,44] inline-block [0+0+0 20 0+0+0] [0+0+0 60 0+0+0] [BFC] children: not-inline
BlockContainer <span.bottom> at [20,83] inline-block [0+0+0 20 0+0+0] [0+0+0 25 0+0+0] [BFC] children: not-inline
BlockContainer <(anonymous)> at [0,108] [0+0+0 800 0+0+0] [0+0+0 0 0+0+0] children: inline
TextNode <#text> (not painted)
BlockContainer <div.line.subtree> at [0,108] [0+0+0 800 0+0+0] [0+0+0 64 0+0+0] children: inline
frag 0 from TextNode start: 0, length: 1, rect: [0,152 20x20] baseline: 16
"A"
frag 1 from BlockContainer start: 0, length: 0, rect: [20,108 20x60] baseline: 60
TextNode <#text> (not painted)
BlockContainer <span.tall> at [20,108] inline-block [0+0+0 20 0+0+0] [0+0+0 60 0+0+0] [BFC] children: not-inline
BlockContainer <(anonymous)> at [0,172] [0+0+0 800 0+0+0] [0+0+0 0 0+0+0] children: inline
TextNode <#text> (not painted)
BlockContainer <div.vertical> at [0,172] [0+0+0 800 0+0+0] [0+0+0 200 0+0+0] children: inline
InlineNode <span.middle> at [758,172] [0+0+0 40 0+0+0] [0+0+0 30 0+0+0]
frag 0 from TextNode start: 0, length: 1, rect: [758,172 20x20] baseline: 16
"x"
frag 1 from BlockContainer start: 0, length: 0, rect: [760,192 40x10] baseline: 0
TextNode <#text> (not painted)
BlockContainer <span.vertical-top> at [760,192] inline-block [0+0+0 10 0+0+0] [0+0+0 40 0+0+0] [BFC] children: not-inline
BlockContainer <(anonymous)> at [0,372] [0+0+0 800 0+0+0] [0+0+0 0 0+0+0] children: inline
TextNode <#text> (not painted)

ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x372]
PaintableWithLines (BlockContainer<BODY>) [0,0 800x372]
PaintableWithLines (BlockContainer<DIV>.line) [0,0 800x44]
InlinePaintable (InlineNode<SPAN>.subtree) [20,24 60x40]
PaintableWithLines (BlockContainer<SPAN>.sub-atomic) [40,0 20x40]
PaintableWithLines (BlockContainer(anonymous)) [0,44 800x0]
PaintableWithLines (BlockContainer<DIV>.line) [0,44 800x64]
PaintableWithLines (BlockContainer<SPAN>.tall) [0,44 20x60]
PaintableWithLines (BlockContainer<SPAN>.bottom) [20,83 20x25]
PaintableWithLines (BlockContainer(anonymous)) [0,108 800x0]
PaintableWithLines (BlockContainer<DIV>.line.subtree) [0,108 800x64]
PaintableWithLines (BlockContainer<SPAN>.tall) [20,108 20x60]
PaintableWithLines (BlockContainer(anonymous)) [0,172 800x0]
PaintableWithLines (BlockContainer<DIV>.vertical) [0,172 800x200]
InlinePaintable (InlineNode<SPAN>.middle) [758,172 40x30]
PaintableWithLines (BlockContainer<SPAN>.vertical-top) [760,192 10x40]
PaintableWithLines (BlockContainer(anonymous)) [0,372 800x0]

SC for Viewport<#document> [0,0 800x600] (z-index: auto)
SC for BlockContainer<HTML> [0,0 800x372] (z-index: auto)
43 changes: 43 additions & 0 deletions Tests/LibWeb/Layout/expected/vertical-align-text-top-bottom.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
Viewport <#document> at [0,0] [0+0+0 800 0+0+0] [0+0+0 600 0+0+0] [BFC] children: not-inline
BlockContainer <html> at [0,0] [0+0+0 800 0+0+0] [0+0+0 94 0+0+0] [BFC] children: not-inline
BlockContainer <body> at [0,0] [0+0+0 800 0+0+0] [0+0+0 94 0+0+0] children: not-inline
BlockContainer <div.line> at [0,0] [0+0+0 800 0+0+0] [0+0+0 40 0+0+0] children: inline
frag 0 from TextNode start: 0, length: 1, rect: [0,10 20x20] baseline: 16
"A"
frag 1 from BlockContainer start: 0, length: 0, rect: [20,10 20x10] baseline: 20
frag 2 from BlockContainer start: 0, length: 0, rect: [40,20 20x10] baseline: 6
TextNode <#text> (not painted)
BlockContainer <span.box.text-top> at [20,10] inline-block [0+0+0 20 0+0+0] [0+0+0 10 0+0+0] [BFC] children: not-inline
BlockContainer <span.box.text-bottom> at [40,20] inline-block [0+0+0 20 0+0+0] [0+0+0 10 0+0+0] [BFC] children: not-inline
BlockContainer <(anonymous)> at [0,40] [0+0+0 800 0+0+0] [0+0+0 0 0+0+0] children: inline
TextNode <#text> (not painted)
BlockContainer <div.line> at [0,40] [0+0+0 800 0+0+0] [0+0+0 54 0+0+0] children: inline
frag 0 from TextNode start: 0, length: 1, rect: [0,64 20x20] baseline: 16
"A"
TextNode <#text> (not painted)
InlineNode <span.parent> at [20,48] [0+0+0 80 0+0+0] [0+0+0 40 0+0+0]
frag 0 from TextNode start: 0, length: 1, rect: [20,48 40x40] baseline: 32
"B"
frag 1 from BlockContainer start: 0, length: 0, rect: [60,48 20x10] baseline: 40
frag 2 from BlockContainer start: 0, length: 0, rect: [80,78 20x10] baseline: 6
TextNode <#text> (not painted)
BlockContainer <span.box.text-top> at [60,48] inline-block [0+0+0 20 0+0+0] [0+0+0 10 0+0+0] [BFC] children: not-inline
BlockContainer <span.box.text-bottom> at [80,78] inline-block [0+0+0 20 0+0+0] [0+0+0 10 0+0+0] [BFC] children: not-inline
BlockContainer <(anonymous)> at [0,94] [0+0+0 800 0+0+0] [0+0+0 0 0+0+0] children: inline
TextNode <#text> (not painted)

ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x94]
PaintableWithLines (BlockContainer<BODY>) [0,0 800x94]
PaintableWithLines (BlockContainer<DIV>.line) [0,0 800x40]
PaintableWithLines (BlockContainer<SPAN>.box.text-top) [20,10 20x10]
PaintableWithLines (BlockContainer<SPAN>.box.text-bottom) [40,20 20x10]
PaintableWithLines (BlockContainer(anonymous)) [0,40 800x0]
PaintableWithLines (BlockContainer<DIV>.line) [0,40 800x54]
InlinePaintable (InlineNode<SPAN>.parent) [20,48 80x40]
PaintableWithLines (BlockContainer<SPAN>.box.text-top) [60,48 20x10]
PaintableWithLines (BlockContainer<SPAN>.box.text-bottom) [80,78 20x10]
PaintableWithLines (BlockContainer(anonymous)) [0,94 800x0]

SC for Viewport<#document> [0,0 800x600] (z-index: auto)
SC for BlockContainer<HTML> [0,0 800x94] (z-index: auto)
Loading