Tests/LibWeb: Split input/grid/minmax.html into smaller tests

5 files changed, 69 insertions, 71 deletions

diff --git a/Tests/LibWeb/Layout/input/grid/minmax-1.html b/Tests/LibWeb/Layout/input/grid/minmax-1.html
new file mode 100644
index 0000000000..1ad6f3128c
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/grid/minmax-1.html
@@ -0,0 +1,15 @@
+<style>
+.container {
+    display: grid;
+    background-color: lightsalmon;
+    grid-template-columns: minmax(150px, 300px) minmax(150px, 300px);
+}
+
+.one {
+    background-color: lightblue;
+}
+
+.two {
+    background-color: yellowgreen;
+}
+</style><div class="container"><div class="one">1</div><div class="two">2</div></div>
\ No newline at end of file
diff --git a/Tests/LibWeb/Layout/input/grid/minmax-2.html b/Tests/LibWeb/Layout/input/grid/minmax-2.html
new file mode 100644
index 0000000000..3f0b214aea
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/grid/minmax-2.html
@@ -0,0 +1,17 @@
+<style>
+.container {
+    display: grid;
+    background-color: lightsalmon;
+    grid-template-columns: minmax(150px, 300px) minmax(150px, 300px);
+    /* FIXME: We currently does not layout this correctly. Rows take 25px even if 50px are available. */
+    grid-template-rows: minmax(25px, 50px) minmax(25px, 50px);
+}
+
+.one {
+    background-color: lightblue;
+}
+
+.two {
+    background-color: yellowgreen;
+}
+</style><div class="container"><div class="one">1</div><div class="two">2</div></div>
\ No newline at end of file
diff --git a/Tests/LibWeb/Layout/input/grid/minmax-3.html b/Tests/LibWeb/Layout/input/grid/minmax-3.html
new file mode 100644
index 0000000000..2a1bf08c8d
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/grid/minmax-3.html
@@ -0,0 +1,19 @@
+<style>
+.container {
+    display: grid;
+    background-color: lightsalmon;
+    grid-template-columns: minmax(200px, 1fr) minmax(100px, 200px) minmax(200px, 1fr);
+}
+
+.one {
+    background-color: lightblue;
+}
+
+.two {
+    background-color: yellowgreen;
+}
+
+.three {
+    background-color: palevioletred;
+}
+</style><div class="container"><div class="one">1</div><div class="two">2</div><div class="three">3</div></div>
\ No newline at end of file
diff --git a/Tests/LibWeb/Layout/input/grid/minmax-invalid-1.html b/Tests/LibWeb/Layout/input/grid/minmax-invalid-1.html
new file mode 100644
index 0000000000..563617a177
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/grid/minmax-invalid-1.html
@@ -0,0 +1,18 @@
+<style>
+.container {
+    display: grid;
+    background-color: lightsalmon;
+
+    /* Invalid minmax value as can't have a flexible length as a minimum value. */
+    grid-template-columns: minmax(1fr, 100px) 1fr 1fr;
+}
+
+.one {
+    background-color: lightblue;
+}
+
+.two {
+    background-color: yellowgreen;
+}
+</style>
+<div class="container"><div class="one">1</div><div class="two">2</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
deleted file mode 100644
index 56cc996fd8..0000000000
--- a/Tests/LibWeb/Layout/input/grid/minmax.html
+++ /dev/null
@@ -1,71 +0,0 @@
-<style>
-  .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