RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-05-31 00:08:11 +00:00
Code Issues Activity Actions

LibWeb: Parse CSS gap property

Browse source 
Including the legacy grid-gap, grid-column-gap and grid-row-gap
properties.
This commit is contained in:
martinfalisse 2022-11-06 12:42:22 +01:00 • committed by Andreas Kling
parent e00b16460c
commit 9e6612c49b
5 changed files with 131 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

8
Userland/Libraries/LibWeb/CSS/ComputedValues.h
View file

@ -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; }

94
Userland/Libraries/LibWeb/CSS/Properties.json
View file

@ -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,

4
Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp
View file

@ -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: {

22
Userland/Libraries/LibWeb/CSS/StyleComputer.cpp
View file

@ -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);
}

3
Userland/Libraries/LibWeb/Layout/Node.cpp
View file

@ -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