LibWeb: Add cm, in, mm and Q CSS units

Libraries/LibWeb/CSS/Length.cpp

@@ -62,10 +62,18 @@ float Length::relative_length_to_px(const LayoutNode& layout_node) const
 const char* Length::unit_name() const
 {
     switch (m_type) {
+    case Type::Cm:
+        return "cm";
+    case Type::In:
+        return "in";
     case Type::Px:
         return "px";
     case Type::Pt:
         return "pt";
+    case Type::Mm:
+        return "mm";
+    case Type::Q:
+        return "Q";
     case Type::Ex:
         return "ex";
     case Type::Em:

Libraries/LibWeb/CSS/Length.h

@@ -37,6 +37,10 @@ public:
         Undefined,
         Percentage,
         Auto,
+        Cm,
+        In,
+        Mm,
+        Q,
         Px,
         Pt,
         Ex,
@@ -88,7 +92,17 @@ public:
     bool is_undefined() const { return m_type == Type::Undefined; }
     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_absolute() const
+    {
+        return m_type == Type::Cm
+            || m_type == Type::In
+            || m_type == Type::Mm
+            || m_type == Type::Px
+            || m_type == Type::Pt
+            || m_type == Type::Q;
+    }
+
     bool is_relative() const
     {
         return m_type == Type::Ex
@@ -108,10 +122,18 @@ public:
         switch (m_type) {
         case Type::Auto:
             return 0;
+        case Type::Cm:
+            return m_value * (96.0f / 2.54f); // 1cm = 96px/2.54
+        case Type::In:
+            return m_value * 96.0f; // 1in = 2.54 cm = 96px
         case Type::Px:
-            return m_value;
+            return m_value; // 1px = 1/96th of 1in
         case Type::Pt:
-            return m_value * 1.33333333f;
+            return m_value * 1.33333333f; // 1pt = 1/72th of 1in
+        case Type::Mm:
+            return m_value * (0.1f * (96.0f / 2.54f)); // 1mm = 1/10th of 1cm
+        case Type::Q:
+            return m_value * (0.025f * (96.0f / 2.54f)); // 1Q = 1/40th of 1cm
         case Type::Undefined:
         case Type::Percentage:
         default:

Libraries/LibWeb/CSS/Parser/CSSParser.cpp

@@ -284,6 +284,9 @@ static CSS::Length parse_length(const CSS::ParsingContext& context, const String
     } else if (view.ends_with("pt", CaseSensitivity::CaseInsensitive)) {
         type = CSS::Length::Type::Pt;
         value = try_parse_float(view.substring_view(0, view.length() - 2));
+    } else if (view.ends_with("mm", CaseSensitivity::CaseInsensitive)) {
+        type = CSS::Length::Type::Mm;
+        value = try_parse_float(view.substring_view(0, view.length() - 2));
     } else if (view.ends_with("rem", CaseSensitivity::CaseInsensitive)) {
         type = CSS::Length::Type::Rem;
         value = try_parse_float(view.substring_view(0, view.length() - 3));
@@ -305,6 +308,15 @@ static CSS::Length parse_length(const CSS::ParsingContext& context, const String
     } 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.ends_with("cm", CaseSensitivity::CaseInsensitive)) {
+        type = CSS::Length::Type::Cm;
+        value = try_parse_float(view.substring_view(0, view.length() - 2));
+    } else if (view.ends_with("in", CaseSensitivity::CaseInsensitive)) {
+        type = CSS::Length::Type::In;
+        value = try_parse_float(view.substring_view(0, view.length() - 2));
+    } else if (view.ends_with("Q", CaseSensitivity::CaseInsensitive)) {
+        type = CSS::Length::Type::Q;
+        value = try_parse_float(view.substring_view(0, view.length() - 1));
     } else if (view == "0") {
         type = CSS::Length::Type::Px;
         value = 0;