mirror of
https://github.com/RGBCube/serenity
synced 2025-07-24 21:47:43 +00:00
LibWeb: Handle CSS "ex" lengths (relative to font x-height)
These are pretty rare, but they do come up in some places and it's not hard to support. The Gfx::Font information is approximate (and bad) but we can fix that separately.
This commit is contained in:
parent
0bbced444b
commit
498845ea2f
3 changed files with 9 additions and 1 deletions
|
@ -33,6 +33,8 @@ namespace Web::CSS {
|
||||||
float Length::relative_length_to_px(const LayoutNode& layout_node) const
|
float Length::relative_length_to_px(const LayoutNode& layout_node) const
|
||||||
{
|
{
|
||||||
switch (m_type) {
|
switch (m_type) {
|
||||||
|
case Type::Ex:
|
||||||
|
return m_value * layout_node.specified_style().font().x_height();
|
||||||
case Type::Em:
|
case Type::Em:
|
||||||
return m_value * layout_node.font_size();
|
return m_value * layout_node.font_size();
|
||||||
case Type::Rem:
|
case Type::Rem:
|
||||||
|
@ -49,6 +51,8 @@ const char* Length::unit_name() const
|
||||||
return "px";
|
return "px";
|
||||||
case Type::Pt:
|
case Type::Pt:
|
||||||
return "pt";
|
return "pt";
|
||||||
|
case Type::Ex:
|
||||||
|
return "ex";
|
||||||
case Type::Em:
|
case Type::Em:
|
||||||
return "em";
|
return "em";
|
||||||
case Type::Rem:
|
case Type::Rem:
|
||||||
|
|
|
@ -39,6 +39,7 @@ public:
|
||||||
Auto,
|
Auto,
|
||||||
Px,
|
Px,
|
||||||
Pt,
|
Pt,
|
||||||
|
Ex,
|
||||||
Em,
|
Em,
|
||||||
Rem,
|
Rem,
|
||||||
};
|
};
|
||||||
|
@ -84,7 +85,7 @@ public:
|
||||||
bool is_percentage() const { return m_type == Type::Percentage; }
|
bool is_percentage() const { return m_type == Type::Percentage; }
|
||||||
bool is_auto() const { return m_type == Type::Auto; }
|
bool is_auto() const { return m_type == Type::Auto; }
|
||||||
bool is_absolute() const { return m_type == Type::Px || m_type == Type::Pt; }
|
bool is_absolute() const { return m_type == Type::Px || m_type == Type::Pt; }
|
||||||
bool is_relative() const { return m_type == Type::Em || m_type == Type::Rem; }
|
bool is_relative() const { return m_type == Type::Ex || m_type == Type::Em || m_type == Type::Rem; }
|
||||||
|
|
||||||
float raw_value() const { return m_value; }
|
float raw_value() const { return m_value; }
|
||||||
ALWAYS_INLINE float to_px(const LayoutNode& layout_node) const
|
ALWAYS_INLINE float to_px(const LayoutNode& layout_node) const
|
||||||
|
|
|
@ -284,6 +284,9 @@ static CSS::Length parse_length(const CSS::ParsingContext& context, const String
|
||||||
} else if (view.to_string().to_lowercase().ends_with("em")) {
|
} else if (view.to_string().to_lowercase().ends_with("em")) {
|
||||||
type = CSS::Length::Type::Em;
|
type = CSS::Length::Type::Em;
|
||||||
value = try_parse_float(view.substring_view(0, view.length() - 2));
|
value = try_parse_float(view.substring_view(0, view.length() - 2));
|
||||||
|
} else if (view.to_string().to_lowercase().ends_with("ex")) {
|
||||||
|
type = CSS::Length::Type::Ex;
|
||||||
|
value = try_parse_float(view.substring_view(0, view.length() - 2));
|
||||||
} else if (view == "0") {
|
} else if (view == "0") {
|
||||||
type = CSS::Length::Type::Px;
|
type = CSS::Length::Type::Px;
|
||||||
value = 0;
|
value = 0;
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue