LibWeb: Support parsing column-span

Author: https://github.com/samfry13
Commit: https://github.com/LadybirdBrowser/ladybird/commit/23b4367c9c8
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-span: none
 column-width: auto
 content: normal
 content-visibility: visible
@@ -124,7 +125,7 @@ grid-row-start: auto
 grid-template-areas: 
 grid-template-columns: 
 grid-template-rows: 
-height: 2142px
+height: 2159px
 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::ColumnSpan column_span() { return CSS::ColumnSpan::None; }
     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; }
@@ -419,6 +420,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::ColumnSpan const& column_span() const { return m_noninherited.column_span; }
     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; }
@@ -621,6 +623,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::ColumnSpan column_span { InitialValues::column_span() };
         CSS::Size column_width { InitialValues::column_width() };
         CSS::Size row_gap { InitialValues::row_gap() };
         Vector<Vector<String>> grid_template_areas { InitialValues::grid_template_areas() };
@@ -753,6 +756,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_span(CSS::ColumnSpan const& column_span) { m_noninherited.column_span = column_span; }
     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; }

Userland/Libraries/LibWeb/CSS/Enums.json

@@ -101,6 +101,10 @@
     "right",
     "both"
   ],
+  "column-span": [
+    "none",
+    "all"
+  ],
   "content-visibility": [
     "visible",
     "auto",

Userland/Libraries/LibWeb/CSS/Properties.json

@@ -960,6 +960,14 @@
     ],
     "percentages-resolve-to": "length"
   },
+  "column-span": {
+    "animation-type": "discrete",
+    "inherited": false,
+    "initial": "none",
+    "valid-types": [
+      "column-span"
+    ]
+  },
   "column-width": {
     "animation-type": "by-computed-value",
     "inherited": false,

Userland/Libraries/LibWeb/CSS/StyleProperties.cpp

@@ -692,6 +692,12 @@ Optional<CSS::Clear> StyleProperties::clear() const
     return keyword_to_clear(value->to_keyword());
 }
 
+Optional<CSS::ColumnSpan> StyleProperties::column_span() const
+{
+    auto value = property(CSS::PropertyID::ColumnSpan);
+    return keyword_to_column_span(value->to_keyword());
+}
+
 StyleProperties::ContentDataAndQuoteNestingLevel StyleProperties::content(DOM::Element& element, u32 initial_quote_nesting_level) const
 {
     auto value = property(CSS::PropertyID::Content);

Userland/Libraries/LibWeb/CSS/StyleProperties.h

@@ -75,6 +75,7 @@ public:
     CSS::Display display() const;
     Optional<CSS::Float> float_() const;
     Optional<CSS::Clear> clear() const;
+    Optional<CSS::ColumnSpan> column_span() const;
     struct ContentDataAndQuoteNestingLevel {
         CSS::ContentData content_data;
         u32 final_quote_nesting_level { 0 };

Userland/Libraries/LibWeb/Layout/Node.cpp

@@ -830,6 +830,9 @@ 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()));
 
+    if (auto column_span = computed_style.column_span(); column_span.has_value())
+        computed_values.set_column_span(column_span.value());
+
     computed_values.set_column_width(computed_style.size_value(CSS::PropertyID::ColumnWidth));
 
     computed_values.set_column_gap(computed_style.size_value(CSS::PropertyID::ColumnGap));