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.

1 files changed, 104 insertions, 0 deletions

diff --git a/Base/res/html/misc/display-grid.html b/Base/res/html/misc/display-grid.html
index 8dd6237c25..c88118d0e2 100644
--- a/Base/res/html/misc/display-grid.html
+++ b/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>