From e537035cc6f89809521d44a10797c63a1c4800f5 Mon Sep 17 00:00:00 2001
From: martinfalisse <martinmotteditfalisse@gmail.com>
Date: Sat, 8 Oct 2022 14:46:21 +0200
Subject: [PATCH] LibWeb+Base: Deal with column-spans greater than implicit
 grid

When the indicated column-span is greater than the implicit grid (like
in cases when the grid has the default size of 1x1, and the column is
supposed to span any number greater than that), then previously were
crashing.
---
 Base/res/html/misc/display-grid.html          | 23 ++++++++++++++++---
 .../LibWeb/Layout/GridFormattingContext.cpp   | 17 ++++++++++----
 2 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/Base/res/html/misc/display-grid.html b/Base/res/html/misc/display-grid.html
index fcf9c9d116..fb79d6a053 100644
--- a/Base/res/html/misc/display-grid.html
+++ b/Base/res/html/misc/display-grid.html
@@ -30,8 +30,8 @@
   <div class="grid-item">4</div>
 </div>
 
+<p>Start of crash tests</p>
 <!-- Check for a bug where a github page was crashing due to the following code. -->
-<p>If you can see this message then the test passed.</p>
 <div 
   class="grid-container"
   style="
@@ -41,7 +41,6 @@
 </div>
 
 <!-- Spans causing positions outside the inherit grid. (span 2 with an end position of 1 causes the start to be -1) -->
-<p>If you can see this message then the test passed.</p>
 <div class="grid-container">
   <div class="grid-item" style="grid-row: span 2 / 1; grid-column: span 2 / 1;">1</div>
   <div class="grid-item" style="grid-row: span 2 / 1;">2</div>
@@ -50,7 +49,6 @@
 </div>
 
 <!-- 0 positioned grid items and similar inputs -->
-<p>If you can see this message then the test passed.</p>
 <div class="grid-container">
   <div class="grid-item" style="grid-row-end: 0;">2</div>
   <div class="grid-item" style="grid-row: 0 / 0;">3</div>
@@ -60,6 +58,25 @@
   <div class="grid-item" style="grid-column-end: 1;">6</div>
 </div>
 
+<!-- Grid-column-span larger than implicit grid for row-positioned items -->
+<div class="grid-container">
+  <div class="grid-item" style="grid-row: 1 / -1; grid-column: span 4;">1</div>
+</div>
+<!-- Grid-column-span larger than implicit grid for non-positioned items -->
+<div class="grid-container">
+  <div class="grid-item" style="grid-column: span 4;">1</div>
+</div>
+<!-- Grid-row-span larger than implicit grid for column-positioned items -->
+<div class="grid-container">
+  <div class="grid-item" style="grid-column: 1 / -1; grid-row: span 4;">1</div>
+</div>
+<!-- Grid-row-span larger than implicit grid for non-positioned items -->
+<div class="grid-container">
+  <div class="grid-item" style="grid-row: span 4;">1</div>
+</div>
+
+<p>End of crash tests</p>
+
 <!-- Different column sizes -->
 <p>Should render a 2x2 grid with columns 50px and 50%</p>
 <div 
diff --git a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp
index 35c15ec415..ba702f48a4 100644
--- a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp
+++ b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp
@@ -267,6 +267,12 @@ void GridFormattingContext::run(Box const& box, LayoutMode, AvailableSpace const
 
         int column_start = 0;
         auto column_span = child_box.computed_values().grid_column_start().is_span() ? child_box.computed_values().grid_column_start().raw_value() : 1;
+        // https://drafts.csswg.org/css-grid/#auto-placement-algo
+        // 8.5. Grid Item Placement Algorithm
+        // 3.3. If the largest column span among all the items without a definite column position is larger
+        // than the width of the implicit grid, add columns to the end of the implicit grid to accommodate
+        // that column span.
+        occupation_grid.maybe_add_column(column_span);
         bool found_available_column = false;
         for (int column_index = column_start; column_index < occupation_grid.column_count(); column_index++) {
             if (!occupation_grid.is_occupied(column_index, row_start)) {
@@ -299,11 +305,6 @@ void GridFormattingContext::run(Box const& box, LayoutMode, AvailableSpace const
     // and 2, respectively. Adding columns for "items not yet positioned but with a definite column"
     // will be done in step 4.
 
-    // 3.3. If the largest column span among all the items without a definite column position is larger
-    // than the width of the implicit grid, add columns to the end of the implicit grid to accommodate
-    // that column span.
-    // NOTE: Done in step 1, 2, and will be done in step 4.
-
     // 4. Position the remaining grid items.
     // For each grid item that hasn't been positioned by the previous steps, in order-modified document
     // order:
@@ -431,6 +432,12 @@ void GridFormattingContext::run(Box const& box, LayoutMode, AvailableSpace const
             // algorithm.
             auto column_start = 0;
             auto column_span = child_box.computed_values().grid_column_start().is_span() ? child_box.computed_values().grid_column_start().raw_value() : 1;
+            // https://drafts.csswg.org/css-grid/#auto-placement-algo
+            // 8.5. Grid Item Placement Algorithm
+            // 3.3. If the largest column span among all the items without a definite column position is larger
+            // than the width of the implicit grid, add columns to the end of the implicit grid to accommodate
+            // that column span.
+            occupation_grid.maybe_add_column(column_span);
             auto row_start = 0;
             auto row_span = child_box.computed_values().grid_row_start().is_span() ? child_box.computed_values().grid_row_start().raw_value() : 1;
             auto found_unoccupied_area = false;