From 8d6f2390f6c041fd61df9a93c0251a3da8b627b0 Mon Sep 17 00:00:00 2001 From: Aliaksandr Kalenik Date: Tue, 24 Jun 2025 18:04:41 +0200 Subject: [PATCH] LibWeb: Set grid-auto-* to initial values when parsing `grid-template` ...as `grid` property value. --- Libraries/LibWeb/CSS/Parser/Parser.h | 2 +- .../LibWeb/CSS/Parser/PropertyParsing.cpp | 43 +++++++++++------ .../parsing/grid-shorthand-serialization.txt | 8 ++-- .../css/css-grid/parsing/grid-shorthand.txt | 46 +++++++++---------- 4 files changed, 57 insertions(+), 42 deletions(-) diff --git a/Libraries/LibWeb/CSS/Parser/Parser.h b/Libraries/LibWeb/CSS/Parser/Parser.h index 10b2db47f25..77cf5c0aab3 100644 --- a/Libraries/LibWeb/CSS/Parser/Parser.h +++ b/Libraries/LibWeb/CSS/Parser/Parser.h @@ -466,7 +466,7 @@ private: RefPtr parse_grid_track_size_list(TokenStream&); RefPtr parse_grid_auto_track_sizes(TokenStream&); RefPtr parse_grid_auto_flow_value(TokenStream&); - RefPtr parse_grid_track_size_list_shorthand_value(PropertyID, TokenStream&); + RefPtr parse_grid_track_size_list_shorthand_value(PropertyID, TokenStream&, bool include_grid_auto_properties = false); RefPtr parse_grid_track_placement(TokenStream&); RefPtr parse_grid_track_placement_shorthand_value(PropertyID, TokenStream&); RefPtr parse_grid_template_areas_value(TokenStream&); diff --git a/Libraries/LibWeb/CSS/Parser/PropertyParsing.cpp b/Libraries/LibWeb/CSS/Parser/PropertyParsing.cpp index a51b9dbff4a..6e43b1a79f3 100644 --- a/Libraries/LibWeb/CSS/Parser/PropertyParsing.cpp +++ b/Libraries/LibWeb/CSS/Parser/PropertyParsing.cpp @@ -4323,17 +4323,30 @@ RefPtr Parser::parse_grid_track_placement_shorthand_value(P // https://www.w3.org/TR/css-grid-2/#explicit-grid-shorthand // 7.4. Explicit Grid Shorthand: the grid-template property -RefPtr Parser::parse_grid_track_size_list_shorthand_value(PropertyID property_id, TokenStream& tokens) +RefPtr Parser::parse_grid_track_size_list_shorthand_value(PropertyID property_id, TokenStream& tokens, bool include_grid_auto_properties) { - auto empty_grid_areas = GridTemplateAreaStyleValue::create({}); - auto empty_grid_track_size_list = GridTrackSizeListStyleValue::create({}); + Vector sub_properties; + Vector> values; + if (include_grid_auto_properties) { + sub_properties.append(PropertyID::GridAutoFlow); + sub_properties.append(PropertyID::GridAutoRows); + sub_properties.append(PropertyID::GridAutoColumns); + values.append(property_initial_value(PropertyID::GridAutoFlow)); + values.append(property_initial_value(PropertyID::GridAutoRows)); + values.append(property_initial_value(PropertyID::GridAutoColumns)); + } + sub_properties.append(PropertyID::GridTemplateAreas); + sub_properties.append(PropertyID::GridTemplateRows); + sub_properties.append(PropertyID::GridTemplateColumns); + values.ensure_capacity(sub_properties.size()); // none { if (parse_all_as_single_keyword_value(tokens, Keyword::None)) { - return ShorthandStyleValue::create(property_id, - { PropertyID::GridTemplateAreas, PropertyID::GridTemplateRows, PropertyID::GridTemplateColumns }, - { empty_grid_areas, empty_grid_track_size_list, empty_grid_track_size_list }); + values.unchecked_append(property_initial_value(PropertyID::GridTemplateAreas)); + values.unchecked_append(property_initial_value(PropertyID::GridTemplateRows)); + values.unchecked_append(property_initial_value(PropertyID::GridTemplateColumns)); + return ShorthandStyleValue::create(property_id, move(sub_properties), move(values)); } } @@ -4347,9 +4360,10 @@ RefPtr Parser::parse_grid_track_size_list_shorthand_value(P tokens.discard_whitespace(); if (auto parsed_template_columns_values = parse_grid_track_size_list(tokens)) { transaction.commit(); - return ShorthandStyleValue::create(property_id, - { PropertyID::GridTemplateAreas, PropertyID::GridTemplateRows, PropertyID::GridTemplateColumns }, - { empty_grid_areas, parsed_template_rows_values.release_nonnull(), parsed_template_columns_values.release_nonnull() }); + values.unchecked_append(property_initial_value(PropertyID::GridTemplateAreas)); + values.unchecked_append(parsed_template_rows_values.release_nonnull()); + values.unchecked_append(parsed_template_columns_values.release_nonnull()); + return ShorthandStyleValue::create(property_id, move(sub_properties), move(values)); } } } @@ -4388,7 +4402,7 @@ RefPtr Parser::parse_grid_track_size_list_shorthand_value(P tokens.discard_whitespace(); - RefPtr columns_track_list = empty_grid_track_size_list; + RefPtr columns_track_list = property_initial_value(PropertyID::GridTemplateColumns); if (tokens.has_next_token() && tokens.next_token().is_delim('/')) { tokens.discard_a_token(); tokens.discard_whitespace(); @@ -4403,9 +4417,10 @@ RefPtr Parser::parse_grid_track_size_list_shorthand_value(P } transaction.commit(); - return ShorthandStyleValue::create(property_id, - { PropertyID::GridTemplateAreas, PropertyID::GridTemplateRows, PropertyID::GridTemplateColumns }, - { grid_areas.release_nonnull(), rows_track_list, columns_track_list.release_nonnull() }); + values.unchecked_append(grid_areas.release_nonnull()); + values.unchecked_append(rows_track_list); + values.unchecked_append(columns_track_list.release_nonnull()); + return ShorthandStyleValue::create(property_id, move(sub_properties), move(values)); } } @@ -4504,7 +4519,7 @@ RefPtr Parser::parse_grid_area_shorthand_value(TokenStream< RefPtr Parser::parse_grid_shorthand_value(TokenStream& tokens) { // <'grid-template'> - if (auto grid_template = parse_grid_track_size_list_shorthand_value(PropertyID::Grid, tokens)) { + if (auto grid_template = parse_grid_track_size_list_shorthand_value(PropertyID::Grid, tokens, true)) { return grid_template; } diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-shorthand-serialization.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-shorthand-serialization.txt index d103f70709c..1204a449caf 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-shorthand-serialization.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-shorthand-serialization.txt @@ -2,8 +2,8 @@ Harness status: OK Found 141 tests -98 Pass -43 Fail +100 Pass +41 Fail Fail e.style.cssText = grid: auto-flow auto / 100px 100px should set grid Fail e.style.cssText = grid: auto-flow auto / 100px 100px should set grid-template-areas Pass e.style.cssText = grid: auto-flow auto / 100px 100px; grid-template-areas: "one two" "three four" should set grid @@ -14,8 +14,8 @@ Fail e.style.cssText = grid: 30px 40px / 50px 60px; grid-auto-flow: column shoul Pass e.style.cssText = grid: 30px 40px / 50px 60px; grid-auto-flow: column should set grid-auto-flow Pass e.style.cssText = grid: 30px 40px / 50px 60px; grid-auto-flow: column should set grid-template Fail cssText ('grid: 30px 40px / 50px 60px; grid-auto-flow: column') must contain 'grid-template: 30px 40px / 50px 60px;' in its serialization -Fail cssText ('grid: 30px 40px / 50px 60px; grid-auto-flow: column') must contain 'grid-auto-rows: auto;' in its serialization -Fail cssText ('grid: 30px 40px / 50px 60px; grid-auto-flow: column') must contain 'grid-auto-columns: auto;' in its serialization +Pass cssText ('grid: 30px 40px / 50px 60px; grid-auto-flow: column') must contain 'grid-auto-rows: auto;' in its serialization +Pass cssText ('grid: 30px 40px / 50px 60px; grid-auto-flow: column') must contain 'grid-auto-columns: auto;' in its serialization Pass cssText ('grid: 30px 40px / 50px 60px; grid-auto-flow: column') must contain 'grid-auto-flow: column;' in its serialization Fail e.style.cssText = grid: auto-flow / 10px; grid-template-rows: 20px should set grid Fail e.style.cssText = grid: auto-flow / 10px; grid-template-rows: 20px should set grid-template diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-shorthand.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-shorthand.txt index 15461665dbb..a384fa99a13 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-shorthand.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-shorthand.txt @@ -2,53 +2,53 @@ Harness status: OK Found 63 tests -35 Pass -28 Fail -Fail e.style['grid'] = "none" should set grid-auto-columns -Fail e.style['grid'] = "none" should set grid-auto-flow -Fail e.style['grid'] = "none" should set grid-auto-rows +56 Pass +7 Fail +Pass e.style['grid'] = "none" should set grid-auto-columns +Pass e.style['grid'] = "none" should set grid-auto-flow +Pass e.style['grid'] = "none" should set grid-auto-rows Pass e.style['grid'] = "none" should set grid-template-areas Pass e.style['grid'] = "none" should set grid-template-columns Pass e.style['grid'] = "none" should set grid-template-rows Pass e.style['grid'] = "none" should not set unrelated longhands -Fail e.style['grid'] = "10px / 20%" should set grid-auto-columns -Fail e.style['grid'] = "10px / 20%" should set grid-auto-flow -Fail e.style['grid'] = "10px / 20%" should set grid-auto-rows +Pass e.style['grid'] = "10px / 20%" should set grid-auto-columns +Pass e.style['grid'] = "10px / 20%" should set grid-auto-flow +Pass e.style['grid'] = "10px / 20%" should set grid-auto-rows Pass e.style['grid'] = "10px / 20%" should set grid-template-areas Pass e.style['grid'] = "10px / 20%" should set grid-template-columns Pass e.style['grid'] = "10px / 20%" should set grid-template-rows Pass e.style['grid'] = "10px / 20%" should not set unrelated longhands -Fail e.style['grid'] = "none / 10px" should set grid-auto-columns -Fail e.style['grid'] = "none / 10px" should set grid-auto-flow -Fail e.style['grid'] = "none / 10px" should set grid-auto-rows +Pass e.style['grid'] = "none / 10px" should set grid-auto-columns +Pass e.style['grid'] = "none / 10px" should set grid-auto-flow +Pass e.style['grid'] = "none / 10px" should set grid-auto-rows Pass e.style['grid'] = "none / 10px" should set grid-template-areas Pass e.style['grid'] = "none / 10px" should set grid-template-columns Pass e.style['grid'] = "none / 10px" should set grid-template-rows Pass e.style['grid'] = "none / 10px" should not set unrelated longhands -Fail e.style['grid'] = "fit-content(calc(-0.5em + 10px)) / fit-content(calc(0.5em + 10px))" should set grid-auto-columns -Fail e.style['grid'] = "fit-content(calc(-0.5em + 10px)) / fit-content(calc(0.5em + 10px))" should set grid-auto-flow -Fail e.style['grid'] = "fit-content(calc(-0.5em + 10px)) / fit-content(calc(0.5em + 10px))" should set grid-auto-rows +Pass e.style['grid'] = "fit-content(calc(-0.5em + 10px)) / fit-content(calc(0.5em + 10px))" should set grid-auto-columns +Pass e.style['grid'] = "fit-content(calc(-0.5em + 10px)) / fit-content(calc(0.5em + 10px))" should set grid-auto-flow +Pass e.style['grid'] = "fit-content(calc(-0.5em + 10px)) / fit-content(calc(0.5em + 10px))" should set grid-auto-rows Pass e.style['grid'] = "fit-content(calc(-0.5em + 10px)) / fit-content(calc(0.5em + 10px))" should set grid-template-areas Pass e.style['grid'] = "fit-content(calc(-0.5em + 10px)) / fit-content(calc(0.5em + 10px))" should set grid-template-columns Pass e.style['grid'] = "fit-content(calc(-0.5em + 10px)) / fit-content(calc(0.5em + 10px))" should set grid-template-rows Pass e.style['grid'] = "fit-content(calc(-0.5em + 10px)) / fit-content(calc(0.5em + 10px))" should not set unrelated longhands -Fail e.style['grid'] = "[header-top] \"a a a\" [header-bottom] [main-top] \"b b b\" 1fr [main-bottom] / auto 1fr auto" should set grid-auto-columns -Fail e.style['grid'] = "[header-top] \"a a a\" [header-bottom] [main-top] \"b b b\" 1fr [main-bottom] / auto 1fr auto" should set grid-auto-flow -Fail e.style['grid'] = "[header-top] \"a a a\" [header-bottom] [main-top] \"b b b\" 1fr [main-bottom] / auto 1fr auto" should set grid-auto-rows +Pass e.style['grid'] = "[header-top] \"a a a\" [header-bottom] [main-top] \"b b b\" 1fr [main-bottom] / auto 1fr auto" should set grid-auto-columns +Pass e.style['grid'] = "[header-top] \"a a a\" [header-bottom] [main-top] \"b b b\" 1fr [main-bottom] / auto 1fr auto" should set grid-auto-flow +Pass e.style['grid'] = "[header-top] \"a a a\" [header-bottom] [main-top] \"b b b\" 1fr [main-bottom] / auto 1fr auto" should set grid-auto-rows Pass e.style['grid'] = "[header-top] \"a a a\" [header-bottom] [main-top] \"b b b\" 1fr [main-bottom] / auto 1fr auto" should set grid-template-areas Pass e.style['grid'] = "[header-top] \"a a a\" [header-bottom] [main-top] \"b b b\" 1fr [main-bottom] / auto 1fr auto" should set grid-template-columns Pass e.style['grid'] = "[header-top] \"a a a\" [header-bottom] [main-top] \"b b b\" 1fr [main-bottom] / auto 1fr auto" should set grid-template-rows Pass e.style['grid'] = "[header-top] \"a a a\" [header-bottom] [main-top] \"b b b\" 1fr [main-bottom] / auto 1fr auto" should not set unrelated longhands -Fail e.style['grid'] = " \"a a a\" \"b b b\" 1fr/ auto 1fr auto" should set grid-auto-columns -Fail e.style['grid'] = " \"a a a\" \"b b b\" 1fr/ auto 1fr auto" should set grid-auto-flow -Fail e.style['grid'] = " \"a a a\" \"b b b\" 1fr/ auto 1fr auto" should set grid-auto-rows +Pass e.style['grid'] = " \"a a a\" \"b b b\" 1fr/ auto 1fr auto" should set grid-auto-columns +Pass e.style['grid'] = " \"a a a\" \"b b b\" 1fr/ auto 1fr auto" should set grid-auto-flow +Pass e.style['grid'] = " \"a a a\" \"b b b\" 1fr/ auto 1fr auto" should set grid-auto-rows Pass e.style['grid'] = " \"a a a\" \"b b b\" 1fr/ auto 1fr auto" should set grid-template-areas Pass e.style['grid'] = " \"a a a\" \"b b b\" 1fr/ auto 1fr auto" should set grid-template-columns Pass e.style['grid'] = " \"a a a\" \"b b b\" 1fr/ auto 1fr auto" should set grid-template-rows Pass e.style['grid'] = " \"a a a\" \"b b b\" 1fr/ auto 1fr auto" should not set unrelated longhands -Fail e.style['grid'] = " [] \"a a a\" [] [] \"b b b\" 1fr [] / [] auto 1fr [] auto []" should set grid-auto-columns -Fail e.style['grid'] = " [] \"a a a\" [] [] \"b b b\" 1fr [] / [] auto 1fr [] auto []" should set grid-auto-flow -Fail e.style['grid'] = " [] \"a a a\" [] [] \"b b b\" 1fr [] / [] auto 1fr [] auto []" should set grid-auto-rows +Pass e.style['grid'] = " [] \"a a a\" [] [] \"b b b\" 1fr [] / [] auto 1fr [] auto []" should set grid-auto-columns +Pass e.style['grid'] = " [] \"a a a\" [] [] \"b b b\" 1fr [] / [] auto 1fr [] auto []" should set grid-auto-flow +Pass e.style['grid'] = " [] \"a a a\" [] [] \"b b b\" 1fr [] / [] auto 1fr [] auto []" should set grid-auto-rows Pass e.style['grid'] = " [] \"a a a\" [] [] \"b b b\" 1fr [] / [] auto 1fr [] auto []" should set grid-template-areas Pass e.style['grid'] = " [] \"a a a\" [] [] \"b b b\" 1fr [] / [] auto 1fr [] auto []" should set grid-template-columns Pass e.style['grid'] = " [] \"a a a\" [] [] \"b b b\" 1fr [] / [] auto 1fr [] auto []" should set grid-template-rows