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

We can now use vh, vw, vmax and vmin as length units in CSS.
SerenityOS · Sep 8, 2020 · dcc2c8a · dcc2c8a
1 parent d467a0f
commit dcc2c8a
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 1 deletion.
diff --git a/Libraries/LibWeb/CSS/Length.cpp b/Libraries/LibWeb/CSS/Length.cpp
@@ -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();
 }

diff --git a/Libraries/LibWeb/CSS/Length.h b/Libraries/LibWeb/CSS/Length.h
@@ -42,6 +42,10 @@ class Length {
  Ex,
  Em,
  Rem,
+ Vh,
+ Vw,
+ Vmax,
+ Vmin,
  };
 
  Length() { }
@@ -85,7 +89,16 @@ class Length {
  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

diff --git a/Libraries/LibWeb/CSS/Parser/CSSParser.cpp b/Libraries/LibWeb/CSS/Parser/CSSParser.cpp
@@ -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;