From 0586730a923bfdae76163214016e06032638b586 Mon Sep 17 00:00:00 2001
From: martinfalisse <martinmotteditfalisse@gmail.com>
Date: Sun, 6 Nov 2022 13:53:19 +0100
Subject: [PATCH] Base: Add tests for grid gap

---
 Base/res/html/misc/display-grid.html | 40 ++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/Base/res/html/misc/display-grid.html b/Base/res/html/misc/display-grid.html
index c46ddbe518..03f5a41b97 100644
--- a/Base/res/html/misc/display-grid.html
+++ b/Base/res/html/misc/display-grid.html
@@ -108,6 +108,19 @@ that I don't quite understand. -->
   <div class="grid-item" style="grid-row: notfound;">1</div>
 </div>
 
+<!-- Percentage gap in vertical orientation (Not yet implemented) -->
+<div 
+  class="grid-container"
+  style="
+    grid-template-columns: auto auto;
+    gap: calc(4% + 2px);
+  ">
+  <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>
+
 <p>End of crash tests</p>
 
 <!-- Different column sizes -->
@@ -351,4 +364,31 @@ length value, and as a minimum two lengths with an auto. -->
       MCS1OEOJV8mBz9Z05yfW8iSx7p4j+jA1aD6Wj7ZMzstsfvAas4UyRHvjrAkC9KhpLMClQntlqFc2
       X1gUj4viwVObKrddH9YDoHvuujAEuNV+bLwFS8XxdSr+Cq3Vf+4F5RgQl6ZR2p1eAzU/HX80YBYy
       JLCuexwJCO2O1bwCRidAfWBSctswbI12GAJT3yiwFR7+MBjGK2g/WAJR3FdF84E2rK5VR0YH/9k=">
+  </div>
+</div>
+
+<!-- Gap basics -->
+<p>There should be a large (50px) column gap and small (10px) row gap</p>
+<div 
+  class="grid-container"
+  style="
+    grid-template-columns: auto auto;
+    gap: 10px 50px;
+  ">
+  <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>
+
+<!-- Gap basics -->
+<p>There should be a Z-shaped gap (with both vertical and horizontal gap)</p>
+<div 
+  class="grid-container"
+  style="
+    grid-template-columns: auto auto;
+    gap: calc(1vh + 10px) calc(10% - 10px);
+  ">
+  <div class="grid-item" style="grid-column: 2 / span 1">1</div>
+  <div class="grid-item">2</div>
 </div>