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

We can now use vh, vw, vmax and vmin as length units in CSS.

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();
 }

Libraries/LibWeb/CSS/Length.h

@@ -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

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;