system/serenity
system/serenity
1
0
Fork 0
mirror of https://github.com/SerenityOS/serenity synced 2024-10-07 00:19:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

LibWeb: Add support for viewport-relative length units (#3433)

Browse source 
We can now use vh, vw, vmax and vmin as length units in CSS.
This commit is contained in:
Jakob-Niklas See 2020-09-08 20:39:09 +02:00 committed by GitHub
parent d467a0ffef
commit dcc2c8a125
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 49 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
Libraries/LibWeb/CSS/Length.cpp
View file

@ -27,6 +27,7 @@
#include <LibWeb/CSS/Length.h>
#include <LibWeb/DOM/Document.h>
#include <LibWeb/HTML/HTMLHtmlElement.h>
#include <LibWeb/Page/Frame.h>
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();
case Type::Rem:
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:
ASSERT_NOT_REACHED();
}
@ -63,6 +78,14 @@ const char* Length::unit_name() const
return "%";
case Type::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();
}

15
Libraries/LibWeb/CSS/Length.h
View file

@ -42,6 +42,10 @@ public:
Ex,
Em,
Rem,
Vh,
Vw,
Vmax,
Vmin,
};
Length() { }
@ -85,7 +89,16 @@ public:
bool is_percentage() const { return m_type == Type::Percentage; }
bool is_auto() const { return m_type == Type::Auto; }
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; }
ALWAYS_INLINE float to_px(const LayoutNode& layout_node) const

12
Libraries/LibWeb/CSS/Parser/CSSParser.cpp
View file

@ -292,6 +292,18 @@ static CSS::Length parse_length(const CSS::ParsingContext& context, const String
} else if (view.ends_with("ex", CaseSensitivity::CaseInsensitive)) {
type = CSS::Length::Type::Ex;
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") {
type = CSS::Length::Type::Px;
value = 0;