RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-28 14:57:34 +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

200
Tests/LibWeb/Layout/expected/grid/borders.txt
View file

@ -1,163 +1,163 @@
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 784x428.28125 children: not-inline
Box <div.grid-container> at (8,8) content-size 784x74.9375 [GFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x425 children: not-inline
Box <div.grid-container> at (8,8) content-size 784x74 [GFC] children: not-inline
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (18,18) content-size 372x17.46875 [BFC] children: inline
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [18,18 6.34375x17.46875]
BlockContainer <div.grid-item> at (18,18) content-size 372x17 [BFC] children: inline
line 0 width: 6.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [18,18 6.34375x17]
"1"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (410,18) content-size 372x17.46875 [BFC] children: inline
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [410,18 8.8125x17.46875]
BlockContainer <div.grid-item> at (410,18) content-size 372x17 [BFC] children: inline
line 0 width: 8.8125, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [410,18 8.8125x17]
"2"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (18,55.46875) content-size 372x17.46875 [BFC] children: inline
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [18,55.46875 9.09375x17.46875]
BlockContainer <div.grid-item> at (18,55) content-size 372x17 [BFC] children: inline
line 0 width: 9.09375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [18,55 9.09375x17]
"3"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (410,55.46875) content-size 372x17.46875 [BFC] children: inline
line 0 width: 7.75, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [410,55.46875 7.75x17.46875]
BlockContainer <div.grid-item> at (410,55) content-size 372x17 [BFC] children: inline
line 0 width: 7.75, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [410,55 7.75x17]
"4"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,82.9375) content-size 784x0 children: inline
BlockContainer <(anonymous)> at (8,82) content-size 784x0 children: inline
TextNode <#text>
Box <div.grid-container> at (8,82.9375) content-size 784x107.46875 [GFC] children: not-inline
Box <div.grid-container> at (8,82) content-size 784x107 [GFC] children: not-inline
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (18,92.9375) content-size 372x50 [BFC] children: inline
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [18,92.9375 6.34375x17.46875]
BlockContainer <div.grid-item> at (18,92) content-size 372x50 [BFC] children: inline
line 0 width: 6.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [18,92 6.34375x17]
"1"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (410,92.9375) content-size 372x50 [BFC] children: inline
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [410,92.9375 8.8125x17.46875]
BlockContainer <div.grid-item> at (410,92) content-size 372x50 [BFC] children: inline
line 0 width: 8.8125, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [410,92 8.8125x17]
"2"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (18,162.9375) content-size 372x17.46875 [BFC] children: inline
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [18,162.9375 9.09375x17.46875]
BlockContainer <div.grid-item> at (18,162) content-size 372x17 [BFC] children: inline
line 0 width: 9.09375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [18,162 9.09375x17]
"3"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (410,162.9375) content-size 372x17.46875 [BFC] children: inline
line 0 width: 7.75, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [410,162.9375 7.75x17.46875]
BlockContainer <div.grid-item> at (410,162) content-size 372x17 [BFC] children: inline
line 0 width: 7.75, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [410,162 7.75x17]
"4"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,190.40625) content-size 784x0 children: inline
BlockContainer <(anonymous)> at (8,189) content-size 784x0 children: inline
TextNode <#text>
Box <div.grid-container> at (8,190.40625) content-size 784x84.9375 [GFC] children: not-inline
Box <div.grid-container> at (8,189) content-size 784x84 [GFC] children: not-inline
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (18,200.40625) content-size 347x17.46875 [BFC] children: inline
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [18,200.40625 6.34375x17.46875]
BlockContainer <div.grid-item> at (18,199) content-size 347x17 [BFC] children: inline
line 0 width: 6.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [18,199 6.34375x17]
"1"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (435,200.40625) content-size 347x17.46875 [BFC] children: inline
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [435,200.40625 8.8125x17.46875]
BlockContainer <div.grid-item> at (435,199) content-size 347x17 [BFC] children: inline
line 0 width: 8.8125, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [435,199 8.8125x17]
"2"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (18,247.875) content-size 347x17.46875 [BFC] children: inline
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [18,247.875 9.09375x17.46875]
BlockContainer <div.grid-item> at (18,246) content-size 347x17 [BFC] children: inline
line 0 width: 9.09375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [18,246 9.09375x17]
"3"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (435,247.875) content-size 347x17.46875 [BFC] children: inline
line 0 width: 7.75, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [435,247.875 7.75x17.46875]
BlockContainer <div.grid-item> at (435,246) content-size 347x17 [BFC] children: inline
line 0 width: 7.75, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [435,246 7.75x17]
"4"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,275.34375) content-size 784x0 children: inline
BlockContainer <(anonymous)> at (8,273) content-size 784x0 children: inline
TextNode <#text>
Box <div.grid-container> at (8,275.34375) content-size 784x90.9375 [GFC] children: not-inline
Box <div.grid-container> at (8,273) content-size 784x90 [GFC] children: not-inline
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (444.203125,285.34375) content-size 337.796875x17.46875 [BFC] children: inline
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [444.203125,285.34375 6.34375x17.46875]
BlockContainer <div.grid-item> at (444.203125,283) content-size 337.796875x17 [BFC] children: inline
line 0 width: 6.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [444.203125,283 6.34375x17]
"1"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (18,338.8125) content-size 337.796875x17.46875 [BFC] children: inline
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [18,338.8125 8.8125x17.46875]
BlockContainer <div.grid-item> at (18,336) content-size 337.796875x17 [BFC] children: inline
line 0 width: 8.8125, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [18,336 8.8125x17]
"2"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,366.28125) content-size 784x0 children: inline
BlockContainer <(anonymous)> at (8,363) content-size 784x0 children: inline
TextNode <#text>
Box <div.grid-container> at (8,366.28125) content-size 784x50 [GFC] children: not-inline
Box <div.grid-container> at (8,363) content-size 784x50 [GFC] children: not-inline
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (18,376.28125) content-size 280x5 [BFC] children: inline
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [18,376.28125 6.34375x17.46875]
BlockContainer <div.grid-item> at (18,373) content-size 280x5 [BFC] children: inline
line 0 width: 6.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [18,373 6.34375x17]
"1"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (318,376.28125) content-size 280x5 [BFC] children: inline
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [318,376.28125 8.8125x17.46875]
BlockContainer <div.grid-item> at (318,373) content-size 280x5 [BFC] children: inline
line 0 width: 8.8125, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [318,373 8.8125x17]
"2"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (18,401.28125) content-size 280x5 [BFC] children: inline
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [18,401.28125 8.8125x17.46875]
BlockContainer <div.grid-item> at (18,398) content-size 280x5 [BFC] children: inline
line 0 width: 8.8125, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [18,398 8.8125x17]
"2"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (318,401.28125) content-size 280x5 [BFC] children: inline
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [318,401.28125 8.8125x17.46875]
BlockContainer <div.grid-item> at (318,398) content-size 280x5 [BFC] children: inline
line 0 width: 8.8125, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [318,398 8.8125x17]
"2"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,416.28125) content-size 784x0 children: inline
BlockContainer <(anonymous)> at (8,413) content-size 784x0 children: inline
TextNode <#text>
Box <div.grid-container> at (8,416.28125) content-size 784x20 [GFC] children: not-inline
Box <div.grid-container> at (8,413) content-size 784x20 [GFC] children: not-inline
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <div.grid-item> at (18,426.28125) content-size 764x0 [BFC] children: inline
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [18,426.28125 6.34375x17.46875]
BlockContainer <div.grid-item> at (18,423) content-size 764x0 [BFC] children: inline
line 0 width: 6.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [18,423 6.34375x17]
"1"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
@ -165,53 +165,53 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x428.28125] overflow: [8,8 784x435.75]
PaintableBox (Box<DIV>.grid-container) [8,8 784x74.9375]
PaintableWithLines (BlockContainer<DIV>.grid-item) [8,8 392x37.46875]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x425] overflow: [8,8 784x432]
PaintableBox (Box<DIV>.grid-container) [8,8 784x74]
PaintableWithLines (BlockContainer<DIV>.grid-item) [8,8 392x37]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>.grid-item) [400,8 392x37.46875]
PaintableWithLines (BlockContainer<DIV>.grid-item) [400,8 392x37]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>.grid-item) [8,45.46875 392x37.46875]
PaintableWithLines (BlockContainer<DIV>.grid-item) [8,45 392x37]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>.grid-item) [400,45.46875 392x37.46875]
PaintableWithLines (BlockContainer<DIV>.grid-item) [400,45 392x37]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [8,82.9375 784x0]
PaintableBox (Box<DIV>.grid-container) [8,82.9375 784x107.46875]
PaintableWithLines (BlockContainer<DIV>.grid-item) [8,82.9375 392x70]
PaintableWithLines (BlockContainer(anonymous)) [8,82 784x0]
PaintableBox (Box<DIV>.grid-container) [8,82 784x107]
PaintableWithLines (BlockContainer<DIV>.grid-item) [8,82 392x70]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>.grid-item) [400,82.9375 392x70]
PaintableWithLines (BlockContainer<DIV>.grid-item) [400,82 392x70]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>.grid-item) [8,152.9375 392x37.46875]
PaintableWithLines (BlockContainer<DIV>.grid-item) [8,152 392x37]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>.grid-item) [400,152.9375 392x37.46875]
PaintableWithLines (BlockContainer<DIV>.grid-item) [400,152 392x37]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [8,190.40625 784x0]
PaintableBox (Box<DIV>.grid-container) [8,190.40625 784x84.9375]
PaintableWithLines (BlockContainer<DIV>.grid-item) [8,190.40625 367x37.46875]
PaintableWithLines (BlockContainer(anonymous)) [8,189 784x0]
PaintableBox (Box<DIV>.grid-container) [8,189 784x84]
PaintableWithLines (BlockContainer<DIV>.grid-item) [8,189 367x37]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>.grid-item) [425,190.40625 367x37.46875]
PaintableWithLines (BlockContainer<DIV>.grid-item) [425,189 367x37]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>.grid-item) [8,237.875 367x37.46875]
PaintableWithLines (BlockContainer<DIV>.grid-item) [8,236 367x37]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>.grid-item) [425,237.875 367x37.46875]
PaintableWithLines (BlockContainer<DIV>.grid-item) [425,236 367x37]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [8,275.34375 784x0]
PaintableBox (Box<DIV>.grid-container) [8,275.34375 784x90.9375]
PaintableWithLines (BlockContainer<DIV>.grid-item) [434.203125,275.34375 357.796875x37.46875]
PaintableWithLines (BlockContainer(anonymous)) [8,273 784x0]
PaintableBox (Box<DIV>.grid-container) [8,273 784x90]
PaintableWithLines (BlockContainer<DIV>.grid-item) [434.203125,273 357.796875x37]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>.grid-item) [8,328.8125 357.796875x37.46875]
PaintableWithLines (BlockContainer<DIV>.grid-item) [8,326 357.796875x37]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [8,366.28125 784x0]
PaintableBox (Box<DIV>.grid-container) [8,366.28125 784x50] overflow: [8,366.28125 784x52.46875]
PaintableWithLines (BlockContainer<DIV>.grid-item) [8,366.28125 300x25] overflow: [18,376.28125 280x17.46875]
PaintableWithLines (BlockContainer(anonymous)) [8,363 784x0]
PaintableBox (Box<DIV>.grid-container) [8,363 784x50] overflow: [8,363 784x52]
PaintableWithLines (BlockContainer<DIV>.grid-item) [8,363 300x25] overflow: [18,373 280x17]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>.grid-item) [308,366.28125 300x25] overflow: [318,376.28125 280x17.46875]
PaintableWithLines (BlockContainer<DIV>.grid-item) [308,363 300x25] overflow: [318,373 280x17]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>.grid-item) [8,391.28125 300x25] overflow: [18,401.28125 280x17.46875]
PaintableWithLines (BlockContainer<DIV>.grid-item) [8,388 300x25] overflow: [18,398 280x17]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>.grid-item) [308,391.28125 300x25] overflow: [318,401.28125 280x17.46875]
PaintableWithLines (BlockContainer<DIV>.grid-item) [308,388 300x25] overflow: [318,398 280x17]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [8,416.28125 784x0]
PaintableBox (Box<DIV>.grid-container) [8,416.28125 784x20] overflow: [8,416.28125 784x27.46875]
PaintableWithLines (BlockContainer<DIV>.grid-item) [8,416.28125 784x20] overflow: [18,426.28125 6.34375x17.46875]
PaintableWithLines (BlockContainer(anonymous)) [8,413 784x0]
PaintableBox (Box<DIV>.grid-container) [8,413 784x20] overflow: [8,413 784x27]
PaintableWithLines (BlockContainer<DIV>.grid-item) [8,413 784x20] overflow: [18,423 6.34375x17]
TextPaintable (TextNode<#text>)