mirror of
https://github.com/RGBCube/serenity
synced 2025-07-28 11:47:34 +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
parent
f0722671c3
commit
e7de5cb4d2
385 changed files with 6889 additions and 6893 deletions
|
|
@ -1,107 +1,107 @@
|
|||
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 784x332.34375 children: not-inline
|
||||
Box <div.grid-container> at (8,8) content-size 784x332.34375 [GFC] children: not-inline
|
||||
BlockContainer <body> at (8,8) content-size 784x323 children: not-inline
|
||||
Box <div.grid-container> at (8,8) content-size 784x323 [GFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.grid-item.item-span-one-one> at (411.46875,8) content-size 382x129.765625 [BFC] children: inline
|
||||
line 0 width: 319.171875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 1, length: 40, rect: [411.46875,8 319.171875x17.46875]
|
||||
BlockContainer <div.grid-item.item-span-one-one> at (411.46875,8) content-size 382x126 [BFC] children: inline
|
||||
line 0 width: 319.171875, height: 17, bottom: 17, baseline: 13.296875
|
||||
frag 0 from TextNode start: 1, length: 40, rect: [411.46875,8 319.171875x17]
|
||||
"In a sollicitudin augue. Sed ante augue,"
|
||||
line 1 width: 335.125, height: 17.9375, bottom: 35.40625, baseline: 13.53125
|
||||
frag 0 from TextNode start: 42, length: 42, rect: [411.46875,25 335.125x17.46875]
|
||||
line 1 width: 335.125, height: 17, bottom: 34, baseline: 13.296875
|
||||
frag 0 from TextNode start: 42, length: 42, rect: [411.46875,25 335.125x17]
|
||||
"rhoncus nec porttitor id, lacinia et nibh."
|
||||
line 2 width: 378.625, height: 18.40625, bottom: 53.34375, baseline: 13.53125
|
||||
frag 0 from TextNode start: 85, length: 48, rect: [411.46875,42 378.625x17.46875]
|
||||
line 2 width: 378.625, height: 17, bottom: 51, baseline: 13.296875
|
||||
frag 0 from TextNode start: 85, length: 48, rect: [411.46875,42 378.625x17]
|
||||
"Pellentesque diam libero, ultrices eget eleifend"
|
||||
line 3 width: 182.8125, height: 17.875, bottom: 70.28125, baseline: 13.53125
|
||||
frag 0 from TextNode start: 134, length: 22, rect: [411.46875,60 182.8125x17.46875]
|
||||
line 3 width: 182.8125, height: 17, bottom: 68, baseline: 13.296875
|
||||
frag 0 from TextNode start: 134, length: 22, rect: [411.46875,59 182.8125x17]
|
||||
"at, consequat ut orci."
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.grid-item.item-span-one-two> at (411.46875,157.765625) content-size 382x182.578125 [BFC] children: inline
|
||||
line 0 width: 359.15625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 1, length: 43, rect: [411.46875,157.765625 359.15625x17.46875]
|
||||
BlockContainer <div.grid-item.item-span-one-two> at (411.46875,154) content-size 382x177 [BFC] children: inline
|
||||
line 0 width: 359.15625, height: 17, bottom: 17, baseline: 13.296875
|
||||
frag 0 from TextNode start: 1, length: 43, rect: [411.46875,154 359.15625x17]
|
||||
"Suspendisse potenti. Pellentesque at varius"
|
||||
line 1 width: 318.5625, height: 17.9375, bottom: 35.40625, baseline: 13.53125
|
||||
frag 0 from TextNode start: 45, length: 41, rect: [411.46875,174.765625 318.5625x17.46875]
|
||||
line 1 width: 318.5625, height: 17, bottom: 34, baseline: 13.296875
|
||||
frag 0 from TextNode start: 45, length: 41, rect: [411.46875,171 318.5625x17]
|
||||
"lacus, sed sollicitudin leo. Pellentesque"
|
||||
line 2 width: 377.640625, height: 18.40625, bottom: 53.34375, baseline: 13.53125
|
||||
frag 0 from TextNode start: 87, length: 44, rect: [411.46875,191.765625 377.640625x17.46875]
|
||||
line 2 width: 377.640625, height: 17, bottom: 51, baseline: 13.296875
|
||||
frag 0 from TextNode start: 87, length: 44, rect: [411.46875,188 377.640625x17]
|
||||
"malesuada mi eget pellentesque tempor. Donec"
|
||||
line 3 width: 378.03125, height: 17.875, bottom: 70.28125, baseline: 13.53125
|
||||
frag 0 from TextNode start: 132, length: 47, rect: [411.46875,209.765625 378.03125x17.46875]
|
||||
line 3 width: 378.03125, height: 17, bottom: 68, baseline: 13.296875
|
||||
frag 0 from TextNode start: 132, length: 47, rect: [411.46875,205 378.03125x17]
|
||||
"egestas mauris est, ut lobortis nisi luctus at."
|
||||
line 4 width: 345.953125, height: 18.34375, bottom: 88.21875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 180, length: 41, rect: [411.46875,226.765625 345.953125x17.46875]
|
||||
line 4 width: 345.953125, height: 17, bottom: 85, baseline: 13.296875
|
||||
frag 0 from TextNode start: 180, length: 41, rect: [411.46875,222 345.953125x17]
|
||||
"Vivamus eleifend, lorem vulputate maximus"
|
||||
line 5 width: 312.765625, height: 17.8125, bottom: 105.15625, baseline: 13.53125
|
||||
frag 0 from TextNode start: 222, length: 37, rect: [411.46875,244.765625 312.765625x17.46875]
|
||||
line 5 width: 312.765625, height: 17, bottom: 102, baseline: 13.296875
|
||||
frag 0 from TextNode start: 222, length: 37, rect: [411.46875,239 312.765625x17]
|
||||
"porta, nunc metus porttitor nibh, nec"
|
||||
line 6 width: 242.921875, height: 18.28125, bottom: 123.09375, baseline: 13.53125
|
||||
frag 0 from TextNode start: 260, length: 31, rect: [411.46875,261.765625 242.921875x17.46875]
|
||||
line 6 width: 242.921875, height: 17, bottom: 119, baseline: 13.296875
|
||||
frag 0 from TextNode start: 260, length: 31, rect: [411.46875,256 242.921875x17]
|
||||
"bibendum nulla lectus ut felis."
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.grid-item.item-span-two> at (8,8) content-size 383.46875x332.34375 [BFC] children: inline
|
||||
line 0 width: 337.6875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 1, length: 39, rect: [8,8 337.6875x17.46875]
|
||||
BlockContainer <div.grid-item.item-span-two> at (8,8) content-size 383.46875x323 [BFC] children: inline
|
||||
line 0 width: 337.6875, height: 17, bottom: 17, baseline: 13.296875
|
||||
frag 0 from TextNode start: 1, length: 39, rect: [8,8 337.6875x17]
|
||||
"Lorem ipsum dolor sit amet, consectetur"
|
||||
line 1 width: 376.34375, height: 17.9375, bottom: 35.40625, baseline: 13.53125
|
||||
frag 0 from TextNode start: 41, length: 47, rect: [8,25 376.34375x17.46875]
|
||||
line 1 width: 376.34375, height: 17, bottom: 34, baseline: 13.296875
|
||||
frag 0 from TextNode start: 41, length: 47, rect: [8,25 376.34375x17]
|
||||
"adipiscing elit. Sed vitae condimentum erat, ac"
|
||||
line 2 width: 365.84375, height: 18.40625, bottom: 53.34375, baseline: 13.53125
|
||||
frag 0 from TextNode start: 89, length: 45, rect: [8,42 365.84375x17.46875]
|
||||
line 2 width: 365.84375, height: 17, bottom: 51, baseline: 13.296875
|
||||
frag 0 from TextNode start: 89, length: 45, rect: [8,42 365.84375x17]
|
||||
"posuere arcu. Aenean tincidunt mi ligula, vel"
|
||||
line 3 width: 381.96875, height: 17.875, bottom: 70.28125, baseline: 13.53125
|
||||
frag 0 from TextNode start: 135, length: 46, rect: [8,60 381.96875x17.46875]
|
||||
line 3 width: 381.96875, height: 17, bottom: 68, baseline: 13.296875
|
||||
frag 0 from TextNode start: 135, length: 46, rect: [8,59 381.96875x17]
|
||||
"semper dolor aliquet at. Phasellus scelerisque"
|
||||
line 4 width: 377.203125, height: 18.34375, bottom: 88.21875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 182, length: 45, rect: [8,77 377.203125x17.46875]
|
||||
line 4 width: 377.203125, height: 17, bottom: 85, baseline: 13.296875
|
||||
frag 0 from TextNode start: 182, length: 45, rect: [8,76 377.203125x17]
|
||||
"dapibus diam sed rhoncus. Proin sed orci leo."
|
||||
line 5 width: 375.390625, height: 17.8125, bottom: 105.15625, baseline: 13.53125
|
||||
frag 0 from TextNode start: 228, length: 45, rect: [8,95 375.390625x17.46875]
|
||||
line 5 width: 375.390625, height: 17, bottom: 102, baseline: 13.296875
|
||||
frag 0 from TextNode start: 228, length: 45, rect: [8,93 375.390625x17]
|
||||
"Praesent pellentesque mi eu nunc gravida, vel"
|
||||
line 6 width: 271.078125, height: 18.28125, bottom: 123.09375, baseline: 13.53125
|
||||
frag 0 from TextNode start: 274, length: 32, rect: [8,112 271.078125x17.46875]
|
||||
line 6 width: 271.078125, height: 17, bottom: 119, baseline: 13.296875
|
||||
frag 0 from TextNode start: 274, length: 32, rect: [8,110 271.078125x17]
|
||||
"consectetur nulla malesuada. Sed"
|
||||
line 7 width: 303.5625, height: 17.75, bottom: 140.03125, baseline: 13.53125
|
||||
frag 0 from TextNode start: 307, length: 40, rect: [8,130 303.5625x17.46875]
|
||||
line 7 width: 303.5625, height: 17, bottom: 136, baseline: 13.296875
|
||||
frag 0 from TextNode start: 307, length: 40, rect: [8,127 303.5625x17]
|
||||
"pellentesque, elit sit amet sollicitudin"
|
||||
line 8 width: 346.625, height: 18.21875, bottom: 157.96875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 348, length: 46, rect: [8,147 346.625x17.46875]
|
||||
line 8 width: 346.625, height: 17, bottom: 153, baseline: 13.296875
|
||||
frag 0 from TextNode start: 348, length: 46, rect: [8,144 346.625x17]
|
||||
"sollicitudin, lectus justo facilisis lacus, ac"
|
||||
line 9 width: 350.234375, height: 17.6875, bottom: 174.90625, baseline: 13.53125
|
||||
frag 0 from TextNode start: 395, length: 42, rect: [8,165 350.234375x17.46875]
|
||||
line 9 width: 350.234375, height: 17, bottom: 170, baseline: 13.296875
|
||||
frag 0 from TextNode start: 395, length: 42, rect: [8,161 350.234375x17]
|
||||
"vehicula metus neque ac mi. In in augue et"
|
||||
line 10 width: 361.0625, height: 18.15625, bottom: 192.84375, baseline: 13.53125
|
||||
frag 0 from TextNode start: 438, length: 40, rect: [8,182 361.0625x17.46875]
|
||||
line 10 width: 361.0625, height: 17, bottom: 187, baseline: 13.296875
|
||||
frag 0 from TextNode start: 438, length: 40, rect: [8,178 361.0625x17]
|
||||
"massa maximus venenatis auctor fermentum"
|
||||
line 11 width: 371.734375, height: 17.625, bottom: 209.78125, baseline: 13.53125
|
||||
frag 0 from TextNode start: 479, length: 46, rect: [8,200 371.734375x17.46875]
|
||||
line 11 width: 371.734375, height: 17, bottom: 204, baseline: 13.296875
|
||||
frag 0 from TextNode start: 479, length: 46, rect: [8,195 371.734375x17]
|
||||
"dui. Aliquam dictum finibus urna, quis lacinia"
|
||||
line 12 width: 369.59375, height: 18.09375, bottom: 227.71875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 526, length: 42, rect: [8,217 369.59375x17.46875]
|
||||
line 12 width: 369.59375, height: 17, bottom: 221, baseline: 13.296875
|
||||
frag 0 from TextNode start: 526, length: 42, rect: [8,212 369.59375x17]
|
||||
"massa laoreet a. Suspendisse elementum non"
|
||||
line 13 width: 323.78125, height: 17.5625, bottom: 244.65625, baseline: 13.53125
|
||||
frag 0 from TextNode start: 569, length: 39, rect: [8,235 323.78125x17.46875]
|
||||
line 13 width: 323.78125, height: 17, bottom: 238, baseline: 13.296875
|
||||
frag 0 from TextNode start: 569, length: 39, rect: [8,229 323.78125x17]
|
||||
"lectus nec elementum. Quisque ultricies"
|
||||
line 14 width: 337, height: 18.03125, bottom: 262.59375, baseline: 13.53125
|
||||
frag 0 from TextNode start: 609, length: 40, rect: [8,252 337x17.46875]
|
||||
line 14 width: 337, height: 17, bottom: 255, baseline: 13.296875
|
||||
frag 0 from TextNode start: 609, length: 40, rect: [8,246 337x17]
|
||||
"suscipit porttitor. Sed non urna rutrum,"
|
||||
line 15 width: 351.828125, height: 17.5, bottom: 279.53125, baseline: 13.53125
|
||||
frag 0 from TextNode start: 650, length: 46, rect: [8,270 351.828125x17.46875]
|
||||
line 15 width: 351.828125, height: 17, bottom: 272, baseline: 13.296875
|
||||
frag 0 from TextNode start: 650, length: 46, rect: [8,263 351.828125x17]
|
||||
"mattis nulla at, feugiat erat. Duis orci elit,"
|
||||
line 16 width: 361.328125, height: 17.96875, bottom: 297.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 697, length: 45, rect: [8,287 361.328125x17.46875]
|
||||
line 16 width: 361.328125, height: 17, bottom: 289, baseline: 13.296875
|
||||
frag 0 from TextNode start: 697, length: 45, rect: [8,280 361.328125x17]
|
||||
"vehicula sed blandit eget, auctor in arcu. Ut"
|
||||
line 17 width: 345.75, height: 18.4375, bottom: 315.40625, baseline: 13.53125
|
||||
frag 0 from TextNode start: 743, length: 41, rect: [8,304 345.75x17.46875]
|
||||
line 17 width: 345.75, height: 17, bottom: 306, baseline: 13.296875
|
||||
frag 0 from TextNode start: 743, length: 41, rect: [8,297 345.75x17]
|
||||
"cursus magna sit amet nulla cursus, vitae"
|
||||
line 18 width: 180.234375, height: 17.90625, bottom: 332.34375, baseline: 13.53125
|
||||
frag 0 from TextNode start: 785, length: 22, rect: [8,322 180.234375x17.46875]
|
||||
line 18 width: 180.234375, height: 17, bottom: 323, baseline: 13.296875
|
||||
frag 0 from TextNode start: 785, length: 22, rect: [8,314 180.234375x17]
|
||||
"gravida mauris dictum."
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
|
|
@ -109,11 +109,11 @@ 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 784x332.34375] overflow: [8,8 785.46875x332.34375]
|
||||
PaintableBox (Box<DIV>.grid-container) [8,8 784x332.34375] overflow: [8,8 785.46875x332.34375]
|
||||
PaintableWithLines (BlockContainer<DIV>.grid-item.item-span-one-one) [411.46875,8 382x129.765625]
|
||||
PaintableWithLines (BlockContainer<BODY>) [8,8 784x323] overflow: [8,8 785.46875x323]
|
||||
PaintableBox (Box<DIV>.grid-container) [8,8 784x323] overflow: [8,8 785.46875x323]
|
||||
PaintableWithLines (BlockContainer<DIV>.grid-item.item-span-one-one) [411.46875,8 382x126]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer<DIV>.grid-item.item-span-one-two) [411.46875,157.765625 382x182.578125]
|
||||
PaintableWithLines (BlockContainer<DIV>.grid-item.item-span-one-two) [411.46875,154 382x177]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer<DIV>.grid-item.item-span-two) [8,8 383.46875x332.34375]
|
||||
PaintableWithLines (BlockContainer<DIV>.grid-item.item-span-two) [8,8 383.46875x323]
|
||||
TextPaintable (TextNode<#text>)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue