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

164
Tests/LibWeb/Layout/expected/table/border-spacing.txt
View file

@ -1,141 +1,141 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x275.34375 [BFC] children: not-inline
BlockContainer <html> at (0,0) content-size 800x273 [BFC] children: not-inline
BlockContainer <(anonymous)> at (0,0) content-size 800x0 children: inline
TextNode <#text>
BlockContainer <body> at (8,8) content-size 784x259.34375 children: not-inline
BlockContainer <body> at (8,8) content-size 784x257 children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
TextNode <#text>
TableWrapper <(anonymous)> at (8,8) content-size 243.90625x259.34375 [BFC] children: not-inline
Box <table> at (9,9) content-size 241.90625x257.34375 table-box [TFC] children: not-inline
TableWrapper <(anonymous)> at (8,8) content-size 243.90625x257 [BFC] children: not-inline
Box <table> at (9,9) content-size 241.90625x255 table-box [TFC] children: not-inline
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
Box <tbody> at (9,9) content-size 161.90625x197.34375 table-row-group 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 (29,19) content-size 161.90625x39.46875 table-row children: not-inline
Box <tr> at (29,19) content-size 161.90625x39 table-row children: not-inline
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <td> at (50,30) 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: [50,30 14.265625x17.46875]
BlockContainer <td> at (50,30) 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: [50,30 14.265625x17]
"A"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <td> at (126.265625,30) 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: [128.265625,30 9.34375x17.46875]
BlockContainer <td> at (126.265625,30) 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: [128.265625,30 9.34375x17]
"B"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <td> at (200.8125,30) 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: [201.8125,30 6.34375x17.46875]
BlockContainer <td> at (200.8125,30) 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: [201.8125,30 6.34375x17]
"1"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
Box <tr> at (29,68.46875) content-size 161.90625x39.46875 table-row children: not-inline
Box <tr> at (29,68) content-size 161.90625x39 table-row children: not-inline
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <td> at (50,79.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: [52,79.46875 10.3125x17.46875]
BlockContainer <td> at (50,79) 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: [52,79 10.3125x17]
"C"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <td> at (126.265625,79.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: [127.265625,79.46875 11.140625x17.46875]
BlockContainer <td> at (126.265625,79) 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: [127.265625,79 11.140625x17]
"D"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <td> at (200.8125,79.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: [200.8125,79.46875 8.8125x17.46875]
BlockContainer <td> at (200.8125,79) 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: [200.8125,79 8.8125x17]
"2"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
Box <tr> at (29,117.9375) content-size 161.90625x39.46875 table-row children: not-inline
Box <tr> at (29,117) content-size 161.90625x39 table-row children: not-inline
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <td> at (50,128.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: [51,128.9375 11.859375x17.46875]
BlockContainer <td> at (50,128) 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: [51,128 11.859375x17]
"E"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <td> at (126.265625,128.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: [126.265625,128.9375 12.546875x17.46875]
BlockContainer <td> at (126.265625,128) 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: [126.265625,128 12.546875x17]
"F"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <td> at (200.8125,128.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: [200.8125,128.9375 9.09375x17.46875]
BlockContainer <td> at (200.8125,128) 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: [200.8125,128 9.09375x17]
"3"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
Box <tr> at (29,167.40625) content-size 161.90625x39.46875 table-row children: not-inline
Box <tr> at (29,166) content-size 161.90625x39 table-row children: not-inline
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <td> at (50,178.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: [51,178.40625 13.234375x17.46875]
BlockContainer <td> at (50,177) 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: [51,177 13.234375x17]
"G"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <td> at (126.265625,178.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: [126.265625,178.40625 12.234375x17.46875]
BlockContainer <td> at (126.265625,177) 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: [126.265625,177 12.234375x17]
"H"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <td> at (200.8125,178.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: [201.8125,178.40625 7.75x17.46875]
BlockContainer <td> at (200.8125,177) 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: [201.8125,177 7.75x17]
"4"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
Box <tr> at (29,216.875) content-size 161.90625x39.46875 table-row children: not-inline
Box <tr> at (29,215) content-size 161.90625x39 table-row children: not-inline
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <td> at (50,227.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: [55,227.875 4.59375x17.46875]
BlockContainer <td> at (50,226) 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: [55,226 4.59375x17]
"I"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <td> at (126.265625,227.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: [128.265625,227.875 8.90625x17.46875]
BlockContainer <td> at (126.265625,226) 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: [128.265625,226 8.90625x17]
"J"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <td> at (200.8125,227.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: [200.8125,227.875 8.453125x17.46875]
BlockContainer <td> at (200.8125,226) 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: [200.8125,226 8.453125x17]
"5"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
@ -144,50 +144,50 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,267.34375) content-size 784x0 children: inline
BlockContainer <(anonymous)> at (8,265) content-size 784x0 children: inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x275.34375]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x273]
PaintableWithLines (BlockContainer(anonymous)) [0,0 800x0]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x259.34375]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x257]
PaintableWithLines (BlockContainer(anonymous)) [8,8 784x0]
PaintableWithLines (TableWrapper(anonymous)) [8,8 243.90625x259.34375]
PaintableBox (Box<TABLE>) [8,8 243.90625x259.34375]
PaintableBox (Box<TBODY>) [9,9 161.90625x197.34375] overflow: [9,9 221.90625x247.34375]
PaintableBox (Box<TR>) [29,19 161.90625x39.46875] overflow: [29,19 201.90625x39.46875]
PaintableWithLines (BlockContainer<TD>) [29,19 56.265625x39.46875]
PaintableWithLines (TableWrapper(anonymous)) [8,8 243.90625x257]
PaintableBox (Box<TABLE>) [8,8 243.90625x257]
PaintableBox (Box<TBODY>) [9,9 161.90625x195] overflow: [9,9 221.90625x245]
PaintableBox (Box<TR>) [29,19 161.90625x39] overflow: [29,19 201.90625x39]
PaintableWithLines (BlockContainer<TD>) [29,19 56.265625x39]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<TD>) [105.265625,19 54.546875x39.46875]
PaintableWithLines (BlockContainer<TD>) [105.265625,19 54.546875x39]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<TD>) [179.8125,19 51.09375x39.46875]
PaintableWithLines (BlockContainer<TD>) [179.8125,19 51.09375x39]
TextPaintable (TextNode<#text>)
PaintableBox (Box<TR>) [29,68.46875 161.90625x39.46875] overflow: [29,68.46875 201.90625x39.46875]
PaintableWithLines (BlockContainer<TD>) [29,68.46875 56.265625x39.46875]
PaintableBox (Box<TR>) [29,68 161.90625x39] overflow: [29,68 201.90625x39]
PaintableWithLines (BlockContainer<TD>) [29,68 56.265625x39]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<TD>) [105.265625,68.46875 54.546875x39.46875]
PaintableWithLines (BlockContainer<TD>) [105.265625,68 54.546875x39]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<TD>) [179.8125,68.46875 51.09375x39.46875]
PaintableWithLines (BlockContainer<TD>) [179.8125,68 51.09375x39]
TextPaintable (TextNode<#text>)
PaintableBox (Box<TR>) [29,117.9375 161.90625x39.46875] overflow: [29,117.9375 201.90625x39.46875]
PaintableWithLines (BlockContainer<TD>) [29,117.9375 56.265625x39.46875]
PaintableBox (Box<TR>) [29,117 161.90625x39] overflow: [29,117 201.90625x39]
PaintableWithLines (BlockContainer<TD>) [29,117 56.265625x39]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<TD>) [105.265625,117.9375 54.546875x39.46875]
PaintableWithLines (BlockContainer<TD>) [105.265625,117 54.546875x39]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<TD>) [179.8125,117.9375 51.09375x39.46875]
PaintableWithLines (BlockContainer<TD>) [179.8125,117 51.09375x39]
TextPaintable (TextNode<#text>)
PaintableBox (Box<TR>) [29,167.40625 161.90625x39.46875] overflow: [29,167.40625 201.90625x39.46875]
PaintableWithLines (BlockContainer<TD>) [29,167.40625 56.265625x39.46875]
PaintableBox (Box<TR>) [29,166 161.90625x39] overflow: [29,166 201.90625x39]
PaintableWithLines (BlockContainer<TD>) [29,166 56.265625x39]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<TD>) [105.265625,167.40625 54.546875x39.46875]
PaintableWithLines (BlockContainer<TD>) [105.265625,166 54.546875x39]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<TD>) [179.8125,167.40625 51.09375x39.46875]
PaintableWithLines (BlockContainer<TD>) [179.8125,166 51.09375x39]
TextPaintable (TextNode<#text>)
PaintableBox (Box<TR>) [29,216.875 161.90625x39.46875] overflow: [29,216.875 201.90625x39.46875]
PaintableWithLines (BlockContainer<TD>) [29,216.875 56.265625x39.46875]
PaintableBox (Box<TR>) [29,215 161.90625x39] overflow: [29,215 201.90625x39]
PaintableWithLines (BlockContainer<TD>) [29,215 56.265625x39]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<TD>) [105.265625,216.875 54.546875x39.46875]
PaintableWithLines (BlockContainer<TD>) [105.265625,215 54.546875x39]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<TD>) [179.8125,216.875 51.09375x39.46875]
PaintableWithLines (BlockContainer<TD>) [179.8125,215 51.09375x39]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [8,267.34375 784x0]
PaintableWithLines (BlockContainer(anonymous)) [8,265 784x0]