LibWeb+Base: Use line names for positioning grid items

When there are grid tracks with line names, use these to resolve
line-names passed to positioned grid items.

Base/res/html/misc/display-grid.html

@@ -80,6 +80,34 @@
   style="grid-template-columns: minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter)));">
 </div>
 
+<!-- Invalid template columns definition. Fixme: There seems to be some handling of this in other browsers
+that I don't quite understand. -->
+<div 
+  class="grid-container"
+  style="
+    grid-template-columns: [name1] [name1] [name2] 50px;
+  ">
+  <div class="grid-item" style="grid-column-start: name1;">1</div>
+</div>
+
+<!-- Missing grid track between line name declarations -->
+<div 
+  class="grid-container"
+  style="
+    grid-template-rows: [name1] 50px [name2] [name3];
+  ">
+  <div class="grid-item" style="grid-row-start: name2;">1</div>
+</div>
+
+<!-- Missing grid track between line name declarations -->
+<div 
+  class="grid-container"
+  style="
+    grid-template-rows: [name1] 1fr [name2];
+  ">
+  <div class="grid-item" style="grid-row: notfound;">1</div>
+</div>
+
 <p>End of crash tests</p>
 
 <!-- Different column sizes -->
@@ -228,3 +256,79 @@ length value, and as a minimum two lengths with an auto. -->
   <div class="grid-item">Article content</div>
   <div class="grid-item">3</div>
 </div>
+
+<!-- Example from https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines-->
+<p>Named tracks there should be 4 grid items in a circle with a space in the middle</p>
+<div 
+  class="grid-container"
+  style="
+    grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
+    grid-template-rows: [main-start] 25px [content-start] 25px [content-end] 25px [main-end];
+  ">
+  <div
+    class="grid-item"
+    style="
+      grid-column-start: main-start;
+      grid-row-start: main-start;
+      grid-row-end: main-end;
+    ">1</div>
+  <div
+    class="grid-item"
+    style="
+      grid-column-start: content-end;
+      grid-row-start: main-start;
+      grid-row-end: content-end;
+    ">2</div>
+  <div
+    class="grid-item"
+    style="
+      grid-column-start: content-start;
+      grid-row-start: main-start;
+    ">3</div>
+  <div
+    class="grid-item"
+    style="
+      grid-column-start: content-start;
+      grid-column-end: main-end;
+      grid-row-start: content-end;
+    ">4</div>
+</div>
+
+<p>Should render a 2 columned grid</p>
+<div 
+  class="grid-container"
+  style="
+    grid-template-columns:
+    [a]     auto
+    [b]     auto;
+  "
+  >
+  <div class="grid-item" style="grid-column-start: a;">1</div>
+  <div class="grid-item" style="grid-column-start: b;">2</div>
+</div>
+
+<!-- Multiple repeats -->
+<p>Should render 2 50px columns and 2 100px columns</p>
+<div 
+  class="grid-container"
+  style="
+    grid-template-columns: repeat(2, 50px) repeat(2, 100px)
+  ">
+  <div class="grid-item">1</div>
+  <div class="grid-item">2</div>
+  <div class="grid-item">3</div>
+  <div class="grid-item">4</div>
+</div>
+
+<!-- Named lines inside repeat -->
+<p>Should render 2 50px columns and 2 100px columns, with grid-item 1 starting at column 2</p>
+<div 
+  class="grid-container"
+  style="
+    grid-template-columns: repeat(2, [name1] 50px [name2] 100px);
+  ">
+    <div class="grid-item" style="grid-column-start: name2;">1</div>
+    <div class="grid-item">2</div>
+    <div class="grid-item">3</div>
+    <div class="grid-item">4</div>
+</div>

Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp

@@ -242,6 +242,42 @@ void GridFormattingContext::run(Box const& box, LayoutMode, AvailableSpace const
         // https://www.w3.org/TR/css-grid-2/#common-uses-named-lines
         // 8.1.3. Named Lines and Spans
         // Instead of counting lines by number, lines can be referenced by their line name:
+        if (child_box.computed_values().grid_column_start().has_line_name()) {
+            auto found_flag_and_index = get_line_index_by_line_name(child_box.computed_values().grid_column_start().line_name(), grid_template_columns);
+            if (found_flag_and_index > -1)
+                column_start = 1 + found_flag_and_index;
+            else
+                column_start = 1; // FIXME
+        }
+        if (child_box.computed_values().grid_column_end().has_line_name()) {
+            auto found_flag_and_index = get_line_index_by_line_name(child_box.computed_values().grid_column_end().line_name(), grid_template_columns);
+            if (found_flag_and_index > -1) {
+                column_end = 1 + found_flag_and_index;
+                if (!child_box.computed_values().grid_column_start().is_position())
+                    column_start = column_end - column_span;
+            } else {
+                column_end = 2;   // FIXME
+                column_start = 1; // FIXME
+            }
+        }
+        if (child_box.computed_values().grid_row_start().has_line_name()) {
+            auto found_flag_and_index = get_line_index_by_line_name(child_box.computed_values().grid_row_start().line_name(), grid_template_rows);
+            if (found_flag_and_index > -1)
+                row_start = 1 + found_flag_and_index;
+            else
+                row_start = 1; // FIXME
+        }
+        if (child_box.computed_values().grid_row_end().has_line_name()) {
+            auto found_flag_and_index = get_line_index_by_line_name(child_box.computed_values().grid_row_end().line_name(), grid_template_rows);
+            if (found_flag_and_index > -1) {
+                row_end = 1 + found_flag_and_index;
+                if (!child_box.computed_values().grid_row_start().is_position())
+                    row_start = row_end - row_span;
+            } else {
+                row_end = 2;   // FIXME
+                row_start = 1; // FIXME
+            }
+        }
 
         // If there are multiple lines of the same name, they effectively establish a named set of grid
         // lines, which can be exclusively indexed by filtering the placement by name:
@@ -343,6 +379,24 @@ void GridFormattingContext::run(Box const& box, LayoutMode, AvailableSpace const
         // https://www.w3.org/TR/css-grid-2/#common-uses-named-lines
         // 8.1.3. Named Lines and Spans
         // Instead of counting lines by number, lines can be referenced by their line name:
+        if (child_box.computed_values().grid_row_start().has_line_name()) {
+            auto found_flag_and_index = get_line_index_by_line_name(child_box.computed_values().grid_row_start().line_name(), grid_template_rows);
+            if (found_flag_and_index > -1)
+                row_start = 1 + found_flag_and_index;
+            else
+                row_start = 1; // FIXME
+        }
+        if (child_box.computed_values().grid_row_end().has_line_name()) {
+            auto found_flag_and_index = get_line_index_by_line_name(child_box.computed_values().grid_row_end().line_name(), grid_template_rows);
+            if (found_flag_and_index > -1) {
+                row_end = 1 + found_flag_and_index;
+                if (!child_box.computed_values().grid_row_start().is_position())
+                    row_start = row_end - row_span;
+            } else {
+                row_start = 1; // FIXME
+                row_end = 2;   // FIXME
+            }
+        }
 
         // If there are multiple lines of the same name, they effectively establish a named set of grid
         // lines, which can be exclusively indexed by filtering the placement by name:
@@ -480,6 +534,24 @@ void GridFormattingContext::run(Box const& box, LayoutMode, AvailableSpace const
             // https://www.w3.org/TR/css-grid-2/#common-uses-named-lines
             // 8.1.3. Named Lines and Spans
             // Instead of counting lines by number, lines can be referenced by their line name:
+            if (child_box.computed_values().grid_column_start().has_line_name()) {
+                auto found_flag_and_index = get_line_index_by_line_name(child_box.computed_values().grid_column_start().line_name(), grid_template_columns);
+                if (found_flag_and_index > -1)
+                    column_start = 1 + found_flag_and_index;
+                else
+                    column_start = 1; // FIXME
+            }
+            if (child_box.computed_values().grid_column_end().has_line_name()) {
+                auto found_flag_and_index = get_line_index_by_line_name(child_box.computed_values().grid_column_end().line_name(), grid_template_columns);
+                if (found_flag_and_index > -1) {
+                    column_end = 1 + found_flag_and_index;
+                    if (!child_box.computed_values().grid_column_start().is_position())
+                        column_start = column_end - column_span;
+                } else {
+                    column_end = 2;   // FIXME
+                    column_start = 1; // FIXME
+                }
+            }
 
             // If there are multiple lines of the same name, they effectively establish a named set of grid
             // lines, which can be exclusively indexed by filtering the placement by name:
@@ -1460,6 +1532,39 @@ float GridFormattingContext::get_free_space_y(Box const& box)
     return -1;
 }
 
+int GridFormattingContext::get_line_index_by_line_name(String const& needle, CSS::GridTrackSizeList grid_track_size_list)
+{
+    if (grid_track_size_list.track_list().size() == 0)
+        return -1;
+
+    auto repeated_tracks_count = 0;
+    for (size_t x = 0; x < grid_track_size_list.track_list().size(); x++) {
+        if (grid_track_size_list.track_list()[x].is_repeat()) {
+            // FIXME: Calculate amount of columns/rows if auto-fill/fit
+            if (!grid_track_size_list.track_list()[x].repeat().is_default())
+                return -1;
+            auto repeat = grid_track_size_list.track_list()[x].repeat().grid_track_size_list();
+            for (size_t y = 0; y < repeat.track_list().size(); y++) {
+                for (size_t z = 0; z < repeat.line_names()[y].size(); z++) {
+                    if (repeat.line_names()[y][z] == needle)
+                        return x + repeated_tracks_count;
+                    repeated_tracks_count++;
+                }
+            }
+        } else {
+            for (size_t y = 0; y < grid_track_size_list.line_names()[x].size(); y++) {
+                if (grid_track_size_list.line_names()[x][y] == needle)
+                    return x + repeated_tracks_count;
+            }
+        }
+    }
+    for (size_t y = 0; y < grid_track_size_list.line_names()[grid_track_size_list.track_list().size()].size(); y++) {
+        if (grid_track_size_list.line_names()[grid_track_size_list.track_list().size()][y] == needle)
+            return grid_track_size_list.track_list().size() + repeated_tracks_count;
+    }
+    return -1;
+}
+
 OccupationGrid::OccupationGrid(int column_count, int row_count)
 {
     Vector<bool> occupation_grid_row;

Userland/Libraries/LibWeb/Layout/GridFormattingContext.h

@@ -40,6 +40,8 @@ private:
 
     float get_free_space_x(Box const&);
     float get_free_space_y(Box const&);
+
+    int get_line_index_by_line_name(String const& line_name, CSS::GridTrackSizeList);
 };
 
 class OccupationGrid {