LibWeb: Skip serialization of implicit grid lines created during layout

StyleValues created for grid-template-rows and grid-template-columns by
GFC should not include `-start`/`-end` lines implicitly created by grid
areas.

Libraries/LibWeb/CSS/GridTrackSize.cpp

@@ -166,7 +166,11 @@ String GridLineNames::to_string() const
 {
     StringBuilder builder;
     builder.append("["sv);
-    builder.join(' ', names);
+    for (size_t i = 0; i < m_names.size(); ++i) {
+        if (i > 0)
+            builder.append(" "sv);
+        builder.append(m_names[i].name);
+    }
     builder.append("]"sv);
     return MUST(builder.to_string());
 }
@@ -211,7 +215,8 @@ void GridTrackSizeList::append(GridLineNames&& line_names)
 {
     if (!m_list.is_empty() && m_list.last().has<GridLineNames>()) {
         auto& last_line_names = m_list.last().get<GridLineNames>();
-        last_line_names.names.extend(move(line_names.names));
+        for (auto const& name : line_names.names())
+            last_line_names.append(name.name);
         return;
     }
     m_list.append(move(line_names));

Libraries/LibWeb/CSS/GridTrackSize.h

@@ -78,11 +78,25 @@ private:
     GridSize m_max_grid_size;
 };
 
-struct GridLineNames {
-    Vector<FlyString> names;
+struct GridLineName {
+    FlyString name;
+    bool implicit { false };
+
+    bool operator==(GridLineName const& other) const = default;
+};
+
+class GridLineNames {
+public:
+    void append(FlyString const& name) { m_names.append({ name }); }
+    bool is_empty() const { return m_names.is_empty(); }
+    auto const& names() const& { return m_names; }
 
     String to_string() const;
+
     bool operator==(GridLineNames const& other) const = default;
+
+private:
+    Vector<GridLineName> m_names;
 };
 
 class GridTrackSizeList {

Libraries/LibWeb/CSS/Parser/ValueParsing.cpp

@@ -3291,7 +3291,7 @@ Optional<GridLineNames> Parser::parse_grid_line_names(TokenStream<ComponentValue
         auto maybe_ident = parse_custom_ident(block_tokens, { { "span"sv, "auto"sv } });
         if (!maybe_ident.has_value())
             return OptionalNone {};
-        line_names.names.append(maybe_ident.release_value());
+        line_names.append(maybe_ident.release_value());
         block_tokens.discard_whitespace();
     }
 
@@ -3313,13 +3313,13 @@ size_t Parser::parse_track_list_impl(TokenStream<ComponentValue>& tokens, GridTr
         if (!explicit_grid_track.has_value())
             break;
 
-        if (line_names.has_value() && !line_names->names.is_empty())
+        if (line_names.has_value() && !line_names->is_empty())
             output.append(line_names.release_value());
 
         output.append(explicit_grid_track.release_value());
         if (allow_trailing_line_names_for_each_track == AllowTrailingLineNamesForEachTrack::Yes) {
             auto trailing_line_names = parse_grid_line_names(tokens);
-            if (trailing_line_names.has_value() && !trailing_line_names->names.is_empty()) {
+            if (trailing_line_names.has_value() && !trailing_line_names->is_empty()) {
                 output.append(trailing_line_names.release_value());
             }
         }
@@ -3328,7 +3328,7 @@ size_t Parser::parse_track_list_impl(TokenStream<ComponentValue>& tokens, GridTr
     }
 
     if (allow_trailing_line_names_for_each_track == AllowTrailingLineNamesForEachTrack::No) {
-        if (auto trailing_line_names = parse_grid_line_names(tokens); trailing_line_names.has_value() && !trailing_line_names->names.is_empty()) {
+        if (auto trailing_line_names = parse_grid_line_names(tokens); trailing_line_names.has_value() && !trailing_line_names->is_empty()) {
             output.append(trailing_line_names.release_value());
         }
     }

Libraries/LibWeb/Forward.h

@@ -240,6 +240,7 @@ class FrequencyOrCalculated;
 class FrequencyPercentage;
 class FrequencyStyleValue;
 class GridAutoFlowStyleValue;
+class GridLineNames;
 class GridMinMax;
 class GridRepeat;
 class GridSize;
@@ -316,7 +317,6 @@ enum class PropertyID : u16;
 
 struct BackgroundLayerData;
 struct CSSStyleSheetInit;
-struct GridLineNames;
 struct GridRepeatParams;
 struct StyleSheetIdentifier;
 

Libraries/LibWeb/Layout/GridFormattingContext.cpp

@@ -1385,10 +1385,10 @@ void GridFormattingContext::build_grid_areas()
     // and column-end lines of the named grid area.
     for (auto const& it : grid_areas) {
         auto const& grid_area = it.value;
-        m_column_lines[grid_area.column_start].names.append(MUST(String::formatted("{}-start", grid_area.name)));
-        m_column_lines[grid_area.column_end].names.append(MUST(String::formatted("{}-end", grid_area.name)));
-        m_row_lines[grid_area.row_start].names.append(MUST(String::formatted("{}-start", grid_area.name)));
-        m_row_lines[grid_area.row_end].names.append(MUST(String::formatted("{}-end", grid_area.name)));
+        m_column_lines[grid_area.column_start].append({ .name = MUST(String::formatted("{}-start", grid_area.name)), .implicit = true });
+        m_column_lines[grid_area.column_end].append({ .name = MUST(String::formatted("{}-end", grid_area.name)), .implicit = true });
+        m_row_lines[grid_area.row_start].append({ .name = MUST(String::formatted("{}-start", grid_area.name)), .implicit = true });
+        m_row_lines[grid_area.row_end].append({ .name = MUST(String::formatted("{}-end", grid_area.name)), .implicit = true });
     }
 }
 
@@ -2061,9 +2061,14 @@ void GridFormattingContext::run(AvailableSpace const& available_space)
     auto serialize = [](auto const& tracks, auto const& lines) {
         CSS::GridTrackSizeList result;
         for (size_t i = 0; i < lines.size(); ++i) {
-            auto const& line = lines[i];
-            if (!line.names.is_empty()) {
-                result.append(CSS::GridLineNames { line.names });
+            auto const& names = lines[i];
+            if (!names.is_empty()) {
+                CSS::GridLineNames grid_line_names;
+                for (auto const& [name, implicit] : names) {
+                    if (!implicit)
+                        grid_line_names.append(name);
+                }
+                result.append(CSS::GridLineNames { move(grid_line_names) });
             }
 
             if (i < tracks.size()) {
@@ -2273,8 +2278,8 @@ Optional<int> GridFormattingContext::get_nth_line_index_by_line_name(GridDimensi
     // of the explicit grid corresponding to the search direction are assumed to have that name for the purpose of counting this span.
     // Source: https://drafts.csswg.org/css-grid/#line-placement
     for (size_t actual_line_index = 0; actual_line_index < lines.size(); actual_line_index++) {
-        for (auto const& name : lines[actual_line_index].names) {
-            if (name == line_name) {
+        for (auto const& line : lines[actual_line_index]) {
+            if (line.name == line_name) {
                 // https://drafts.csswg.org/css-grid/#line-placement
                 // Contributes the nth grid line to the grid item’s placement.
                 if (line_index == 0)
@@ -2293,15 +2298,15 @@ void GridFormattingContext::init_grid_lines(GridDimension dimension)
     auto const& lines_definition = dimension == GridDimension::Column ? grid_computed_values.grid_template_columns() : grid_computed_values.grid_template_rows();
     auto& lines = dimension == GridDimension::Column ? m_column_lines : m_row_lines;
 
-    Vector<FlyString> line_names;
+    Vector<CSS::GridLineName> line_names;
     Function<void(CSS::GridTrackSizeList const&)> expand_lines_definition = [&](CSS::GridTrackSizeList const& lines_definition) {
         for (auto const& item : lines_definition.list()) {
             if (item.has<CSS::GridLineNames>()) {
-                line_names.extend(item.get<CSS::GridLineNames>().names);
+                line_names.extend(item.get<CSS::GridLineNames>().names());
             } else if (item.has<CSS::ExplicitGridTrack>()) {
                 auto const& explicit_track = item.get<CSS::ExplicitGridTrack>();
                 if (explicit_track.is_default() || explicit_track.is_minmax()) {
-                    lines.append({ .names = line_names });
+                    lines.append(line_names);
                     line_names.clear();
                 } else if (explicit_track.is_repeat()) {
                     int repeat_count = 0;
@@ -2320,7 +2325,7 @@ void GridFormattingContext::init_grid_lines(GridDimension dimension)
     };
 
     expand_lines_definition(lines_definition);
-    lines.append({ .names = line_names });
+    lines.append(line_names);
 }
 
 void OccupationGrid::set_occupied(int column_start, int column_end, int row_start, int row_end)

Libraries/LibWeb/Layout/GridFormattingContext.h

@@ -233,11 +233,8 @@ private:
         bool invalid { false }; /* FIXME: Ignore ignore invalid areas during layout */
     };
 
-    struct GridLine {
-        Vector<FlyString> names;
-    };
-    Vector<GridLine> m_row_lines;
-    Vector<GridLine> m_column_lines;
+    Vector<Vector<CSS::GridLineName>> m_row_lines;
+    Vector<Vector<CSS::GridLineName>> m_column_lines;
 
     void init_grid_lines(GridDimension);
 

Tests/LibWeb/Text/expected/css/getComputedStyle-grid-template-rows.txt

@@ -0,0 +1 @@
+[a] 0px [c] 0px []

Tests/LibWeb/Text/input/css/getComputedStyle-grid-template-rows.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<body></body>
+<script src="../include.js"></script>
+<script>
+    test(() => {
+        const d = document.createElement("div");
+        d.style.cssText = 'display: grid; grid-template: [a] "a" [c] "b" / 10px;';
+        document.body.append(d);
+        println(getComputedStyle(d).gridTemplateRows);
+    });
+</script>