LibWeb: Support parsing column-width

Author: https://github.com/samfry13 🔰
Commit: https://github.com/LadybirdBrowser/ladybird/commit/c113d3fae9a
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/1156
Reviewed-by: https://github.com/AtkinsSJ ✅

Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt

@@ -86,6 +86,7 @@ clip-rule: nonzero
 color: rgb(0, 0, 0)
 column-count: auto
 column-gap: auto
+column-width: auto
 content: normal
 content-visibility: visible
 counter-increment: none
@@ -123,7 +124,7 @@ grid-row-start: auto
 grid-template-areas: 
 grid-template-columns: 
 grid-template-rows: 
-height: 2125px
+height: 2142px
 image-rendering: auto
 inline-size: auto
 inset-block-end: auto

Userland/Libraries/LibWeb/CSS/ComputedValues.h

@@ -165,6 +165,7 @@ public:
     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 column_width() { return CSS::Size::make_auto(); }
     static CSS::Size row_gap() { return CSS::Size::make_auto(); }
     static CSS::BorderCollapse border_collapse() { return CSS::BorderCollapse::Separate; }
     static Vector<Vector<String>> grid_template_areas() { return {}; }
@@ -418,6 +419,7 @@ public:
     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& column_width() const { return m_noninherited.column_width; }
     CSS::Size const& row_gap() const { return m_noninherited.row_gap; }
     CSS::BorderCollapse border_collapse() const { return m_inherited.border_collapse; }
     Vector<Vector<String>> const& grid_template_areas() const { return m_noninherited.grid_template_areas; }
@@ -619,6 +621,7 @@ protected:
         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 column_width { InitialValues::column_width() };
         CSS::Size row_gap { InitialValues::row_gap() };
         Vector<Vector<String>> grid_template_areas { InitialValues::grid_template_areas() };
         Gfx::Color stop_color { InitialValues::stop_color() };
@@ -750,6 +753,7 @@ public:
     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_column_width(CSS::Size const& column_width) { m_noninherited.column_width = column_width; }
     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; }
     void set_grid_template_areas(Vector<Vector<String>> const& grid_template_areas) { m_noninherited.grid_template_areas = grid_template_areas; }

Userland/Libraries/LibWeb/CSS/Properties.json

@@ -960,6 +960,17 @@
     ],
     "percentages-resolve-to": "length"
   },
+  "column-width": {
+    "animation-type": "by-computed-value",
+    "inherited": false,
+    "initial": "auto",
+    "valid-types": [
+      "length [0,∞]"
+    ],
+    "valid-identifiers": [
+      "auto"
+    ]
+  },
   "content": {
     "animation-type": "discrete",
     "inherited": false,

Userland/Libraries/LibWeb/Layout/Node.cpp

@@ -830,6 +830,8 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style)
     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_width(computed_style.size_value(CSS::PropertyID::ColumnWidth));
+
     computed_values.set_column_gap(computed_style.size_value(CSS::PropertyID::ColumnGap));
     computed_values.set_row_gap(computed_style.size_value(CSS::PropertyID::RowGap));