Files
ladybird/Tests/LibWeb/Layout/expected/block-and-inline/relpos-inline-element-js-offsets.txt
Andreas Kling b4e47f198a LibWeb: Implement time-traveling inheritance for CSS font-size
When setting `font-family: monospace;` in CSS, we have to interpret
the keyword font sizes (small, medium, large, etc) as slightly smaller
for historical reasons. Normally the medium font size is 16px, but
for monospace it's 13px.

The way this needs to behave is extremely strange:
When encountering `font-family: monospace`, we have to go back and
replay the CSS cascade as if the medium font size had been 13px all
along. Otherwise relative values like 2em/200%/etc could have gotten
lost in the inheritance chain.

We implement this in a fairly naive way by explicitly checking for
`font-family: monospace` (note: it has to be *exactly* like that,
it can't be `font-family: monospace, Courier` or similar.)
When encountered, we simply walk the element ancestors and re-run the
cascade for the font-size property. This is clumsy and inefficient,
but it does work for the common cases.

Other browsers do more elaborate things that we should eventually care
about as well, such as user-configurable font settings, per-language
behavior, etc. For now, this is just something that allows us to handle
more WPT tests where things fall apart due to unexpected font sizes.

To learn more about the wonders of font-size, see this blog post:
https://manishearth.github.io/blog/2017/08/10/font-size-an-unexpectedly-complex-css-property/
2025-02-25 23:55:36 +01:00

51 lines
2.5 KiB
Plaintext

Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x140 children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 784x17 children: inline
InlineNode <span>
frag 0 from TextNode start: 0, length: 5, rect: [8,8 36.40625x17] baseline: 13.296875
"well "
TextNode <#text>
InlineNode <b>
frag 0 from TextNode start: 0, length: 6, rect: [44.40625,33 44.84375x17] baseline: 13.296875
"hello "
TextNode <#text>
InlineNode <i>
frag 0 from TextNode start: 0, length: 7, rect: [89.25,58 55.359375x17] baseline: 13.296875
"friends"
TextNode <#text>
TextNode <#text>
BlockContainer <div> at (8,25) content-size 784x123 children: not-inline
BlockContainer <(anonymous)> at (8,25) content-size 784x68 children: inline
BreakNode <br>
BreakNode <br>
BreakNode <br>
BreakNode <br>
BlockContainer <pre#out> at (8,106) content-size 784x42 children: inline
frag 0 from TextNode start: 0, length: 10, rect: [8,106 58.640625x14] baseline: 10.890625
"well: 8, 8"
frag 1 from TextNode start: 11, length: 13, rect: [8,120 77.46875x14] baseline: 10.890625
"hello: 44, 33"
frag 2 from TextNode start: 25, length: 15, rect: [8,134 91.78125x14] baseline: 10.890625
"friends: 44, 25"
TextNode <#text>
BlockContainer <(anonymous)> at (8,161) content-size 784x0 children: inline
TextNode <#text>
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x140]
PaintableWithLines (BlockContainer(anonymous)) [8,8 784x17]
PaintableWithLines (InlineNode<SPAN>)
TextPaintable (TextNode<#text>)
PaintableWithLines (InlineNode<B>)
TextPaintable (TextNode<#text>)
PaintableWithLines (InlineNode<I>)
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>) [8,25 784x123]
PaintableWithLines (BlockContainer(anonymous)) [8,25 784x68]
PaintableWithLines (BlockContainer<PRE>#out) [8,106 784x42]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [8,161 784x0]