dmaax/ladybird
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

LibWeb: Use single-step division for aspect-ratio in default sizing

Browse source 
When background-size specifies only a width, the missing height was
computed as `(CSSPixels(1) / ratio) * width`. The intermediate
`CSSPixels(1) / ratio` step truncates the inverse ratio and loses
enough precision to produce a visible error in the final height for some
ratios.

Now we do the division in one step, so the full precision is preserved.
This commit is contained in:
aplefull 2026-05-31 22:07:54 +02:00 committed by Jelle Raaijmakers
parent 6ddbff39c7
commit a0a3bfbee7
3 changed files with 27 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Libraries/LibWeb/CSS/Sizing.cpp
View file

@ -26,7 +26,7 @@ CSSPixelSize run_default_sizing_algorithm(
// the missing dimension of the concrete object size is calculated using that aspect ratio and the present dimension.
if (natural.has_aspect_ratio() && !natural.aspect_ratio->might_be_saturated()) {
if (specified_width.has_value())
return CSSPixelSize { specified_width.value(), (CSSPixels(1) / natural.aspect_ratio.value()) * specified_width.value() };
return CSSPixelSize { specified_width.value(), specified_width.value() / natural.aspect_ratio.value() };
if (specified_height.has_value())
return CSSPixelSize { specified_height.value() * natural.aspect_ratio.value(), specified_height.value() };
}

BIN
Tests/LibWeb/Screenshot/expected/background-size-single-value-aspect-ratio.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 758 B

26
Tests/LibWeb/Screenshot/input/background-size-single-value-aspect-ratio.html Normal file
View file

@ -0,0 +1,26 @@
<!doctype html>
<head>
<style>
body {
display: flex;
}
.b {
width: 300px;
height: 800px;
background: url(data:image/webp;base64,UklGRlIAAABXRUJQVlA4TEUAAAAvV0KhAQ8Q87//8x8OCCRt3r/0SwyM6H+e//znP//5z3/+85///Oc///nPf/7navznP//5z3/+85///Oc///nPf/7zP1cA);
background-size: 300px;
}
.a {
width: 300px;
height: 800px;
background: url(data:image/webp;base64,UklGRpQAAABXRUJQVlA4TIgAAAAvP0ahAQ8Q87//8x8OBALJ/tJjFNH/nP/85z//+c9//vOf//znP//5z3/+85///Oc///nPf/7zn//85z//+c9//vOf//znP//5z3/+858f8Z///Oc///nPf/7zn//85z//+c9//vOf//znP//5z3/+85///Oc///nPf/7zn//85z//+c9//vMD);
background-size: 800px;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
</body>