mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 19:27:35 +00:00
LibWeb: Bring CSS line-height
closer to other engines
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:
parent
f0722671c3
commit
e7de5cb4d2
385 changed files with 6889 additions and 6893 deletions
|
@ -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]
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue