RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 16:27:35 +00:00
Code Issues Activity Actions

LibWeb: Add basic parsing of grid shorthand CSS property

Browse source 
Introduces incomplete parsing of grid shorthand property. Only
<grid-template> part of syntax is supported for now but it is enough
to significantly improve rendering of websites that use this shorthand
to define grid :)
This commit is contained in:
Aliaksandr Kalenik 2023-05-27 02:58:19 +03:00 • committed by Andreas Kling
parent 1e526af430
commit ab5b89eb95
6 changed files with 44 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

5
Tests/LibWeb/Layout/expected/grid/grid-shorthand-property.txt Normal file
View file

@ -0,0 +1,5 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x100 children: not-inline
Box <div.container> at (8,8) content-size 784x100 [GFC] children: not-inline
BlockContainer <div.item> at (8,8) content-size 200x100 [BFC] children: not-inline

10
Tests/LibWeb/Layout/input/grid/grid-shorthand-property.html Normal file
View file

@ -0,0 +1,10 @@
<style>
.container {
display: grid;
grid: 100px / 200px;
}
.item {
background-color: navy;
}
</style><div class="container"><div class="item"></div></div>

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

@ -6869,6 +6869,14 @@ ErrorOr<RefPtr<StyleValue>> Parser::parse_grid_area_shorthand_value(Vector<Compo
return GridAreaShorthandStyleValue::create(row_start, column_start, row_end, column_end);
}
ErrorOr<RefPtr<StyleValue>> Parser::parse_grid_shorthand_value(Vector<ComponentValue> const& component_value)
{
// <'grid-template'> |
// FIXME: <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? |
// FIXME: [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
return parse_grid_track_size_list_shorthand_value(component_value);
}
ErrorOr<RefPtr<StyleValue>> Parser::parse_grid_template_areas_value(Vector<ComponentValue> const& component_values)
{
Vector<Vector<String>> grid_area_rows;
@ -7076,6 +7084,10 @@ Parser::ParseErrorOr<NonnullRefPtr<StyleValue>> Parser::parse_css_value(Property
if (auto parsed_value = FIXME_TRY(parse_grid_track_placement(component_values)))
return parsed_value.release_nonnull();
return ParseError::SyntaxError;
case PropertyID::Grid:
if (auto parsed_value = FIXME_TRY(parse_grid_shorthand_value(component_values)))
return parsed_value.release_nonnull();
return ParseError::SyntaxError;
case PropertyID::GridTemplate:
if (auto parsed_value = FIXME_TRY(parse_grid_track_size_list_shorthand_value(component_values)))
return parsed_value.release_nonnull();

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

@ -334,6 +334,7 @@ private:
ErrorOr<RefPtr<StyleValue>> parse_grid_track_placement_shorthand_value(Vector<ComponentValue> const&);
ErrorOr<RefPtr<StyleValue>> parse_grid_template_areas_value(Vector<ComponentValue> const&);
ErrorOr<RefPtr<StyleValue>> parse_grid_area_shorthand_value(Vector<ComponentValue> const&);
ErrorOr<RefPtr<StyleValue>> parse_grid_shorthand_value(Vector<ComponentValue> const&);
ErrorOr<OwnPtr<CalculationNode>> parse_a_calculation(Vector<ComponentValue> const&);

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

@ -940,6 +940,21 @@
"string"
]
},
"grid": {
"inherited": false,
"initial": "auto",
"valid-identifiers": [
"auto"
],
"valid-types": [
"length",
"percentage",
"string"
],
"longhands": [
"grid-template"
]
},
"grid-template": {
"inherited": false,
"initial": "auto",

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

@ -639,7 +639,7 @@ static void set_property_expanding_shorthands(StyleProperties& style, CSS::Prope
return;
}
if (property_id == CSS::PropertyID::GridTemplate) {
if (property_id == CSS::PropertyID::GridTemplate || property_id == CSS::PropertyID::Grid) {
if (value.is_grid_track_size_list_shorthand()) {
auto const& shorthand = value.as_grid_track_size_list_shorthand();
style.set_property(CSS::PropertyID::GridTemplateAreas, shorthand.areas());