system/serenity
system/serenity
1
0
Fork 0
mirror of https://github.com/SerenityOS/serenity synced 2024-10-14 20:03:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

LibWeb: Parse grid-area CSS property

Browse source
This commit is contained in:
martinfalisse 2023-01-16 19:02:39 +01:00 committed by Andreas Kling
parent a6548c4d80
commit 9bc001f410
10 changed files with 220 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp
View file

@ -6292,6 +6292,82 @@ RefPtr<StyleValue> Parser::parse_grid_track_placement_shorthand_value(Vector<Com
return {};
}
RefPtr<StyleValue> Parser::parse_grid_area_shorthand_value(Vector<ComponentValue> const& component_values)
{
auto tokens = TokenStream { component_values };
Token current_token;
auto parse_placement_tokens = [&](Vector<ComponentValue>& placement_tokens, bool check_for_delimiter = true) -> void {
current_token = tokens.next_token().token();
while (true) {
if (check_for_delimiter && current_token.is(Token::Type::Delim) && current_token.delim() == "/"sv)
break;
placement_tokens.append(current_token);
tokens.skip_whitespace();
if (!tokens.has_next_token())
break;
current_token = tokens.next_token().token();
}
};
Vector<ComponentValue> row_start_placement_tokens;
parse_placement_tokens(row_start_placement_tokens);
Vector<ComponentValue> column_start_placement_tokens;
if (tokens.has_next_token())
parse_placement_tokens(column_start_placement_tokens);
Vector<ComponentValue> row_end_placement_tokens;
if (tokens.has_next_token())
parse_placement_tokens(row_end_placement_tokens);
Vector<ComponentValue> column_end_placement_tokens;
if (tokens.has_next_token())
parse_placement_tokens(column_end_placement_tokens, false);
// https://www.w3.org/TR/css-grid-2/#placement-shorthands
// The grid-area property is a shorthand for grid-row-start, grid-column-start, grid-row-end and
// grid-column-end.
auto row_start_style_value = parse_grid_track_placement(row_start_placement_tokens);
auto column_start_style_value = parse_grid_track_placement(column_start_placement_tokens);
auto row_end_style_value = parse_grid_track_placement(row_end_placement_tokens);
auto column_end_style_value = parse_grid_track_placement(column_end_placement_tokens);
// If four <grid-line> values are specified, grid-row-start is set to the first value, grid-column-start
// is set to the second value, grid-row-end is set to the third value, and grid-column-end is set to the
// fourth value.
auto row_start = GridTrackPlacement::make_auto();
auto column_start = GridTrackPlacement::make_auto();
auto row_end = GridTrackPlacement::make_auto();
auto column_end = GridTrackPlacement::make_auto();
if (row_start_style_value)
row_start = row_start_style_value.release_nonnull()->as_grid_track_placement().grid_track_placement();
// When grid-column-start is omitted, if grid-row-start is a <custom-ident>, all four longhands are set to
// that value. Otherwise, it is set to auto.
if (column_start_style_value)
column_start = column_start_style_value.release_nonnull()->as_grid_track_placement().grid_track_placement();
else
column_start = row_start;
// When grid-row-end is omitted, if grid-row-start is a <custom-ident>, grid-row-end is set to that
// <custom-ident>; otherwise, it is set to auto.
if (row_end_style_value)
row_end = row_end_style_value.release_nonnull()->as_grid_track_placement().grid_track_placement();
else
row_end = column_start;
// When grid-column-end is omitted, if grid-column-start is a <custom-ident>, grid-column-end is set to
// that <custom-ident>; otherwise, it is set to auto.
if (column_end_style_value)
column_end = column_end_style_value.release_nonnull()->as_grid_track_placement().grid_track_placement();
else
column_end = row_end;
return GridAreaShorthandStyleValue::create(row_start, column_start, row_end, column_end);
}
RefPtr<StyleValue> Parser::parse_grid_template_areas_value(Vector<ComponentValue> const& component_values)
{
Vector<Vector<String>> grid_area_rows;
@ -6446,6 +6522,10 @@ Parser::ParseErrorOr<NonnullRefPtr<StyleValue>> Parser::parse_css_value(Property
if (auto parsed_value = parse_grid_track_placement_shorthand_value(component_values))
return parsed_value.release_nonnull();
return ParseError::SyntaxError;
case PropertyID::GridArea:
if (auto parsed_value = parse_grid_area_shorthand_value(component_values))
return parsed_value.release_nonnull();
return ParseError::SyntaxError;
case PropertyID::GridTemplateAreas:
if (auto parsed_value = parse_grid_template_areas_value(component_values))
return parsed_value.release_nonnull();

1
Userland/Libraries/LibWeb/CSS/Parser/Parser.h
View file

@ -316,6 +316,7 @@ private:
RefPtr<StyleValue> parse_grid_track_placement(Vector<ComponentValue> const&);
RefPtr<StyleValue> parse_grid_track_placement_shorthand_value(Vector<ComponentValue> const&);
RefPtr<StyleValue> parse_grid_template_areas_value(Vector<ComponentValue> const&);
RefPtr<StyleValue> parse_grid_area_shorthand_value(Vector<ComponentValue> const&);
// calc() parsing, according to https://www.w3.org/TR/css-values-3/#calc-syntax
OwnPtr<CalculatedStyleValue::CalcSum> parse_calc_sum(TokenStream<ComponentValue>&);

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

@ -740,6 +740,22 @@
"column-gap"
]
},
"grid-area": {
"inherited": false,
"initial": "auto",
"valid-identifiers": [
"auto"
],
"valid-types": [
"string"
],
"longhands": [
"grid-column-end",
"grid-column-start",
"grid-row-end",
"grid-row-start"
]
},
"grid-column": {
"inherited": false,
"initial": "auto",

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

@ -332,6 +332,34 @@ RefPtr<StyleValue> ResolvedCSSStyleDeclaration::style_value_for_property(Layout:
return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().flex_wrap()));
case CSS::PropertyID::Float:
return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().float_()));
case CSS::PropertyID::GridArea: {
auto maybe_grid_row_start = property(CSS::PropertyID::GridRowStart);
auto maybe_grid_column_start = property(CSS::PropertyID::GridColumnStart);
auto maybe_grid_row_end = property(CSS::PropertyID::GridRowEnd);
auto maybe_grid_column_end = property(CSS::PropertyID::GridColumnEnd);
RefPtr<GridTrackPlacementStyleValue> grid_row_start, grid_column_start, grid_row_end, grid_column_end;
if (maybe_grid_row_start.has_value()) {
VERIFY(maybe_grid_row_start.value().value->is_grid_track_placement());
grid_row_start = maybe_grid_row_start.value().value->as_grid_track_placement();
}
if (maybe_grid_column_start.has_value()) {
VERIFY(maybe_grid_column_start.value().value->is_grid_track_placement());
grid_column_start = maybe_grid_column_start.value().value->as_grid_track_placement();
}
if (maybe_grid_row_end.has_value()) {
VERIFY(maybe_grid_row_end.value().value->is_grid_track_placement());
grid_row_end = maybe_grid_row_end.value().value->as_grid_track_placement();
}
if (maybe_grid_column_end.has_value()) {
VERIFY(maybe_grid_column_end.value().value->is_grid_track_placement());
grid_column_end = maybe_grid_column_end.value().value->as_grid_track_placement();
}
return GridAreaShorthandStyleValue::create(
grid_row_start.release_nonnull(),
grid_column_start.release_nonnull(),
grid_row_end.release_nonnull(),
grid_column_end.release_nonnull());
}
case CSS::PropertyID::GridColumn: {
auto maybe_grid_column_end = property(CSS::PropertyID::GridColumnEnd);
auto maybe_grid_column_start = property(CSS::PropertyID::GridColumnStart);

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

@ -520,6 +520,22 @@ static void set_property_expanding_shorthands(StyleProperties& style, CSS::Prope
return;
}
if (property_id == CSS::PropertyID::GridArea) {
if (value.is_grid_area_shorthand()) {
auto const& shorthand = value.as_grid_area_shorthand();
style.set_property(CSS::PropertyID::GridRowStart, shorthand.row_start());
style.set_property(CSS::PropertyID::GridColumnStart, shorthand.column_start());
style.set_property(CSS::PropertyID::GridRowEnd, shorthand.row_end());
style.set_property(CSS::PropertyID::GridColumnEnd, shorthand.column_end());
return;
}
style.set_property(CSS::PropertyID::GridRowStart, value);
style.set_property(CSS::PropertyID::GridColumnStart, value);
style.set_property(CSS::PropertyID::GridRowEnd, value);
style.set_property(CSS::PropertyID::GridColumnEnd, value);
return;
}
if (property_id == CSS::PropertyID::GridColumn) {
if (value.is_grid_track_placement_shorthand()) {
auto const& shorthand = value.as_grid_track_placement_shorthand();

6
Userland/Libraries/LibWeb/CSS/StyleProperties.cpp
View file

@ -751,4 +751,10 @@ Vector<Vector<String>> StyleProperties::grid_template_areas() const
return value->as_grid_template_area().grid_template_area();
}
String StyleProperties::grid_area() const
{
auto value = property(CSS::PropertyID::GridArea);
return value->as_string().to_string().release_value_but_fixme_should_propagate_errors();
}
}

1
Userland/Libraries/LibWeb/CSS/StyleProperties.h
View file

@ -92,6 +92,7 @@ public:
CSS::GridTrackPlacement grid_row_start() const;
Optional<CSS::BorderCollapse> border_collapse() const;
Vector<Vector<String>> grid_template_areas() const;
String grid_area() const;
Vector<CSS::Transformation> transformations() const;
CSS::TransformOrigin transform_origin() const;

31
Userland/Libraries/LibWeb/CSS/StyleValue.cpp
View file

@ -140,6 +140,12 @@ GridTrackPlacementShorthandStyleValue const& StyleValue::as_grid_track_placement
return static_cast<GridTrackPlacementShorthandStyleValue const&>(*this);
}
GridAreaShorthandStyleValue const& StyleValue::as_grid_area_shorthand() const
{
VERIFY(is_grid_area_shorthand());
return static_cast<GridAreaShorthandStyleValue const&>(*this);
}
GridTemplateAreaStyleValue const& StyleValue::as_grid_template_area() const
{
VERIFY(is_grid_template_area());
@ -1427,6 +1433,31 @@ bool GridTrackPlacementShorthandStyleValue::equals(StyleValue const& other) cons
&& m_end->equals(typed_other.m_end);
}
ErrorOr<String> GridAreaShorthandStyleValue::to_string() const
{
StringBuilder builder;
if (!m_row_start->as_grid_track_placement().grid_track_placement().is_auto())
builder.appendff("{}", m_row_start->as_grid_track_placement().grid_track_placement().to_string().value());
if (!m_column_start->as_grid_track_placement().grid_track_placement().is_auto())
builder.appendff(" / {}", m_column_start->as_grid_track_placement().grid_track_placement().to_string().value());
if (!m_row_end->as_grid_track_placement().grid_track_placement().is_auto())
builder.appendff(" / {}", m_row_end->as_grid_track_placement().grid_track_placement().to_string().value());
if (!m_column_end->as_grid_track_placement().grid_track_placement().is_auto())
builder.appendff(" / {}", m_column_end->as_grid_track_placement().grid_track_placement().to_string().value());
return builder.to_string();
}
bool GridAreaShorthandStyleValue::equals(StyleValue const& other) const
{
if (type() != other.type())
return false;
auto const& typed_other = other.as_grid_area_shorthand();
return m_row_start->equals(typed_other.m_row_start)
&& m_column_start->equals(typed_other.m_column_start)
&& m_row_end->equals(typed_other.m_row_end)
&& m_column_end->equals(typed_other.m_column_end);
}
ErrorOr<String> GridTrackPlacementStyleValue::to_string() const
{
return m_grid_track_placement.to_string();

40
Userland/Libraries/LibWeb/CSS/StyleValue.h
View file

@ -228,6 +228,7 @@ public:
FlexFlow,
Font,
Frequency,
GridAreaShorthand,
GridTemplateArea,
GridTrackPlacement,
GridTrackPlacementShorthand,
@ -276,6 +277,7 @@ public:
bool is_flex_flow() const { return type() == Type::FlexFlow; }
bool is_font() const { return type() == Type::Font; }
bool is_frequency() const { return type() == Type::Frequency; }
bool is_grid_area_shorthand() const { return type() == Type::GridAreaShorthand; }
bool is_grid_template_area() const { return type() == Type::GridTemplateArea; }
bool is_grid_track_placement() const { return type() == Type::GridTrackPlacement; }
bool is_grid_track_placement_shorthand() const { return type() == Type::GridTrackPlacementShorthand; }
@ -322,6 +324,7 @@ public:
FlexStyleValue const& as_flex() const;
FontStyleValue const& as_font() const;
FrequencyStyleValue const& as_frequency() const;
GridAreaShorthandStyleValue const& as_grid_area_shorthand() const;
GridTemplateAreaStyleValue const& as_grid_template_area() const;
GridTrackPlacementShorthandStyleValue const& as_grid_track_placement_shorthand() const;
GridTrackPlacementStyleValue const& as_grid_track_placement() const;
@ -366,6 +369,7 @@ public:
FlexStyleValue& as_flex() { return const_cast<FlexStyleValue&>(const_cast<StyleValue const&>(*this).as_flex()); }
FontStyleValue& as_font() { return const_cast<FontStyleValue&>(const_cast<StyleValue const&>(*this).as_font()); }
FrequencyStyleValue& as_frequency() { return const_cast<FrequencyStyleValue&>(const_cast<StyleValue const&>(*this).as_frequency()); }
GridAreaShorthandStyleValue& as_grid_area_shorthand() { return const_cast<GridAreaShorthandStyleValue&>(const_cast<StyleValue const&>(*this).as_grid_area_shorthand()); }
GridTemplateAreaStyleValue& as_grid_template_area() { return const_cast<GridTemplateAreaStyleValue&>(const_cast<StyleValue const&>(*this).as_grid_template_area()); }
GridTrackPlacementShorthandStyleValue& as_grid_track_placement_shorthand() { return const_cast<GridTrackPlacementShorthandStyleValue&>(const_cast<StyleValue const&>(*this).as_grid_track_placement_shorthand()); }
GridTrackPlacementStyleValue& as_grid_track_placement() { return const_cast<GridTrackPlacementStyleValue&>(const_cast<StyleValue const&>(*this).as_grid_track_placement()); }
@ -1124,6 +1128,42 @@ private:
NonnullRefPtr<GridTrackPlacementStyleValue> m_end;
};
class GridAreaShorthandStyleValue final : public StyleValue {
public:
static NonnullRefPtr<GridAreaShorthandStyleValue> create(NonnullRefPtr<GridTrackPlacementStyleValue> row_start, NonnullRefPtr<GridTrackPlacementStyleValue> column_start, NonnullRefPtr<GridTrackPlacementStyleValue> row_end, NonnullRefPtr<GridTrackPlacementStyleValue> column_end)
{
return adopt_ref(*new GridAreaShorthandStyleValue(row_start, column_start, row_end, column_end));
}
static NonnullRefPtr<GridAreaShorthandStyleValue> create(GridTrackPlacement row_start, GridTrackPlacement column_start, GridTrackPlacement row_end, GridTrackPlacement column_end)
{
return adopt_ref(*new GridAreaShorthandStyleValue(GridTrackPlacementStyleValue::create(row_start), GridTrackPlacementStyleValue::create(column_start), GridTrackPlacementStyleValue::create(row_end), GridTrackPlacementStyleValue::create(column_end)));
}
virtual ~GridAreaShorthandStyleValue() override = default;
NonnullRefPtr<GridTrackPlacementStyleValue> row_start() const { return m_row_start; }
NonnullRefPtr<GridTrackPlacementStyleValue> column_start() const { return m_column_start; }
NonnullRefPtr<GridTrackPlacementStyleValue> row_end() const { return m_row_end; }
NonnullRefPtr<GridTrackPlacementStyleValue> column_end() const { return m_column_end; }
virtual ErrorOr<String> to_string() const override;
virtual bool equals(StyleValue const& other) const override;
private:
GridAreaShorthandStyleValue(NonnullRefPtr<GridTrackPlacementStyleValue> row_start, NonnullRefPtr<GridTrackPlacementStyleValue> column_start, NonnullRefPtr<GridTrackPlacementStyleValue> row_end, NonnullRefPtr<GridTrackPlacementStyleValue> column_end)
: StyleValue(Type::GridAreaShorthand)
, m_row_start(row_start)
, m_column_start(column_start)
, m_row_end(row_end)
, m_column_end(column_end)
{
}
NonnullRefPtr<GridTrackPlacementStyleValue> m_row_start;
NonnullRefPtr<GridTrackPlacementStyleValue> m_column_start;
NonnullRefPtr<GridTrackPlacementStyleValue> m_row_end;
NonnullRefPtr<GridTrackPlacementStyleValue> m_column_end;
};
class GridTrackSizeStyleValue final : public StyleValue {
public:
static NonnullRefPtr<GridTrackSizeStyleValue> create(CSS::GridTrackSizeList grid_track_size_list);

1
Userland/Libraries/LibWeb/Forward.h
View file

@ -62,6 +62,7 @@ class FontStyleValue;
class Frequency;
class FrequencyPercentage;
class FrequencyStyleValue;
class GridAreaShorthandStyleValue;
class GridMinMax;
class GridRepeat;
class GridSize;