mirror of
https://github.com/RGBCube/serenity
synced 2025-07-24 21:37:34 +00:00
LibWeb: Add basic parsing of grid shorthand CSS property
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:
parent
1e526af430
commit
ab5b89eb95
6 changed files with 44 additions and 1 deletions
|
@ -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
10
Tests/LibWeb/Layout/input/grid/grid-shorthand-property.html
Normal 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>
|
|
@ -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);
|
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)
|
ErrorOr<RefPtr<StyleValue>> Parser::parse_grid_template_areas_value(Vector<ComponentValue> const& component_values)
|
||||||
{
|
{
|
||||||
Vector<Vector<String>> grid_area_rows;
|
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)))
|
if (auto parsed_value = FIXME_TRY(parse_grid_track_placement(component_values)))
|
||||||
return parsed_value.release_nonnull();
|
return parsed_value.release_nonnull();
|
||||||
return ParseError::SyntaxError;
|
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:
|
case PropertyID::GridTemplate:
|
||||||
if (auto parsed_value = FIXME_TRY(parse_grid_track_size_list_shorthand_value(component_values)))
|
if (auto parsed_value = FIXME_TRY(parse_grid_track_size_list_shorthand_value(component_values)))
|
||||||
return parsed_value.release_nonnull();
|
return parsed_value.release_nonnull();
|
||||||
|
|
|
@ -334,6 +334,7 @@ private:
|
||||||
ErrorOr<RefPtr<StyleValue>> parse_grid_track_placement_shorthand_value(Vector<ComponentValue> const&);
|
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_template_areas_value(Vector<ComponentValue> const&);
|
||||||
ErrorOr<RefPtr<StyleValue>> parse_grid_area_shorthand_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&);
|
ErrorOr<OwnPtr<CalculationNode>> parse_a_calculation(Vector<ComponentValue> const&);
|
||||||
|
|
||||||
|
|
|
@ -940,6 +940,21 @@
|
||||||
"string"
|
"string"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
"grid": {
|
||||||
|
"inherited": false,
|
||||||
|
"initial": "auto",
|
||||||
|
"valid-identifiers": [
|
||||||
|
"auto"
|
||||||
|
],
|
||||||
|
"valid-types": [
|
||||||
|
"length",
|
||||||
|
"percentage",
|
||||||
|
"string"
|
||||||
|
],
|
||||||
|
"longhands": [
|
||||||
|
"grid-template"
|
||||||
|
]
|
||||||
|
},
|
||||||
"grid-template": {
|
"grid-template": {
|
||||||
"inherited": false,
|
"inherited": false,
|
||||||
"initial": "auto",
|
"initial": "auto",
|
||||||
|
|
|
@ -639,7 +639,7 @@ static void set_property_expanding_shorthands(StyleProperties& style, CSS::Prope
|
||||||
return;
|
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()) {
|
if (value.is_grid_track_size_list_shorthand()) {
|
||||||
auto const& shorthand = value.as_grid_track_size_list_shorthand();
|
auto const& shorthand = value.as_grid_track_size_list_shorthand();
|
||||||
style.set_property(CSS::PropertyID::GridTemplateAreas, shorthand.areas());
|
style.set_property(CSS::PropertyID::GridTemplateAreas, shorthand.areas());
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue