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

10
Userland/Libraries/LibWeb/CSS/Length.cpp
View file

@ -59,7 +59,15 @@ Length Length::percentage_of(Percentage const& percentage) const
return *this;
}
return Length { static_cast<double>(percentage.as_fraction()) * raw_value(), m_type };
// HACK: We round to 3 decimal places to emulate what happens in browsers that used fixed point math.
// FIXME: Remove this when converting CSSPixels to a fixed-point type.
// https://github.com/SerenityOS/serenity/issues/18566
auto value = percentage.as_fraction() * raw_value();
value *= 1000;
value = round(value);
value /= 1000;
return Length { value, m_type };
}
CSSPixels Length::font_relative_length_to_px(Length::FontMetrics const& font_metrics, Length::FontMetrics const& root_font_metrics) const