RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 19:27:35 +00:00
Code Issues Activity Actions

LibWeb: Bring CSS line-height closer to other engines

Browse source 
This patch makes a few changes to the way we calculate line-height:

- `line-height: normal` is now resolved using metrics from the used
  font (specifically, round(A + D + lineGap)).

- `line-height: calc(...)` is now resolved at style compute time.

- `line-height` values are now absolutized at style compute time.

As a consequence of the above, we no longer need to walk the DOM
ancestor chain looking for line-heights during style computation.
Instead, values are inherited, resolved and absolutized locally.

This is not only much faster, but also makes our line-height metrics
match those of other engines like Gecko and Blink.
This commit is contained in:
Andreas Kling 2024-01-12 12:39:40 +01:00
parent f0722671c3
commit e7de5cb4d2
385 changed files with 6889 additions and 6893 deletions
Download patch file Download diff file Expand all files Collapse all files

132
Tests/LibWeb/Layout/expected/css-quotes-nesting.txt
View file

@ -1,25 +1,25 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x68.40625 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x52.40625 children: not-inline
BlockContainer <div.a> at (8,8) content-size 784x17.46875 children: inline
line 0 width: 72.140625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [8,8 9.34375x17.46875]
BlockContainer <html> at (0,0) content-size 800x67 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x51 children: not-inline
BlockContainer <div.a> at (8,8) content-size 784x17 children: inline
line 0 width: 72.140625, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [8,8 9.34375x17]
"a"
frag 1 from TextNode start: 0, length: 1, rect: [17,8 9.46875x17.46875]
frag 1 from TextNode start: 0, length: 1, rect: [17,8 9.46875x17]
"b"
frag 2 from TextNode start: 0, length: 1, rect: [27,8 8.890625x17.46875]
frag 2 from TextNode start: 0, length: 1, rect: [27,8 8.890625x17]
"c"
frag 3 from TextNode start: 0, length: 1, rect: [36,8 7.859375x17.46875]
frag 3 from TextNode start: 0, length: 1, rect: [36,8 7.859375x17]
"d"
frag 4 from TextNode start: 0, length: 1, rect: [44,8 8.71875x17.46875]
frag 4 from TextNode start: 0, length: 1, rect: [44,8 8.71875x17]
"e"
frag 5 from TextNode start: 0, length: 1, rect: [52,8 6.4375x17.46875]
frag 5 from TextNode start: 0, length: 1, rect: [52,8 6.4375x17]
"f"
frag 6 from TextNode start: 0, length: 1, rect: [59,8 7.5625x17.46875]
frag 6 from TextNode start: 0, length: 1, rect: [59,8 7.5625x17]
"g"
frag 7 from TextNode start: 0, length: 1, rect: [66,8 9.296875x17.46875]
frag 7 from TextNode start: 0, length: 1, rect: [66,8 9.296875x17]
"h"
frag 8 from TextNode start: 0, length: 1, rect: [76,8 4.5625x17.46875]
frag 8 from TextNode start: 0, length: 1, rect: [76,8 4.5625x17]
"i"
InlineNode <span>
InlineNode <(anonymous)>
@ -55,47 +55,47 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
TextNode <#text>
InlineNode <(anonymous)>
TextNode <#text>
BlockContainer <(anonymous)> at (8,25.46875) content-size 784x0 children: inline
BlockContainer <(anonymous)> at (8,25) content-size 784x0 children: inline
TextNode <#text>
BlockContainer <div.b> at (8,25.46875) content-size 784x17.46875 children: inline
line 0 width: 130.578125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 3, rect: [8,25.46875 5.84375x17.46875]
BlockContainer <div.b> at (8,25) content-size 784x17 children: inline
line 0 width: 130.578125, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 3, rect: [8,25 5.84375x17]
"“"
frag 1 from TextNode start: 0, length: 1, rect: [14,25.46875 9.34375x17.46875]
frag 1 from TextNode start: 0, length: 1, rect: [14,25 9.34375x17]
"a"
frag 2 from TextNode start: 0, length: 3, rect: [23,25.46875 5.84375x17.46875]
frag 2 from TextNode start: 0, length: 3, rect: [23,25 5.84375x17]
"‘"
frag 3 from TextNode start: 0, length: 1, rect: [29,25.46875 9.46875x17.46875]
frag 3 from TextNode start: 0, length: 1, rect: [29,25 9.46875x17]
"b"
frag 4 from TextNode start: 0, length: 3, rect: [39,25.46875 5.84375x17.46875]
frag 4 from TextNode start: 0, length: 3, rect: [39,25 5.84375x17]
"‘"
frag 5 from TextNode start: 0, length: 1, rect: [44,25.46875 8.890625x17.46875]
frag 5 from TextNode start: 0, length: 1, rect: [44,25 8.890625x17]
"c"
frag 6 from TextNode start: 0, length: 3, rect: [53,25.46875 5.84375x17.46875]
frag 6 from TextNode start: 0, length: 3, rect: [53,25 5.84375x17]
"‘"
frag 7 from TextNode start: 0, length: 1, rect: [59,25.46875 7.859375x17.46875]
frag 7 from TextNode start: 0, length: 1, rect: [59,25 7.859375x17]
"d"
frag 8 from TextNode start: 0, length: 3, rect: [67,25.46875 5.84375x17.46875]
frag 8 from TextNode start: 0, length: 3, rect: [67,25 5.84375x17]
"‘"
frag 9 from TextNode start: 0, length: 1, rect: [73,25.46875 8.71875x17.46875]
frag 9 from TextNode start: 0, length: 1, rect: [73,25 8.71875x17]
"e"
frag 10 from TextNode start: 0, length: 3, rect: [82,25.46875 5.84375x17.46875]
frag 10 from TextNode start: 0, length: 3, rect: [82,25 5.84375x17]
"’"
frag 11 from TextNode start: 0, length: 1, rect: [87,25.46875 6.4375x17.46875]
frag 11 from TextNode start: 0, length: 1, rect: [87,25 6.4375x17]
"f"
frag 12 from TextNode start: 0, length: 3, rect: [94,25.46875 5.84375x17.46875]
frag 12 from TextNode start: 0, length: 3, rect: [94,25 5.84375x17]
"’"
frag 13 from TextNode start: 0, length: 1, rect: [100,25.46875 7.5625x17.46875]
frag 13 from TextNode start: 0, length: 1, rect: [100,25 7.5625x17]
"g"
frag 14 from TextNode start: 0, length: 3, rect: [107,25.46875 5.84375x17.46875]
frag 14 from TextNode start: 0, length: 3, rect: [107,25 5.84375x17]
"’"
frag 15 from TextNode start: 0, length: 1, rect: [113,25.46875 9.296875x17.46875]
frag 15 from TextNode start: 0, length: 1, rect: [113,25 9.296875x17]
"h"
frag 16 from TextNode start: 0, length: 3, rect: [122,25.46875 5.84375x17.46875]
frag 16 from TextNode start: 0, length: 3, rect: [122,25 5.84375x17]
"’"
frag 17 from TextNode start: 0, length: 1, rect: [128,25.46875 4.5625x17.46875]
frag 17 from TextNode start: 0, length: 1, rect: [128,25 4.5625x17]
"i"
frag 18 from TextNode start: 0, length: 3, rect: [133,25.46875 5.84375x17.46875]
frag 18 from TextNode start: 0, length: 3, rect: [133,25 5.84375x17]
"”"
InlineNode <span>
InlineNode <(anonymous)>
@ -131,47 +131,47 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
TextNode <#text>
InlineNode <(anonymous)>
TextNode <#text>
BlockContainer <(anonymous)> at (8,42.9375) content-size 784x0 children: inline
BlockContainer <(anonymous)> at (8,42) content-size 784x0 children: inline
TextNode <#text>
BlockContainer <div.c> at (8,42.9375) content-size 784x17.46875 children: inline
line 0 width: 140.234375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [8,42.9375 5.484375x17.46875]
BlockContainer <div.c> at (8,42) content-size 784x17 children: inline
line 0 width: 140.234375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [8,42 5.484375x17]
"("
frag 1 from TextNode start: 0, length: 1, rect: [13,42.9375 9.34375x17.46875]
frag 1 from TextNode start: 0, length: 1, rect: [13,42 9.34375x17]
"a"
frag 2 from TextNode start: 0, length: 1, rect: [23,42.9375 7.625x17.46875]
frag 2 from TextNode start: 0, length: 1, rect: [23,42 7.625x17]
"{"
frag 3 from TextNode start: 0, length: 1, rect: [30,42.9375 9.46875x17.46875]
frag 3 from TextNode start: 0, length: 1, rect: [30,42 9.46875x17]
"b"
frag 4 from TextNode start: 0, length: 1, rect: [40,42.9375 6.953125x17.46875]
frag 4 from TextNode start: 0, length: 1, rect: [40,42 6.953125x17]
"["
frag 5 from TextNode start: 0, length: 1, rect: [47,42.9375 8.890625x17.46875]
frag 5 from TextNode start: 0, length: 1, rect: [47,42 8.890625x17]
"c"
frag 6 from TextNode start: 0, length: 1, rect: [56,42.9375 6.953125x17.46875]
frag 6 from TextNode start: 0, length: 1, rect: [56,42 6.953125x17]
"["
frag 7 from TextNode start: 0, length: 1, rect: [63,42.9375 7.859375x17.46875]
frag 7 from TextNode start: 0, length: 1, rect: [63,42 7.859375x17]
"d"
frag 8 from TextNode start: 0, length: 1, rect: [71,42.9375 6.953125x17.46875]
frag 8 from TextNode start: 0, length: 1, rect: [71,42 6.953125x17]
"["
frag 9 from TextNode start: 0, length: 1, rect: [78,42.9375 8.71875x17.46875]
frag 9 from TextNode start: 0, length: 1, rect: [78,42 8.71875x17]
"e"
frag 10 from TextNode start: 0, length: 1, rect: [86,42.9375 7.21875x17.46875]
frag 10 from TextNode start: 0, length: 1, rect: [86,42 7.21875x17]
"]"
frag 11 from TextNode start: 0, length: 1, rect: [93,42.9375 6.4375x17.46875]
frag 11 from TextNode start: 0, length: 1, rect: [93,42 6.4375x17]
"f"
frag 12 from TextNode start: 0, length: 1, rect: [100,42.9375 7.21875x17.46875]
frag 12 from TextNode start: 0, length: 1, rect: [100,42 7.21875x17]
"]"
frag 13 from TextNode start: 0, length: 1, rect: [107,42.9375 7.5625x17.46875]
frag 13 from TextNode start: 0, length: 1, rect: [107,42 7.5625x17]
"g"
frag 14 from TextNode start: 0, length: 1, rect: [115,42.9375 7.21875x17.46875]
frag 14 from TextNode start: 0, length: 1, rect: [115,42 7.21875x17]
"]"
frag 15 from TextNode start: 0, length: 1, rect: [122,42.9375 9.296875x17.46875]
frag 15 from TextNode start: 0, length: 1, rect: [122,42 9.296875x17]
"h"
frag 16 from TextNode start: 0, length: 1, rect: [131,42.9375 7.65625x17.46875]
frag 16 from TextNode start: 0, length: 1, rect: [131,42 7.65625x17]
"}"
frag 17 from TextNode start: 0, length: 1, rect: [139,42.9375 4.5625x17.46875]
frag 17 from TextNode start: 0, length: 1, rect: [139,42 4.5625x17]
"i"
frag 18 from TextNode start: 0, length: 1, rect: [143,42.9375 4.8125x17.46875]
frag 18 from TextNode start: 0, length: 1, rect: [143,42 4.8125x17]
")"
InlineNode <span>
InlineNode <(anonymous)>
@ -207,13 +207,13 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
TextNode <#text>
InlineNode <(anonymous)>
TextNode <#text>
BlockContainer <(anonymous)> at (8,60.40625) content-size 784x0 children: inline
BlockContainer <(anonymous)> at (8,59) content-size 784x0 children: inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x68.40625]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x52.40625]
PaintableWithLines (BlockContainer<DIV>.a) [8,8 784x17.46875]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x67]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x51]
PaintableWithLines (BlockContainer<DIV>.a) [8,8 784x17]
InlinePaintable (InlineNode<SPAN>)
InlinePaintable (InlineNode(anonymous))
TextPaintable (TextNode<#text>)
@ -238,8 +238,8 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
InlinePaintable (InlineNode(anonymous))
TextPaintable (TextNode<#text>)
InlinePaintable (InlineNode(anonymous))
PaintableWithLines (BlockContainer(anonymous)) [8,25.46875 784x0]
PaintableWithLines (BlockContainer<DIV>.b) [8,25.46875 784x17.46875]
PaintableWithLines (BlockContainer(anonymous)) [8,25 784x0]
PaintableWithLines (BlockContainer<DIV>.b) [8,25 784x17]
InlinePaintable (InlineNode<SPAN>)
InlinePaintable (InlineNode(anonymous))
TextPaintable (TextNode<#text>)
@ -274,8 +274,8 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
TextPaintable (TextNode<#text>)
InlinePaintable (InlineNode(anonymous))
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [8,42.9375 784x0]
PaintableWithLines (BlockContainer<DIV>.c) [8,42.9375 784x17.46875]
PaintableWithLines (BlockContainer(anonymous)) [8,42 784x0]
PaintableWithLines (BlockContainer<DIV>.c) [8,42 784x17]
InlinePaintable (InlineNode<SPAN>)
InlinePaintable (InlineNode(anonymous))
TextPaintable (TextNode<#text>)
@ -310,4 +310,4 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
TextPaintable (TextNode<#text>)
InlinePaintable (InlineNode(anonymous))
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [8,60.40625 784x0]
PaintableWithLines (BlockContainer(anonymous)) [8,59 784x0]