LibWeb: Add display grid automated tests

12 files changed, 515 insertions, 0 deletions

diff --git a/Tests/LibWeb/Layout/input/grid/auto-fill.html b/Tests/LibWeb/Layout/input/grid/auto-fill.html
new file mode 100644
index 0000000000..93351882ff
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/grid/auto-fill.html
@@ -0,0 +1,22 @@
+<style>
+  body {
+    font-family: 'SerenitySans';
+  }
+
+  .grid-container {
+    display: grid;
+    background-color: lightsalmon;
+  }
+
+  .grid-item {
+    background-color: lightblue;
+  }
+</style>
+
+<div class="grid-container" style="
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  ">
+  <div class="grid-item">1</div>
+  <div class="grid-item">2</div>
+  <div class="grid-item">3</div>
+</div>
\ No newline at end of file
diff --git a/Tests/LibWeb/Layout/input/grid/auto-fit.html b/Tests/LibWeb/Layout/input/grid/auto-fit.html
new file mode 100644
index 0000000000..9738e847e8
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/grid/auto-fit.html
@@ -0,0 +1,22 @@
+<style>
+  body {
+    font-family: 'SerenitySans';
+  }
+
+  .grid-container {
+    display: grid;
+    background-color: lightsalmon;
+  }
+
+  .grid-item {
+    background-color: lightblue;
+  }
+</style>
+
+<div class="grid-container" style="
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  ">
+  <div class="grid-item">1</div>
+  <div class="grid-item">2</div>
+  <div class="grid-item">3</div>
+</div>
\ No newline at end of file
diff --git a/Tests/LibWeb/Layout/input/grid/basic.html b/Tests/LibWeb/Layout/input/grid/basic.html
new file mode 100644
index 0000000000..c4fc38a396
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/grid/basic.html
@@ -0,0 +1,22 @@
+<style>
+  body {
+    font-family: 'SerenitySans';
+  }
+
+  .grid-container {
+    display: grid;
+    background-color: lightsalmon;
+  }
+
+  .grid-item {
+    background-color: lightblue;
+  }
+</style>
+
+<!-- Should render a 2x2 grid -->
+<div class="grid-container" style="grid-template-columns: auto auto;">
+  <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>
\ No newline at end of file
diff --git a/Tests/LibWeb/Layout/input/grid/different-column-sizes.html b/Tests/LibWeb/Layout/input/grid/different-column-sizes.html
new file mode 100644
index 0000000000..0a0d36b0ff
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/grid/different-column-sizes.html
@@ -0,0 +1,24 @@
+<style>
+  body {
+    font-family: 'SerenitySans';
+  }
+
+  .grid-container {
+    display: grid;
+    background-color: lightsalmon;
+  }
+
+  .grid-item {
+    background-color: lightblue;
+  }
+</style>
+
+<!-- Should render a 2x2 grid with columns 50px and 50% -->
+<div class="grid-container" style="
+    grid-template-columns: 50px 50%; 
+    grid-template-rows: auto auto;">
+  <div class="grid-item" style="grid-column: 1 / 1; grid-row: 1 / 1">1</div>
+  <div class="grid-item" style="grid-column: 2 / 2; grid-row: 1 / 1">2</div>
+  <div class="grid-item" style="grid-column: 1 / 1; grid-row: 2 / 2">3</div>
+  <div class="grid-item" style="grid-column: 2 / 2; grid-row: 2 / 2">4</div>
+</div>
\ No newline at end of file
diff --git a/Tests/LibWeb/Layout/input/grid/gap.html b/Tests/LibWeb/Layout/input/grid/gap.html
new file mode 100644
index 0000000000..9dd5f6f5fd
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/grid/gap.html
@@ -0,0 +1,62 @@
+<style>
+  body {
+    font-family: 'SerenitySans';
+  }
+
+  .grid-container {
+    display: grid;
+    background-color: lightsalmon;
+  }
+
+  .grid-item {
+    background-color: lightblue;
+  }
+</style>
+
+<!-- There should be a large (50px) column gap and small (10px) row gap -->
+<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>
+
+<!-- There should be a Z-shaped gap (with both vertical and horizontal gap) -->
+<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>
+
+<!-- Column-gaps with overflowing column spans -->
+<!-- There should be 1 column that starts at column 2 and spans until the end. -->
+<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 -->
+<!-- There should be 1 column that starts at column 2 and spans until the end. -->
+<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>
+
+<!-- Bug with column gaps - grid items should have normal height -->
+<div class="grid-container with-border" style="
+      grid-column-gap: 10px;
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    ">
+  <div class="grid-item with-border">left side text</div>
+  <div class="grid-item with-border">right side text right side text right side text</div>
+</div>
\ No newline at end of file
diff --git a/Tests/LibWeb/Layout/input/grid/image-in-grid.html b/Tests/LibWeb/Layout/input/grid/image-in-grid.html
new file mode 100644
index 0000000000..3828deaf58
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/grid/image-in-grid.html
@@ -0,0 +1,32 @@
+<style>
+  body {
+    font-family: 'SerenitySans';
+  }
+
+  .grid-container {
+    display: grid;
+    background-color: lightsalmon;
+  }
+
+  .grid-item {
+    background-color: lightblue;
+  }
+</style>
+
+<!-- Should render a 64px wide image -->
+<div class="grid-container" style="
+    grid-template-columns: auto 0 minmax(0, 100%);
+  ">
+  <div class="wrapper" style="width: 100%;">
+    <img style="width: 100%;" src="data:image/jpeg;base64,
+      /9j/4AAQSkZJRgABAQEAYABgAAD/2wBDADIiJSwlHzIsKSw4NTI7S31RS0VFS5ltc1p9tZ++u7Kf
+      r6zI4f/zyNT/16yv+v/9////////wfD/////////////2wBDATU4OEtCS5NRUZP/zq/O////////
+      ////////////////////////////////////////////////////////////wAARCAAYAEADAREA
+      AhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAQMAAgQF/8QAJRABAAIBBAEEAgMAAAAAAAAAAQIR
+      AAMSITEEEyJBgTORUWFx/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAA
+      AAD/2gAMAwEAAhEDEQA/AOgM52xQDrjvAV5Xv0vfKUALlTQfeBm0HThMNHXkL0Lw/swN5qgA8yT4
+      MCS1OEOJV8mBz9Z05yfW8iSx7p4j+jA1aD6Wj7ZMzstsfvAas4UyRHvjrAkC9KhpLMClQntlqFc2
+      X1gUj4viwVObKrddH9YDoHvuujAEuNV+bLwFS8XxdSr+Cq3Vf+4F5RgQl6ZR2p1eAzU/HX80YBYy
+      JLCuexwJCO2O1bwCRidAfWBSctswbI12GAJT3yiwFR7+MBjGK2g/WAJR3FdF84E2rK5VR0YH/9k=">
+  </div>
+</div>
\ No newline at end of file
diff --git a/Tests/LibWeb/Layout/input/grid/min-max-content.html b/Tests/LibWeb/Layout/input/grid/min-max-content.html
new file mode 100644
index 0000000000..a18a8bb61a
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/grid/min-max-content.html
@@ -0,0 +1,23 @@
+<style>
+  body {
+    font-family: 'SerenitySans';
+  }
+
+  .grid-container {
+    display: grid;
+    background-color: lightsalmon;
+  }
+
+  .grid-item {
+    background-color: lightblue;
+  }
+</style>
+
+<div class="grid-container" style="
+    grid-template-columns: min-content max-content 1fr;
+    grid-template-areas: 'one two three';
+    ">
+  <div class="grid-item" style="grid-area: one; min-width: 25%; max-width: 50%;">min-content</div>
+  <div class="grid-item" style="grid-area: two;">max-content</div>
+  <div class="grid-item" style="grid-area: three;">1fr</div>
+</div>
\ No newline at end of file
diff --git a/Tests/LibWeb/Layout/input/grid/minmax.html b/Tests/LibWeb/Layout/input/grid/minmax.html
new file mode 100644
index 0000000000..c2aad80361
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/grid/minmax.html
@@ -0,0 +1,75 @@
+<style>
+  body {
+    font-family: 'SerenitySans';
+  }
+
+  .grid-container {
+    display: grid;
+    background-color: lightsalmon;
+  }
+
+  .grid-item {
+    background-color: lightblue;
+  }
+</style>
+
+<!-- Basic minmax(): Should render 2 items side by side, each with a minimum width of 150px, If there is enough space,
+     they will expand up to 300px each. -->
+<div class="grid-container" style="grid-template-columns: minmax(150px, 300px) minmax(150px, 300px);">
+  <div class="grid-item">1</div>
+  <div class="grid-item">2</div>
+</div>
+
+<!-- Basic minmax vertical
+     Since there is no vertical limit, the two rows should be 50px high each. -->
+<div class="grid-container" style="
+      grid-template-columns: minmax(150px, 300px) minmax(150px, 300px);
+      grid-template-rows: minmax(25px, 50px) minmax(25px, 50px);
+    ">
+  <div class="grid-item">1</div>
+  <div class="grid-item">2</div>
+</div>
+
+<!-- Invalid minmax value as can't have a flexible length as a minimum value.
+     Should render 2 items with no grid formatting (one on top of the other) -->
+<div class="grid-container" style="grid-template-columns: minmax(1fr, 100px) 1fr 1fr;">
+  <div class="grid-item">1</div>
+  <div class="grid-item">2</div>
+</div>
+
+<!-- Invalid minmax value in repeat as can't have a flexible length as a minimum value
+     Should render 2 items with no grid formatting (one on top of the other) -->
+<div class="grid-container" style="grid-template-columns: repeat(3, minmax(1fr, 100px));">
+  <div class="grid-item">1</div>
+  <div class="grid-item">2</div>
+</div>
+
+<!-- Basic minmax vertical
+     Since there is a height limit, the rows should be 25px high each. -->
+<div class="grid-container" style="
+      height: 50px;
+      grid-template-columns: minmax(150px, 300px) minmax(150px, 300px);
+      grid-template-rows: minmax(25px, 50px) minmax(25px, 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>
+
+<!-- Minmax horizontal with maximum as flex
+     3 columns with minimum 200px and maximum 100%. -->
+<div class="grid-container" style="
+      grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr) minmax(200px, 1fr);
+    ">
+  <div class="grid-item">1</div>
+  <div class="grid-item">2</div>
+  <div class="grid-item">3</div>
+</div>
+
+<!-- Article layout: small margins on mobile, large on desktop. Centered column with 70ch width maximum -->
+<div class="grid-container" style="grid-template-columns: minmax(1rem, 1fr) minmax(auto, 70ch) minmax(1rem, 1fr);">
+  <div class="grid-item">1</div>
+  <div class="grid-item">Article content</div>
+  <div class="grid-item">3</div>
+</div>
\ No newline at end of file
diff --git a/Tests/LibWeb/Layout/input/grid/named-tracks.html b/Tests/LibWeb/Layout/input/grid/named-tracks.html
new file mode 100644
index 0000000000..346fc043b5
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/grid/named-tracks.html
@@ -0,0 +1,62 @@
+<style>
+  body {
+    font-family: 'SerenitySans';
+  }
+
+  .grid-container {
+    display: grid;
+    background-color: lightsalmon;
+  }
+
+  .grid-item {
+    background-color: lightblue;
+  }
+</style>
+
+<!-- Should render a 2 columned grid -->
+<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>
+
+<!-- Example from https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines-->
+<!-- Named tracks there should be 4 grid items in a circle with a space in the middle -->
+<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>
+
+<!-- Named lines inside repeat -->
+<!-- Should render 2 50px columns and 2 100px columns, with grid-item 1 starting at column 2 -->
+<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>
\ No newline at end of file
diff --git a/Tests/LibWeb/Layout/input/grid/positions-and-spans.html b/Tests/LibWeb/Layout/input/grid/positions-and-spans.html
new file mode 100644
index 0000000000..683fd30836
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/grid/positions-and-spans.html
@@ -0,0 +1,67 @@
+<style>
+  body {
+    font-family: 'SerenitySans';
+  }
+
+  .grid-container {
+    display: grid;
+    background-color: lightsalmon;
+  }
+
+  .grid-item {
+    background-color: lightblue;
+  }
+</style>
+
+<!-- Column end and span -->
+<!-- There should be a column spanning 8 units, and then one spanning 4 -->
+<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 -->
+<!-- There should be a column spanning 4 units, and then one spanning 8 -->
+<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 -->
+<!-- There should be a row spanning 2 units, and then one spanning 3 -->
+<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>
+
+<!-- Grid shouldn't expand to 3 columns as having too much span doesn't change size. -->
+<!-- The bottom row should take up half the width of the grid. -->
+<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>
\ No newline at end of file
diff --git a/Tests/LibWeb/Layout/input/grid/repeat.html b/Tests/LibWeb/Layout/input/grid/repeat.html
new file mode 100644
index 0000000000..16e178a933
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/grid/repeat.html
@@ -0,0 +1,41 @@
+<style>
+  body {
+    font-family: 'SerenitySans';
+  }
+
+  .grid-container {
+    display: grid;
+    background-color: lightsalmon;
+  }
+
+  .grid-item {
+    background-color: lightblue;
+  }
+</style>
+
+<!-- Should render a full-width 4x4 grid with:
+     - one large column on the left
+     - one large column on the right, being split in half vertically, with the number 2 in the top half,
+       and numbers 3, 4, 5, and 6 in the bottom -->
+<div class="grid-container" style="
+      grid-template-columns: repeat(8, 1fr);
+      grid-template-rows: repeat(2, 25px 25px 25px 25px );
+    ">
+  <div class="grid-item" style="grid-row: 1 / -1; grid-column: span 4;">1</div>
+  <div class="grid-item" style="grid-row: 1 / 5; grid-column: 5 / -1;">2</div>
+  <div class="grid-item" style="grid-column: span 2; grid-row: span 2;">3</div>
+  <div class="grid-item" style="grid-column: span 2 / -1; grid-row: span 2;">4</div>
+  <div class="grid-item" style="grid-column: span 2; grid-row: 7 / span 100;">5</div>
+  <div class="grid-item" style="grid-column: 7 / span 2; grid-row: span 2 / -1;">6</div>
+</div>
+
+<!-- Multiple repeats -->
+<!-- Should render 2 50px columns and 2 100px columns -->
+<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>
\ No newline at end of file
diff --git a/Tests/LibWeb/Layout/input/grid/template-areas.html b/Tests/LibWeb/Layout/input/grid/template-areas.html
new file mode 100644
index 0000000000..51dd4c4224
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/grid/template-areas.html
@@ -0,0 +1,63 @@
+<style>
+  body {
+    font-family: 'SerenitySans';
+  }
+
+  .grid-container {
+    display: grid;
+    background-color: lightsalmon;
+  }
+
+  .grid-item {
+    background-color: lightblue;
+  }
+</style>
+
+<!-- Grid template areas basics -->
+<div class="grid-container" style="
+    grid-template-columns: 1fr 1fr;
+    grid-template-areas:
+      'left right-top'
+      'left right-bottom';
+  ">
+  <div style="background-color: lightpink; grid-area: right-bottom / right-bottom / right-bottom / right-bottom;">
+    right-bottom</div>
+  <div style="background-color: lightgreen; grid-area: left;">left</div>
+  <div style="background-color: lightgrey; grid-column-end: right-top;">right-top</div>
+</div>
+
+<!-- Grid-lines vs. Grid template areas -->
+<!-- There should be a left-aligned column taking up 1 / 3 of the Grid -->
+<div class="grid-container" style="
+    grid-template-columns: [c] 1fr [b] 1fr [a] 1fr;
+    grid-template-areas: 'a b c';
+    ">
+  <div class="grid-item" style="grid-column-start: a; grid-column-end: a;">1fr</div>
+</div>
+
+<!-- Valid grid areas -->
+<!-- Column taking up 50% width -->
+<div class="grid-container" style="
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-areas: 'one one three two' 'one one four two' 'one one four two';
+    ">
+  <div class="grid-item" style="grid-column-start: one; grid-column-end: one;">1fr</div>
+</div>
+
+<!-- Valid grid areas. This test should ideally fail differently FIXME -->
+<!-- Left-aligned column taking up 25% width -->
+<div class="grid-container" style="
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-areas: 'one one three two' 'one one four one';
+    ">
+  <div class="grid-item" style="grid-column-start: two; grid-column-end: two;">1fr</div>
+</div>
+
+<!-- Valid grid areas. This test should ideally fail differently FIXME -->
+<!-- Left-aligned column taking up 25% width -->
+<div class="grid-container" style="
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-areas: 'one one three two' 'one one four five' 'one one four two';
+    ">
+  <div class="grid-item" style="grid-column-start: two; grid-column-end: two;">1fr</div>
+</div>
\ No newline at end of file