From f351418a1ea713f08ec4729f84f9983b14a50777 Mon Sep 17 00:00:00 2001
From: martinfalisse <martinmotteditfalisse@gmail.com>
Date: Tue, 29 Nov 2022 19:02:11 +0100
Subject: [PATCH] LibWeb: Include tests for grid track spans

Include tests for grid track spans when given for automatically-placed
grid tracks in the grid-*-end properties.
---
 Base/res/html/misc/display-grid.html | 53 ++++++++++++++++++++++++++++
 1 file changed, 53 insertions(+)

diff --git a/Base/res/html/misc/display-grid.html b/Base/res/html/misc/display-grid.html
index d9187d7c06..46fc62d7d4 100644
--- a/Base/res/html/misc/display-grid.html
+++ b/Base/res/html/misc/display-grid.html
@@ -411,3 +411,56 @@ length value, and as a minimum two lengths with an auto. -->
   <div class="grid-item" style="grid-column: 2 / span 1">1</div>
   <div class="grid-item">2</div>
 </div>
+
+<!-- Column end and span -->
+<p>There should be a column spanning 8 units, and then one spanning 4</p>
+<div 
+  class="grid-container"
+  style="
+    grid-template-columns: repeat(12,minmax(0,5fr));
+  ">
+  <div class="grid-item"
+  style="
+    grid-column-end: span 8;
+  ">1</div>
+  <div class="grid-item"
+  style="
+    grid-column-end: span 4;
+  ">2</div>
+</div>
+
+<!-- Column start span takes priority over column end span -->
+<p>There should be a column spanning 4 units, and then one spanning 8</p>
+<div 
+  class="grid-container"
+  style="
+    grid-template-columns: repeat(12,minmax(0,5fr));
+  ">
+  <div class="grid-item"
+  style="
+    grid-column-start: span 4;
+    grid-column-end: span 8;
+  ">1</div>
+  <div class="grid-item"
+  style="
+    grid-column-start: span 8;
+    grid-column-end: span 4;
+  ">2</div>
+</div>
+
+<!-- Row end and span -->
+<p>There should be a row spanning 2 units, and then one spanning 3</p>
+<div 
+  class="grid-container"
+  style="
+    grid-template-rows: repeat(5, 20px);
+  ">
+  <div class="grid-item"
+  style="
+    grid-row-end: span 2;
+  ">1</div>
+  <div class="grid-item"
+  style="
+    grid-row-end: span 3;
+  ">2</div>
+</div>