serenity
serenity copied to clipboard
SerenityOS
LibWeb: Empty inline elements get incorrect height
Reproduce:
<!DOCTYPE html><style>
* { border: 1px solid black; }
</style><div>aaaa</div><span></span>
Firefox:
Ladybird:
Layout & paint trees show that the span is there but has height 0:
Viewport <#document> at (0,0) content-size 913x912 [0+0+0 913 0+0+0] [0+0+0 912 0+0+0] children: not-inline
BlockContainer <html> at (1,1) content-size 911x41.791999 [0+1+0 911 0+1+0] [0+1+0 41.791999 0+1+0] [BFC] children: not-inline
BlockContainer <body> at (10,10) content-size 893x23.791999 [8+1+0 893 0+1+8] [8+1+0 23.791999 0+1+8] children: not-inline
BlockContainer <div> at (11,11) content-size 891x21.792 [0+1+0 891 0+1+0] [0+1+0 21.792 0+1+0] children: inline
line 0 width: 35.904003, height: 21.792, bottom: 21.792, baseline: 17.104
frag 0 from TextNode start: 0, length: 4, rect: [11,11 35.904003x21.791999]
"aaaa"
TextNode <#text>
BlockContainer <(anonymous)> at (10,33.792) content-size 893x0 [0+0+0 893 0+0+0] [0+0+0 0 0+0+0] children: inline
InlineNode <span>
PaintableWithLines (Viewport<#document>) [0,0 913x912]
PaintableWithLines (BlockContainer<HTML>) [0,0 913x43.791999]
PaintableWithLines (BlockContainer<BODY>) [9,9 895x25.791999]
PaintableWithLines (BlockContainer<DIV>) [10,10 893x23.792]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [10,33.792 893x0] << note the Y coordinate
InlinePaintable (InlineNode<SPAN>)
This can be reduced even further:
<!DOCTYPE html><span style="border: 1px solid red"></span>
On Firefox this gives a red line, which doesn't show on Ladybird:
So it seems that a span just gets a wrong height when it has no text.
Note that the inline element gets no height (takes no space) in FF/Chrome if it has no border.
<!DOCTYPE html><style>
div { border: 1px solid black; }
</style><div>aaaa</div><span></span><div>bbb
renders as
