From bb062e50b071eeefeaa7e6d2d57a5a3e07238998 Mon Sep 17 00:00:00 2001
From: Tom <martinmotteditfalisse@gmail.com>
Date: Wed, 28 Dec 2022 10:13:37 +0100
Subject: [PATCH] LibWeb: Don't expand grid for {row,column} spans

Fixes a bug where when you had spans that that were bigger than the
grid, would create enough tracks to accomodate them. When a fixed
position is given, there should be at a minimum a row/column available
for the track. The span will be truncated if there is no space for it
later.
---
 Base/res/html/misc/display-grid.html          | 44 +++++++++++++++++++
 .../LibWeb/Layout/GridFormattingContext.cpp   |  8 ++--
 2 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/Base/res/html/misc/display-grid.html b/Base/res/html/misc/display-grid.html
index 89180e5325..5dd269b7f7 100644
--- a/Base/res/html/misc/display-grid.html
+++ b/Base/res/html/misc/display-grid.html
@@ -150,6 +150,13 @@ that I don't quite understand. -->
     <div class="grid-item" style="grid-row: 2 / span 3;">1</div>
 </div>
 
+<div style="
+        display: grid;
+        grid-template-columns: minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto
+    ">
+    <div style="grid-column: 2/span 2;"></div>
+</div>
+
 <p>End of crash tests</p>
 
 <!-- Different column sizes -->
@@ -474,3 +481,40 @@ length value, and as a minimum two lengths with an auto. -->
     grid-row-end: span 3;
   ">2</div>
 </div>
+
+<!-- Column-gaps with overflowing column spans -->
+<p>There should be 1 column that starts at column 2 and spans until the end.</p>
+<div 
+    class="grid-container"
+    style="
+        grid-column-gap: 16px;
+        grid-template-columns: 1fr 1fr;
+    ">
+    <div class="grid-item" style="grid-column: 2 / span 5;">1</div>
+</div>
+
+<!-- Column-gaps with overflowing column spans and row spans -->
+<p>There should be 1 column that starts at column 2 and spans until the end.</p>
+<div 
+    class="grid-container"
+    style="
+        grid-column-gap: 16px;
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: 20px;
+    ">
+    <div class="grid-item" style="grid-column: 2 / span 5; grid-row: span 4">1</div>
+</div>
+
+<!-- Grid shouldn't expand to 3 columns as having too much span doesn't change size. -->
+<p>The bottom row should take up half the width of the grid.</p>
+<div 
+    class="grid-container"
+    style="
+        grid-template-columns: 1fr 1fr;
+    ">
+    <div class="grid-item" style="
+        grid-column: 1 / span 3;
+        grid-row: 1;
+    ">1</div>
+    <div class="grid-item">1</div>
+</div>
diff --git a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp
index 80a6a18a9c..639770328a 100644
--- a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp
+++ b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp
@@ -267,8 +267,8 @@ void GridFormattingContext::place_item_with_row_and_column_position(Box const& b
     column_start -= 1;
     m_positioned_boxes.append({ child_box, row_start, row_span, column_start, column_span });
 
-    m_occupation_grid.maybe_add_row(row_start + row_span);
-    m_occupation_grid.maybe_add_column(column_start + column_span);
+    m_occupation_grid.maybe_add_row(row_start + 1);
+    m_occupation_grid.maybe_add_column(column_start + 1);
     m_occupation_grid.set_occupied(column_start, column_start + column_span, row_start, row_start + row_span);
 }
 
@@ -505,8 +505,8 @@ void GridFormattingContext::place_item_with_column_position(Box const& box, Box
         auto_placement_cursor_y++;
     auto_placement_cursor_x = column_start;
 
-    m_occupation_grid.maybe_add_column(auto_placement_cursor_x + column_span);
-    m_occupation_grid.maybe_add_row(auto_placement_cursor_y + row_span);
+    m_occupation_grid.maybe_add_column(auto_placement_cursor_x + 1);
+    m_occupation_grid.maybe_add_row(auto_placement_cursor_y + 1);
 
     // 4.1.1.2. Increment the cursor's row position until a value is found where the grid item does not
     // overlap any occupied grid cells (creating new rows in the implicit grid as necessary).