From ab5b89eb95964592386f260caa90fbb2e7b83433 Mon Sep 17 00:00:00 2001 From: Aliaksandr Kalenik Date: Sat, 27 May 2023 02:58:19 +0300 Subject: [PATCH] LibWeb: Add basic parsing of grid shorthand CSS property Introduces incomplete parsing of grid shorthand property. Only part of syntax is supported for now but it is enough to significantly improve rendering of websites that use this shorthand to define grid :) --- .../expected/grid/grid-shorthand-property.txt | 5 +++++ .../input/grid/grid-shorthand-property.html | 10 ++++++++++ Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp | 12 ++++++++++++ Userland/Libraries/LibWeb/CSS/Parser/Parser.h | 1 + Userland/Libraries/LibWeb/CSS/Properties.json | 15 +++++++++++++++ Userland/Libraries/LibWeb/CSS/StyleComputer.cpp | 2 +- 6 files changed, 44 insertions(+), 1 deletion(-) create mode 100644 Tests/LibWeb/Layout/expected/grid/grid-shorthand-property.txt create mode 100644 Tests/LibWeb/Layout/input/grid/grid-shorthand-property.html diff --git a/Tests/LibWeb/Layout/expected/grid/grid-shorthand-property.txt b/Tests/LibWeb/Layout/expected/grid/grid-shorthand-property.txt new file mode 100644 index 00000000000..19ec62190ab --- /dev/null +++ b/Tests/LibWeb/Layout/expected/grid/grid-shorthand-property.txt @@ -0,0 +1,5 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x600 [BFC] children: not-inline + BlockContainer at (8,8) content-size 784x100 children: not-inline + Box at (8,8) content-size 784x100 [GFC] children: not-inline + BlockContainer at (8,8) content-size 200x100 [BFC] children: not-inline diff --git a/Tests/LibWeb/Layout/input/grid/grid-shorthand-property.html b/Tests/LibWeb/Layout/input/grid/grid-shorthand-property.html new file mode 100644 index 00000000000..8b9c7a44755 --- /dev/null +++ b/Tests/LibWeb/Layout/input/grid/grid-shorthand-property.html @@ -0,0 +1,10 @@ +
\ No newline at end of file diff --git a/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp b/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp index c88535c8060..d4517c06157 100644 --- a/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp +++ b/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp @@ -6869,6 +6869,14 @@ ErrorOr> Parser::parse_grid_area_shorthand_value(Vector> Parser::parse_grid_shorthand_value(Vector 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> Parser::parse_grid_template_areas_value(Vector const& component_values) { Vector> grid_area_rows; @@ -7076,6 +7084,10 @@ Parser::ParseErrorOr> 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(); diff --git a/Userland/Libraries/LibWeb/CSS/Parser/Parser.h b/Userland/Libraries/LibWeb/CSS/Parser/Parser.h index 0d3f744a263..6943ab0e0a1 100644 --- a/Userland/Libraries/LibWeb/CSS/Parser/Parser.h +++ b/Userland/Libraries/LibWeb/CSS/Parser/Parser.h @@ -334,6 +334,7 @@ private: ErrorOr> parse_grid_track_placement_shorthand_value(Vector const&); ErrorOr> parse_grid_template_areas_value(Vector const&); ErrorOr> parse_grid_area_shorthand_value(Vector const&); + ErrorOr> parse_grid_shorthand_value(Vector const&); ErrorOr> parse_a_calculation(Vector const&); diff --git a/Userland/Libraries/LibWeb/CSS/Properties.json b/Userland/Libraries/LibWeb/CSS/Properties.json index ea485deaba4..d030544efaf 100644 --- a/Userland/Libraries/LibWeb/CSS/Properties.json +++ b/Userland/Libraries/LibWeb/CSS/Properties.json @@ -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", diff --git a/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp b/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp index 8db216d5327..f666efcfac5 100644 --- a/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp +++ b/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp @@ -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());