LibWeb: Implement support for parsing CSS column-count property

Author: https://github.com/kalenikaliaksandr
Commit: https://github.com/SerenityOS/serenity/commit/0f75d0611f
Pull-request: https://github.com/SerenityOS/serenity/pull/20974
Reviewed-by: https://github.com/AtkinsSJ

Userland/Libraries/LibWeb/CSS/ColumnCount.h

@@ -0,0 +1,43 @@
+/*
+ * Copyright (c) 2023, Aliaksandr Kalenik <kalenik.aliaksandr@gmail.com>
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#pragma once
+
+namespace Web::CSS {
+
+class ColumnCount {
+public:
+    enum class Type {
+        Auto,
+        Integer
+    };
+
+    static ColumnCount make_auto()
+    {
+        return ColumnCount();
+    }
+
+    static ColumnCount make_integer(int value)
+    {
+        return ColumnCount(value);
+    }
+
+    bool is_auto() const { return m_type == Type::Auto; }
+    int value() const { return *m_value; }
+
+private:
+    ColumnCount(int value)
+        : m_type(Type::Integer)
+        , m_value(value)
+    {
+    }
+    ColumnCount() {};
+
+    Type m_type { Type::Auto };
+    Optional<int> m_value;
+};
+
+}

Userland/Libraries/LibWeb/CSS/ComputedValues.h

@@ -11,6 +11,7 @@
 #include <LibWeb/CSS/BackdropFilter.h>
 #include <LibWeb/CSS/CalculatedOr.h>
 #include <LibWeb/CSS/Clip.h>
+#include <LibWeb/CSS/ColumnCount.h>
 #include <LibWeb/CSS/Display.h>
 #include <LibWeb/CSS/GridTrackPlacement.h>
 #include <LibWeb/CSS/GridTrackSize.h>
@@ -107,6 +108,7 @@ public:
     static CSS::GridTrackPlacement grid_row_end() { return CSS::GridTrackPlacement::make_auto(); }
     static CSS::GridTrackPlacement grid_row_start() { return CSS::GridTrackPlacement::make_auto(); }
     static CSS::GridAutoFlow grid_auto_flow() { return CSS::GridAutoFlow {}; }
+    static ColumnCount column_count() { return ColumnCount::make_auto(); }
     static CSS::Size column_gap() { return CSS::Size::make_auto(); }
     static CSS::Size row_gap() { return CSS::Size::make_auto(); }
     static CSS::BorderCollapse border_collapse() { return CSS::BorderCollapse::Separate; }
@@ -289,6 +291,7 @@ public:
     CSS::GridTrackPlacement const& grid_column_start() const { return m_noninherited.grid_column_start; }
     CSS::GridTrackPlacement const& grid_row_end() const { return m_noninherited.grid_row_end; }
     CSS::GridTrackPlacement const& grid_row_start() const { return m_noninherited.grid_row_start; }
+    CSS::ColumnCount column_count() const { return m_noninherited.column_count; }
     CSS::Size const& column_gap() const { return m_noninherited.column_gap; }
     CSS::Size const& row_gap() const { return m_noninherited.row_gap; }
     CSS::BorderCollapse border_collapse() const { return m_inherited.border_collapse; }
@@ -448,6 +451,7 @@ protected:
         CSS::GridTrackPlacement grid_column_start { InitialValues::grid_column_start() };
         CSS::GridTrackPlacement grid_row_end { InitialValues::grid_row_end() };
         CSS::GridTrackPlacement grid_row_start { InitialValues::grid_row_start() };
+        CSS::ColumnCount column_count { InitialValues::column_count() };
         CSS::Size column_gap { InitialValues::column_gap() };
         CSS::Size row_gap { InitialValues::row_gap() };
         Vector<Vector<String>> grid_template_areas { InitialValues::grid_template_areas() };
@@ -553,6 +557,7 @@ public:
     void set_grid_column_start(CSS::GridTrackPlacement value) { m_noninherited.grid_column_start = value; }
     void set_grid_row_end(CSS::GridTrackPlacement value) { m_noninherited.grid_row_end = value; }
     void set_grid_row_start(CSS::GridTrackPlacement value) { m_noninherited.grid_row_start = value; }
+    void set_column_count(CSS::ColumnCount value) { m_noninherited.column_count = value; }
     void set_column_gap(CSS::Size const& column_gap) { m_noninherited.column_gap = column_gap; }
     void set_row_gap(CSS::Size const& row_gap) { m_noninherited.row_gap = row_gap; }
     void set_border_collapse(CSS::BorderCollapse const& border_collapse) { m_inherited.border_collapse = border_collapse; }

Userland/Libraries/LibWeb/CSS/Properties.json

@@ -687,6 +687,16 @@
     ],
     "percentages-resolve-to": "length"
   },
+  "column-count": {
+    "inherited": false,
+    "initial": "auto",
+    "valid-types": [
+      "integer [1,∞]"
+    ],
+    "valid-identifiers": [
+      "auto"
+    ]
+  },
   "content": {
     "inherited": false,
     "initial": "normal",

Userland/Libraries/LibWeb/Layout/Node.cpp

@@ -12,6 +12,7 @@
 #include <LibWeb/CSS/StyleValues/BorderRadiusStyleValue.h>
 #include <LibWeb/CSS/StyleValues/EdgeStyleValue.h>
 #include <LibWeb/CSS/StyleValues/IdentifierStyleValue.h>
+#include <LibWeb/CSS/StyleValues/IntegerStyleValue.h>
 #include <LibWeb/CSS/StyleValues/LengthStyleValue.h>
 #include <LibWeb/CSS/StyleValues/NumberStyleValue.h>
 #include <LibWeb/CSS/StyleValues/PercentageStyleValue.h>
@@ -758,6 +759,9 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style)
     if (auto text_anchor = computed_style.text_anchor(); text_anchor.has_value())
         computed_values.set_text_anchor(*text_anchor);
 
+    if (auto column_count = computed_style.property(CSS::PropertyID::ColumnCount); column_count->is_integer())
+        computed_values.set_column_count(CSS::ColumnCount::make_integer(column_count->as_integer().integer()));
+
     computed_values.set_column_gap(computed_style.size_value(CSS::PropertyID::ColumnGap));
     computed_values.set_row_gap(computed_style.size_value(CSS::PropertyID::RowGap));