summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--Userland/Libraries/LibWeb/CSS/ComputedValues.h8
-rw-r--r--Userland/Libraries/LibWeb/CSS/Properties.json94
-rw-r--r--Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp4
-rw-r--r--Userland/Libraries/LibWeb/CSS/StyleComputer.cpp22
-rw-r--r--Userland/Libraries/LibWeb/Layout/Node.cpp3
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