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

LibWeb: Start absolutizing lengths after performing the CSS cascade

Browse source 
Once we've performed the cascade on a set of values for an element,
we should have enough information to resolve/absolutize some lengths.

Basically, any CSS length that isn't "auto" or a percentage can be
turned into an absolute length (in pixels) as long as we have the
following information:

- The viewport rect
- The parent element's font
- The document element's font
- The element's own font

To ensure that we can absolutize lengths relative to the element's own
font, we now do a separate first pass where font-related properties are
defaulted (in the cascade spec sense of the word) and become usable.

There's a lot more work to do here, but this should open up a lot of
simplification in layout code, since it will no longer need to care
about relative lengths. Layout still needs to resolve percentages, since
we can't do that for some properties until the containing block
dimensions are known.
This commit is contained in:
Andreas Kling 2021-09-23 13:13:51 +02:00
parent 30979c1956
commit 23a08fd35a
6 changed files with 305 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -7,6 +7,8 @@
#include <AK/NonnullOwnPtr.h>
#include <AK/Variant.h>
#include <LibGfx/Font.h>
#include <LibGfx/Rect.h>
#include <LibWeb/CSS/Length.h>
#include <LibWeb/DOM/Document.h>
#include <LibWeb/HTML/HTMLHtmlElement.h>
@ -14,37 +16,49 @@
namespace Web::CSS {
float Length::relative_length_to_px(const Layout::Node& layout_node) const
float Length::relative_length_to_px(Gfx::IntRect const& viewport_rect, Gfx::FontMetrics const& font_metrics, float root_font_size) const
{
switch (m_type) {
case Type::Ex:
return m_value * layout_node.font().x_height();
return m_value * font_metrics.x_height;
case Type::Em:
return m_value * layout_node.font_size();
return m_value * font_metrics.size;
case Type::Ch:
// FIXME: Use layout_node.font().glyph_height() when writing-mode is not horizontal-tb (it has to be implemented first)
return m_value * (layout_node.font().glyph_width('0') + layout_node.font().glyph_spacing());
return m_value * (font_metrics.glyph_width + font_metrics.glyph_spacing);
case Type::Rem:
return m_value * layout_node.document().document_element()->layout_node()->font_size();
return m_value * root_font_size;
case Type::Vw:
return layout_node.document().browsing_context()->viewport_rect().width() * (m_value / 100);
return viewport_rect.width() * (m_value / 100);
case Type::Vh:
return layout_node.document().browsing_context()->viewport_rect().height() * (m_value / 100);
case Type::Vmin: {
auto viewport = layout_node.document().browsing_context()->viewport_rect();
return min(viewport.width(), viewport.height()) * (m_value / 100);
}
case Type::Vmax: {
auto viewport = layout_node.document().browsing_context()->viewport_rect();
return max(viewport.width(), viewport.height()) * (m_value / 100);
}
return viewport_rect.height() * (m_value / 100);
case Type::Vmin:
return min(viewport_rect.width(), viewport_rect.height()) * (m_value / 100);
case Type::Vmax:
return max(viewport_rect.width(), viewport_rect.height()) * (m_value / 100);
default:
VERIFY_NOT_REACHED();
}
}
float Length::to_px(Layout::Node const& layout_node) const
{
if (!layout_node.document().browsing_context())
return 0;
auto viewport_rect = layout_node.document().browsing_context()->viewport_rect();
auto* root_element = layout_node.document().document_element();
if (!root_element || !root_element->layout_node())
return 0;
return to_px(viewport_rect, layout_node.font().metrics('M'), root_element->layout_node()->font().presentation_size());
}
float Length::relative_length_to_px(Layout::Node const& layout_node) const
{
auto viewport_rect = layout_node.document().browsing_context()->viewport_rect();
auto root_element = layout_node.document().document_element();
return relative_length_to_px(viewport_rect, layout_node.font().metrics('M'), root_element->layout_node()->font().presentation_size());
}
static float resolve_calc_value(CalculatedStyleValue::CalcValue const&, const Layout::Node& layout_node, float reference_for_percent);
static float resolve_calc_number_value(CalculatedStyleValue::CalcNumberValue const&);
static float resolve_calc_product(NonnullOwnPtr<CalculatedStyleValue::CalcProduct> const&, const Layout::Node& layout_node, float reference_for_percent);