1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-28 03:37: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:
Andreas Kling 2024-01-12 12:39:40 +01:00
parent f0722671c3
commit e7de5cb4d2
385 changed files with 6889 additions and 6893 deletions

View file

@ -1,146 +1,146 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x215.34375 [BFC] children: not-inline
BlockContainer <html> at (0,0) content-size 800x213 [BFC] children: not-inline
BlockContainer <(anonymous)> at (0,0) content-size 800x0 children: inline
TextNode <#text>
BlockContainer <body> at (8,8) content-size 784x199.34375 children: not-inline
BlockContainer <body> at (8,8) content-size 784x197 children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
TextNode <#text>
BlockContainer <div.horizontal> at (8,8) content-size 784x199.34375 children: inline
line 0 width: 163.90625, height: 199.34375, bottom: 199.34375, baseline: 193.40625
frag 0 from BlockContainer start: 0, length: 0, rect: [9,9 161.90625x197.34375]
BlockContainer <div.horizontal> at (8,8) content-size 784x197 children: inline
line 0 width: 163.90625, height: 197, bottom: 197, baseline: 191.296875
frag 0 from BlockContainer start: 0, length: 0, rect: [9,9 161.90625x195]
TextNode <#text>
BlockContainer <table> at (9,9) content-size 161.90625x197.34375 inline-block [BFC] children: not-inline
BlockContainer <table> at (9,9) content-size 161.90625x195 inline-block [BFC] children: not-inline
BlockContainer <(anonymous)> at (9,9) content-size 161.90625x0 children: inline
TextNode <#text>
TableWrapper <(anonymous)> at (9,9) content-size 161.90625x197.34375 inline-block [BFC] children: not-inline
Box <(anonymous)> at (9,9) content-size 161.90625x197.34375 inline-table table-box [TFC] children: not-inline
Box <tbody> at (9,9) content-size 161.90625x197.34375 table-row-group children: not-inline
TableWrapper <(anonymous)> at (9,9) content-size 161.90625x195 inline-block [BFC] children: not-inline
Box <(anonymous)> at (9,9) content-size 161.90625x195 inline-table table-box [TFC] children: not-inline
Box <tbody> at (9,9) content-size 161.90625x195 table-row-group children: not-inline
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
Box <tr> at (9,9) content-size 161.90625x39.46875 table-row children: not-inline
Box <tr> at (9,9) content-size 161.90625x39 table-row children: not-inline
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <td> at (30,20) content-size 14.265625x17.46875 table-cell [BFC] children: inline
line 0 width: 14.265625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [30,20 14.265625x17.46875]
BlockContainer <td> at (30,20) content-size 14.265625x17 table-cell [BFC] children: inline
line 0 width: 14.265625, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [30,20 14.265625x17]
"A"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <td> at (86.265625,20) content-size 12.546875x17.46875 table-cell [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [88.265625,20 9.34375x17.46875]
BlockContainer <td> at (86.265625,20) content-size 12.546875x17 table-cell [BFC] children: inline
line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [88.265625,20 9.34375x17]
"B"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <td> at (140.8125,20) content-size 9.09375x17.46875 table-cell [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: [141.8125,20 6.34375x17.46875]
BlockContainer <td> at (140.8125,20) content-size 9.09375x17 table-cell [BFC] children: inline
line 0 width: 6.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [141.8125,20 6.34375x17]
"1"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
Box <tr> at (9,48.46875) content-size 161.90625x39.46875 table-row children: not-inline
Box <tr> at (9,48) content-size 161.90625x39 table-row children: not-inline
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <td> at (30,59.46875) content-size 14.265625x17.46875 table-cell [BFC] children: inline
line 0 width: 10.3125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [32,59.46875 10.3125x17.46875]
BlockContainer <td> at (30,59) content-size 14.265625x17 table-cell [BFC] children: inline
line 0 width: 10.3125, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [32,59 10.3125x17]
"C"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <td> at (86.265625,59.46875) content-size 12.546875x17.46875 table-cell [BFC] children: inline
line 0 width: 11.140625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [87.265625,59.46875 11.140625x17.46875]
BlockContainer <td> at (86.265625,59) content-size 12.546875x17 table-cell [BFC] children: inline
line 0 width: 11.140625, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [87.265625,59 11.140625x17]
"D"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <td> at (140.8125,59.46875) content-size 9.09375x17.46875 table-cell [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: [140.8125,59.46875 8.8125x17.46875]
BlockContainer <td> at (140.8125,59) content-size 9.09375x17 table-cell [BFC] children: inline
line 0 width: 8.8125, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [140.8125,59 8.8125x17]
"2"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
Box <tr> at (9,87.9375) content-size 161.90625x39.46875 table-row children: not-inline
Box <tr> at (9,87) content-size 161.90625x39 table-row children: not-inline
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <td> at (30,98.9375) content-size 14.265625x17.46875 table-cell [BFC] children: inline
line 0 width: 11.859375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [31,98.9375 11.859375x17.46875]
BlockContainer <td> at (30,98) content-size 14.265625x17 table-cell [BFC] children: inline
line 0 width: 11.859375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [31,98 11.859375x17]
"E"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <td> at (86.265625,98.9375) content-size 12.546875x17.46875 table-cell [BFC] children: inline
line 0 width: 12.546875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [86.265625,98.9375 12.546875x17.46875]
BlockContainer <td> at (86.265625,98) content-size 12.546875x17 table-cell [BFC] children: inline
line 0 width: 12.546875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [86.265625,98 12.546875x17]
"F"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <td> at (140.8125,98.9375) content-size 9.09375x17.46875 table-cell [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: [140.8125,98.9375 9.09375x17.46875]
BlockContainer <td> at (140.8125,98) content-size 9.09375x17 table-cell [BFC] children: inline
line 0 width: 9.09375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [140.8125,98 9.09375x17]
"3"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
Box <tr> at (9,127.40625) content-size 161.90625x39.46875 table-row children: not-inline
Box <tr> at (9,126) content-size 161.90625x39 table-row children: not-inline
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <td> at (30,138.40625) content-size 14.265625x17.46875 table-cell [BFC] children: inline
line 0 width: 13.234375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [31,138.40625 13.234375x17.46875]
BlockContainer <td> at (30,137) content-size 14.265625x17 table-cell [BFC] children: inline
line 0 width: 13.234375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [31,137 13.234375x17]
"G"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <td> at (86.265625,138.40625) content-size 12.546875x17.46875 table-cell [BFC] children: inline
line 0 width: 12.234375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [86.265625,138.40625 12.234375x17.46875]
BlockContainer <td> at (86.265625,137) content-size 12.546875x17 table-cell [BFC] children: inline
line 0 width: 12.234375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [86.265625,137 12.234375x17]
"H"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <td> at (140.8125,138.40625) content-size 9.09375x17.46875 table-cell [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: [141.8125,138.40625 7.75x17.46875]
BlockContainer <td> at (140.8125,137) content-size 9.09375x17 table-cell [BFC] children: inline
line 0 width: 7.75, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [141.8125,137 7.75x17]
"4"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
Box <tr> at (9,166.875) content-size 161.90625x39.46875 table-row children: not-inline
Box <tr> at (9,165) content-size 161.90625x39 table-row children: not-inline
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <td> at (30,177.875) content-size 14.265625x17.46875 table-cell [BFC] children: inline
line 0 width: 4.59375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [35,177.875 4.59375x17.46875]
BlockContainer <td> at (30,176) content-size 14.265625x17 table-cell [BFC] children: inline
line 0 width: 4.59375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [35,176 4.59375x17]
"I"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <td> at (86.265625,177.875) content-size 12.546875x17.46875 table-cell [BFC] children: inline
line 0 width: 8.90625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [88.265625,177.875 8.90625x17.46875]
BlockContainer <td> at (86.265625,176) content-size 12.546875x17 table-cell [BFC] children: inline
line 0 width: 8.90625, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [88.265625,176 8.90625x17]
"J"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <td> at (140.8125,177.875) content-size 9.09375x17.46875 table-cell [BFC] children: inline
line 0 width: 8.453125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [140.8125,177.875 8.453125x17.46875]
BlockContainer <td> at (140.8125,176) content-size 9.09375x17 table-cell [BFC] children: inline
line 0 width: 8.453125, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [140.8125,176 8.453125x17]
"5"
TextNode <#text>
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
@ -150,56 +150,56 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
TextNode <#text>
TextNode <#text>
BlockContainer <(anonymous)> at (8,207.34375) content-size 784x0 children: inline
BlockContainer <(anonymous)> at (8,205) content-size 784x0 children: inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x215.34375]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x213]
PaintableWithLines (BlockContainer(anonymous)) [0,0 800x0]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x199.34375]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x197]
PaintableWithLines (BlockContainer(anonymous)) [8,8 784x0]
PaintableWithLines (BlockContainer<DIV>.horizontal) [8,8 784x199.34375]
PaintableWithLines (BlockContainer<TABLE>) [8,8 163.90625x199.34375]
PaintableWithLines (BlockContainer<DIV>.horizontal) [8,8 784x197]
PaintableWithLines (BlockContainer<TABLE>) [8,8 163.90625x197]
PaintableWithLines (BlockContainer(anonymous)) [9,9 161.90625x0]
PaintableWithLines (TableWrapper(anonymous)) [9,9 161.90625x197.34375]
PaintableBox (Box(anonymous)) [9,9 161.90625x197.34375]
PaintableBox (Box<TBODY>) [9,9 161.90625x197.34375]
PaintableBox (Box<TR>) [9,9 161.90625x39.46875]
PaintableWithLines (BlockContainer<TD>) [9,9 56.265625x39.46875]
PaintableWithLines (TableWrapper(anonymous)) [9,9 161.90625x195]
PaintableBox (Box(anonymous)) [9,9 161.90625x195]
PaintableBox (Box<TBODY>) [9,9 161.90625x195]
PaintableBox (Box<TR>) [9,9 161.90625x39]
PaintableWithLines (BlockContainer<TD>) [9,9 56.265625x39]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<TD>) [65.265625,9 54.546875x39.46875]
PaintableWithLines (BlockContainer<TD>) [65.265625,9 54.546875x39]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<TD>) [119.8125,9 51.09375x39.46875]
PaintableWithLines (BlockContainer<TD>) [119.8125,9 51.09375x39]
TextPaintable (TextNode<#text>)
PaintableBox (Box<TR>) [9,48.46875 161.90625x39.46875]
PaintableWithLines (BlockContainer<TD>) [9,48.46875 56.265625x39.46875]
PaintableBox (Box<TR>) [9,48 161.90625x39]
PaintableWithLines (BlockContainer<TD>) [9,48 56.265625x39]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<TD>) [65.265625,48.46875 54.546875x39.46875]
PaintableWithLines (BlockContainer<TD>) [65.265625,48 54.546875x39]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<TD>) [119.8125,48.46875 51.09375x39.46875]
PaintableWithLines (BlockContainer<TD>) [119.8125,48 51.09375x39]
TextPaintable (TextNode<#text>)
PaintableBox (Box<TR>) [9,87.9375 161.90625x39.46875]
PaintableWithLines (BlockContainer<TD>) [9,87.9375 56.265625x39.46875]
PaintableBox (Box<TR>) [9,87 161.90625x39]
PaintableWithLines (BlockContainer<TD>) [9,87 56.265625x39]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<TD>) [65.265625,87.9375 54.546875x39.46875]
PaintableWithLines (BlockContainer<TD>) [65.265625,87 54.546875x39]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<TD>) [119.8125,87.9375 51.09375x39.46875]
PaintableWithLines (BlockContainer<TD>) [119.8125,87 51.09375x39]
TextPaintable (TextNode<#text>)
PaintableBox (Box<TR>) [9,127.40625 161.90625x39.46875]
PaintableWithLines (BlockContainer<TD>) [9,127.40625 56.265625x39.46875]
PaintableBox (Box<TR>) [9,126 161.90625x39]
PaintableWithLines (BlockContainer<TD>) [9,126 56.265625x39]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<TD>) [65.265625,127.40625 54.546875x39.46875]
PaintableWithLines (BlockContainer<TD>) [65.265625,126 54.546875x39]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<TD>) [119.8125,127.40625 51.09375x39.46875]
PaintableWithLines (BlockContainer<TD>) [119.8125,126 51.09375x39]
TextPaintable (TextNode<#text>)
PaintableBox (Box<TR>) [9,166.875 161.90625x39.46875] overflow: [9,9 161.90625x197.34375]
PaintableWithLines (BlockContainer<TD>) [9,166.875 56.265625x39.46875]
PaintableBox (Box<TR>) [9,165 161.90625x39] overflow: [9,9 161.90625x195]
PaintableWithLines (BlockContainer<TD>) [9,165 56.265625x39]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<TD>) [65.265625,166.875 54.546875x39.46875]
PaintableWithLines (BlockContainer<TD>) [65.265625,165 54.546875x39]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<TD>) [119.8125,166.875 51.09375x39.46875]
PaintableWithLines (BlockContainer<TD>) [119.8125,165 51.09375x39]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [9,9 0x0]
PaintableWithLines (BlockContainer(anonymous)) [9,9 0x0]
PaintableWithLines (BlockContainer(anonymous)) [9,9 0x0]
PaintableWithLines (BlockContainer(anonymous)) [8,207.34375 784x0]
PaintableWithLines (BlockContainer(anonymous)) [8,205 784x0]