RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-28 05:37:44 +00:00
Code Issues Activity Actions

LibWeb: Round lengths to 3 decimals after resolving from percentage

Browse source 
This is a hack to emulate the behavior of other engines that use
fixed-point math. By rounding to 3 decimals, we retain a fair amount of
detail, while still allowing overshooting 100% without breaking lines.

This is both gross and slow, but it fixes real sites. Notably, the
popular Bootstrap library uses overshooting percentages in their
12-column grid system.

This hack can be removed when CSSPixels is made a fixed-point type.
This commit is contained in:
Andreas Kling 2023-06-01 16:45:35 +02:00
parent 2452cf6b55
commit 1a6a4ca7d4
5 changed files with 45 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

18
Tests/LibWeb/Layout/input/tolerate-css-percentage-overshoot.html Normal file
View file

@ -0,0 +1,18 @@
<style>
body {
width: 500px;
}
div {
float: left;
height: 100px;
}
.larg {
width: 41.66667%;
}
.smol {
width: 16.66667%;
}
.red { background: red; }
.green { background: green; }
.blue { background: blue; }
</style><div class="larg red"></div><div class="larg green"></div><div class="smol blue"></div>