RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-10 09:07:35 +00:00
Code Issues Activity Actions

LibWeb: Respect font-size specified by CSS in "em" length calculations

Browse source 
"5em" means 5*font-size, but by forcing "em" to mean the presentation
size of the bitmap font actually used, we broke a bunch of layouts that
depended on a correct interpretation of "em".

This means that "em" units will no longer be relative to the exact
size of the bitmap font in use, but I think that's a compromise we'll
have to make, since accurate layouts are more important.

This yields a visual progression on both ACID2 and ACID3. :^)
This commit is contained in:
Andreas Kling 2022-02-21 16:24:12 +01:00
parent 2615728d6b
commit c61747fb2a
6 changed files with 32 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

12
Userland/Libraries/LibWeb/CSS/StyleComputer.cpp
View file

@ -770,7 +770,7 @@ void StyleComputer::compute_font(StyleProperties& style, DOM::Element const* ele
if (value->is_length()) {
auto length = static_cast<LengthStyleValue const&>(*value).to_length();
if (length.is_absolute() || length.is_relative())
parent_font_size = length.to_px(viewport_rect, font_metrics, root_font_size);
parent_font_size = length.to_px(viewport_rect, font_metrics, size, root_font_size);
}
}
maybe_length = Length::make_px(percentage.as_fraction() * parent_font_size);
@ -785,7 +785,7 @@ void StyleComputer::compute_font(StyleProperties& style, DOM::Element const* ele
// FIXME: Support font-size: calc(...)
// Theoretically we can do this now, but to resolve it we need a layout_node which we might not have. :^(
if (!maybe_length->is_calculated()) {
auto px = maybe_length.value().to_px(viewport_rect, font_metrics, root_font_size);
auto px = maybe_length.value().to_px(viewport_rect, font_metrics, size, root_font_size);
if (px != 0)
size = px;
}
@ -874,6 +874,9 @@ void StyleComputer::compute_font(StyleProperties& style, DOM::Element const* ele
FontCache::the().set(font_selector, *found_font);
style.set_property(CSS::PropertyID::FontSize, LengthStyleValue::create(CSS::Length::make_px(size)));
style.set_property(CSS::PropertyID::FontWeight, NumericStyleValue::create_integer(weight));
style.set_computed_font(found_font.release_nonnull());
}
@ -883,13 +886,16 @@ void StyleComputer::absolutize_values(StyleProperties& style, DOM::Element const
auto font_metrics = style.computed_font().metrics('M');
// FIXME: Get the root element font.
float root_font_size = 10;
float font_size = style.property(CSS::PropertyID::FontSize).value()->to_length().to_px(viewport_rect, font_metrics, root_font_size, root_font_size);
for (auto& value_slot : style.m_property_values) {
if (!value_slot)
continue;
value_slot->visit_lengths([&](Length& length) {
if (length.is_px())
return;
if (length.is_absolute() || length.is_relative()) {
auto px = length.to_px(viewport_rect, font_metrics, root_font_size);
auto px = length.to_px(viewport_rect, font_metrics, font_size, root_font_size);
length = Length::make_px(px);
}
});