LibWeb: Allow fractional font sizes in CSS

Fixes an issue where relative font sizes would "snap" to integer sizes
in an unpleasant-looking way while resizing on some websites.
This commit is contained in:
Andreas Kling 2023-09-15 15:29:31 +02:00
parent 4d71f4edc4
commit 23569f8690
Notes: sideshowbarker 2024-07-17 17:49:11 +09:00
3 changed files with 44 additions and 2 deletions

View File

@ -0,0 +1,35 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x39.46875 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x23.46875 children: inline
line 0 width: 54.203125, height: 23.46875, bottom: 23.46875, baseline: 18.1875
frag 0 from TextNode start: 0, length: 1, rect: [8,8 12.4375x22.375]
"x"
frag 1 from TextNode start: 0, length: 1, rect: [20,12 8x17.46875]
" "
frag 2 from TextNode start: 0, length: 1, rect: [28,8 12.734375x22.921875]
"x"
frag 3 from TextNode start: 0, length: 1, rect: [41,12 8x17.46875]
" "
frag 4 from TextNode start: 0, length: 1, rect: [49,8 13.03125x23.46875]
"x"
InlineNode <span.a>
TextNode <#text>
TextNode <#text>
InlineNode <span.b>
TextNode <#text>
TextNode <#text>
InlineNode <span.c>
TextNode <#text>
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x39.46875]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x23.46875]
InlinePaintable (InlineNode<SPAN>.a)
TextPaintable (TextNode<#text>)
TextPaintable (TextNode<#text>)
InlinePaintable (InlineNode<SPAN>.b)
TextPaintable (TextNode<#text>)
TextPaintable (TextNode<#text>)
InlinePaintable (InlineNode<SPAN>.c)
TextPaintable (TextNode<#text>)

View File

@ -0,0 +1,8 @@
<!doctype html><style>
.a { font-size: 20.5px; }
.b { font-size: 21px; }
.c { font-size: 21.5px; }
</style>
<span class="a">x</span>
<span class="b">x</span>
<span class="c">x</span>

View File

@ -2051,8 +2051,7 @@ RefPtr<Gfx::Font const> StyleComputer::compute_font_for_style_values(DOM::Elemen
maybe_length = font_size.as_calculated().resolve_length(length_resolution_context);
}
if (maybe_length.has_value()) {
auto px = maybe_length.value().to_px(length_resolution_context).to_int();
font_size_in_px = px;
font_size_in_px = maybe_length.value().to_px(length_resolution_context);
}
}