diff options
-rw-r--r-- | Userland/Libraries/LibWeb/CSS/ComputedValues.h | 8 | ||||
-rw-r--r-- | Userland/Libraries/LibWeb/CSS/Properties.json | 94 | ||||
-rw-r--r-- | Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp | 4 | ||||
-rw-r--r-- | Userland/Libraries/LibWeb/CSS/StyleComputer.cpp | 22 | ||||
-rw-r--r-- | Userland/Libraries/LibWeb/Layout/Node.cpp | 3 |
5 files changed, 131 insertions, 0 deletions
diff --git a/Userland/Libraries/LibWeb/CSS/ComputedValues.h b/Userland/Libraries/LibWeb/CSS/ComputedValues.h index 7fc77ee7d7..9903e30c92 100644 --- a/Userland/Libraries/LibWeb/CSS/ComputedValues.h +++ b/Userland/Libraries/LibWeb/CSS/ComputedValues.h @@ -70,6 +70,8 @@ public: static CSS::GridTrackPlacement grid_column_start() { return CSS::GridTrackPlacement::make_auto(); } static CSS::GridTrackPlacement grid_row_end() { return CSS::GridTrackPlacement::make_auto(); } static CSS::GridTrackPlacement grid_row_start() { return CSS::GridTrackPlacement::make_auto(); } + static CSS::Size column_gap() { return CSS::Size::make_auto(); } + static CSS::Size row_gap() { return CSS::Size::make_auto(); } }; struct BackgroundLayerData { @@ -188,6 +190,8 @@ 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::Size const& column_gap() const { return m_noninherited.column_gap; } + CSS::Size const& row_gap() const { return m_noninherited.row_gap; } CSS::LengthBox const& inset() const { return m_noninherited.inset; } const CSS::LengthBox& margin() const { return m_noninherited.margin; } @@ -310,6 +314,8 @@ 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::Size column_gap { InitialValues::column_gap() }; + CSS::Size row_gap { InitialValues::row_gap() }; } m_noninherited; }; @@ -388,6 +394,8 @@ 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_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_fill(Color value) { m_inherited.fill = value; } void set_stroke(Color value) { m_inherited.stroke = value; } diff --git a/Userland/Libraries/LibWeb/CSS/Properties.json b/Userland/Libraries/LibWeb/CSS/Properties.json index 7a96af036e..328fce3367 100644 --- a/Userland/Libraries/LibWeb/CSS/Properties.json +++ b/Userland/Libraries/LibWeb/CSS/Properties.json @@ -512,6 +512,20 @@ "hashless-hex-color" ] }, + "column-gap": { + "inherited": false, + "initial": "auto", + "valid-types": [ + "length [0,∞]", + "percentage [0,∞]" + ], + "valid-identifiers": [ + "auto" + ], + "quirks": [ + "unitless-length" + ] + }, "content": { "inherited": false, "initial": "normal", @@ -713,6 +727,25 @@ "normal" ] }, + "gap": { + "inherited": false, + "initial": "auto", + "valid-types": [ + "length [0,∞]", + "percentage [0,∞]" + ], + "max-values": 2, + "valid-identifiers": [ + "auto" + ], + "quirks": [ + "unitless-length" + ], + "longhands": [ + "row-gap", + "column-gap" + ] + }, "grid-column": { "inherited": false, "initial": "auto", @@ -737,6 +770,20 @@ "string" ] }, + "grid-column-gap": { + "inherited": false, + "initial": "auto", + "valid-types": [ + "length [0,∞]", + "percentage [0,∞]" + ], + "valid-identifiers": [ + "auto" + ], + "quirks": [ + "unitless-length" + ] + }, "grid-column-start": { "inherited": false, "initial": "auto", @@ -747,6 +794,25 @@ "string" ] }, + "grid-gap": { + "inherited": false, + "initial": "auto", + "valid-types": [ + "length [0,∞]", + "percentage [0,∞]" + ], + "max-values": 2, + "valid-identifiers": [ + "auto" + ], + "quirks": [ + "unitless-length" + ], + "longhands": [ + "grid-row-gap", + "grid-column-gap" + ] + }, "grid-row": { "inherited": false, "initial": "auto", @@ -771,6 +837,20 @@ "string" ] }, + "grid-row-gap": { + "inherited": false, + "initial": "auto", + "valid-types": [ + "length [0,∞]", + "percentage [0,∞]" + ], + "valid-identifiers": [ + "auto" + ], + "quirks": [ + "unitless-length" + ] + }, "grid-row-start": { "inherited": false, "initial": "auto", @@ -1216,6 +1296,20 @@ "unitless-length" ] }, + "row-gap": { + "inherited": false, + "initial": "auto", + "valid-types": [ + "length [0,∞]", + "percentage [0,∞]" + ], + "valid-identifiers": [ + "auto" + ], + "quirks": [ + "unitless-length" + ] + }, "stroke": { "affects-layout": false, "inherited": true, diff --git a/Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp b/Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp index fb25b93968..4975f1b8c6 100644 --- a/Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp +++ b/Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp @@ -299,6 +299,8 @@ RefPtr<StyleValue> ResolvedCSSStyleDeclaration::style_value_for_property(Layout: return RectStyleValue::create(layout_node.computed_values().clip().to_rect()); case CSS::PropertyID::Color: return ColorStyleValue::create(layout_node.computed_values().color()); + case CSS::PropertyID::ColumnGap: + return style_value_for_size(layout_node.computed_values().column_gap()); case CSS::PropertyID::Cursor: return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().cursor())); case CSS::PropertyID::Display: @@ -425,6 +427,8 @@ RefPtr<StyleValue> ResolvedCSSStyleDeclaration::style_value_for_property(Layout: return style_value_for_length_percentage(layout_node.computed_values().padding().top()); case CSS::PropertyID::Position: return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().position())); + case CSS::PropertyID::RowGap: + return style_value_for_size(layout_node.computed_values().row_gap()); case CSS::PropertyID::TextAlign: return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().text_align())); case CSS::PropertyID::TextDecorationLine: { diff --git a/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp b/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp index 7914d0b796..037c3d1a07 100644 --- a/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp +++ b/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp @@ -544,6 +544,28 @@ static void set_property_expanding_shorthands(StyleProperties& style, CSS::Prope return; } + if (property_id == CSS::PropertyID::Gap || property_id == CSS::PropertyID::GridGap) { + if (value.is_value_list()) { + auto const& values_list = value.as_value_list(); + style.set_property(CSS::PropertyID::RowGap, values_list.values()[0]); + style.set_property(CSS::PropertyID::ColumnGap, values_list.values()[1]); + return; + } + style.set_property(CSS::PropertyID::RowGap, value); + style.set_property(CSS::PropertyID::ColumnGap, value); + return; + } + + if (property_id == CSS::PropertyID::RowGap || property_id == CSS::PropertyID::GridRowGap) { + style.set_property(CSS::PropertyID::RowGap, value); + return; + } + + if (property_id == CSS::PropertyID::ColumnGap || property_id == CSS::PropertyID::GridColumnGap) { + style.set_property(CSS::PropertyID::ColumnGap, value); + return; + } + style.set_property(property_id, value); } diff --git a/Userland/Libraries/LibWeb/Layout/Node.cpp b/Userland/Libraries/LibWeb/Layout/Node.cpp index 951d11578c..b836810654 100644 --- a/Userland/Libraries/LibWeb/Layout/Node.cpp +++ b/Userland/Libraries/LibWeb/Layout/Node.cpp @@ -573,6 +573,9 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style) computed_values.set_stroke_width(CSS::Length::make_px(stroke_width->to_number())); else computed_values.set_stroke_width(stroke_width->to_length()); + + computed_values.set_column_gap(computed_style.size_value(CSS::PropertyID::ColumnGap)); + computed_values.set_row_gap(computed_style.size_value(CSS::PropertyID::RowGap)); } bool Node::is_root_element() const |