mirror of
https://github.com/RGBCube/serenity
synced 2025-07-24 19:57:41 +00:00
LibWeb: Add support for viewport-relative length units (#3433)
We can now use vh, vw, vmax and vmin as length units in CSS.
This commit is contained in:
parent
d467a0ffef
commit
dcc2c8a125
3 changed files with 49 additions and 1 deletions
|
@ -27,6 +27,7 @@
|
||||||
#include <LibWeb/CSS/Length.h>
|
#include <LibWeb/CSS/Length.h>
|
||||||
#include <LibWeb/DOM/Document.h>
|
#include <LibWeb/DOM/Document.h>
|
||||||
#include <LibWeb/HTML/HTMLHtmlElement.h>
|
#include <LibWeb/HTML/HTMLHtmlElement.h>
|
||||||
|
#include <LibWeb/Page/Frame.h>
|
||||||
|
|
||||||
namespace Web::CSS {
|
namespace Web::CSS {
|
||||||
|
|
||||||
|
@ -39,6 +40,20 @@ float Length::relative_length_to_px(const LayoutNode& layout_node) const
|
||||||
return m_value * layout_node.font_size();
|
return m_value * layout_node.font_size();
|
||||||
case Type::Rem:
|
case Type::Rem:
|
||||||
return m_value * layout_node.document().document_element()->layout_node()->font_size();
|
return m_value * layout_node.document().document_element()->layout_node()->font_size();
|
||||||
|
case Type::Vw:
|
||||||
|
return layout_node.document().frame()->viewport_rect().width() * (m_value / 100);
|
||||||
|
case Type::Vh:
|
||||||
|
return layout_node.document().frame()->viewport_rect().height() * (m_value / 100);
|
||||||
|
case Type::Vmin: {
|
||||||
|
auto viewport = layout_node.document().frame()->viewport_rect();
|
||||||
|
|
||||||
|
return min(viewport.width(), viewport.height()) * (m_value / 100);
|
||||||
|
}
|
||||||
|
case Type::Vmax: {
|
||||||
|
auto viewport = layout_node.document().frame()->viewport_rect();
|
||||||
|
|
||||||
|
return max(viewport.width(), viewport.height()) * (m_value / 100);
|
||||||
|
}
|
||||||
default:
|
default:
|
||||||
ASSERT_NOT_REACHED();
|
ASSERT_NOT_REACHED();
|
||||||
}
|
}
|
||||||
|
@ -63,6 +78,14 @@ const char* Length::unit_name() const
|
||||||
return "%";
|
return "%";
|
||||||
case Type::Undefined:
|
case Type::Undefined:
|
||||||
return "undefined";
|
return "undefined";
|
||||||
|
case Type::Vh:
|
||||||
|
return "vh";
|
||||||
|
case Type::Vw:
|
||||||
|
return "vw";
|
||||||
|
case Type::Vmax:
|
||||||
|
return "vmax";
|
||||||
|
case Type::Vmin:
|
||||||
|
return "vmin";
|
||||||
}
|
}
|
||||||
ASSERT_NOT_REACHED();
|
ASSERT_NOT_REACHED();
|
||||||
}
|
}
|
||||||
|
|
|
@ -42,6 +42,10 @@ public:
|
||||||
Ex,
|
Ex,
|
||||||
Em,
|
Em,
|
||||||
Rem,
|
Rem,
|
||||||
|
Vh,
|
||||||
|
Vw,
|
||||||
|
Vmax,
|
||||||
|
Vmin,
|
||||||
};
|
};
|
||||||
|
|
||||||
Length() { }
|
Length() { }
|
||||||
|
@ -85,7 +89,16 @@ 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::Ex || 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
|
||||||
|
|| m_type == Type::Vh
|
||||||
|
|| m_type == Type::Vw
|
||||||
|
|| m_type == Type::Vmax
|
||||||
|
|| m_type == Type::Vmin;
|
||||||
|
}
|
||||||
|
|
||||||
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
|
||||||
|
|
|
@ -292,6 +292,18 @@ static CSS::Length parse_length(const CSS::ParsingContext& context, const String
|
||||||
} else if (view.ends_with("ex", CaseSensitivity::CaseInsensitive)) {
|
} else if (view.ends_with("ex", CaseSensitivity::CaseInsensitive)) {
|
||||||
type = CSS::Length::Type::Ex;
|
type = CSS::Length::Type::Ex;
|
||||||
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.ends_with("vw", CaseSensitivity::CaseInsensitive)) {
|
||||||
|
type = CSS::Length::Type::Vw;
|
||||||
|
value = try_parse_float(view.substring_view(0, view.length() - 2));
|
||||||
|
} else if (view.ends_with("vh", CaseSensitivity::CaseInsensitive)) {
|
||||||
|
type = CSS::Length::Type::Vh;
|
||||||
|
value = try_parse_float(view.substring_view(0, view.length() - 2));
|
||||||
|
} else if (view.ends_with("vmax", CaseSensitivity::CaseInsensitive)) {
|
||||||
|
type = CSS::Length::Type::Vmax;
|
||||||
|
value = try_parse_float(view.substring_view(0, view.length() - 4));
|
||||||
|
} else if (view.ends_with("vmin", CaseSensitivity::CaseInsensitive)) {
|
||||||
|
type = CSS::Length::Type::Vmin;
|
||||||
|
value = try_parse_float(view.substring_view(0, view.length() - 4));
|
||||||
} 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