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

The file gap.html, which previously had multiple grid tests, has now been divided into smaller files, each containing only one grid test. It is going to make it easier to identify what inputs have been affected by changes in layout code.
author: Aliaksandr Kalenik <kalenik.aliaksandr@gmail.com> 2023-05-08 23:52:12 +0300
committer: Andreas Kling <kling@serenityos.org> 2023-05-09 06:37:30 +0200
commit: 0dcc93ed3d87094923cf2d34febf307c9c78c381 (patch)
tree: ad9b6c8ed697a50eff1cba92db8a17d281ab9ad3 /Tests/LibWeb/Layout
parent: bb90bf0141010788747e419d72a785ab8db2d4d3 (diff)
download: serenity-0dcc93ed3d87094923cf2d34febf307c9c78c381.zip
8 files changed, 97 insertions, 160 deletions
diff --git a/Tests/LibWeb/Layout/expected/grid/gap.txt b/Tests/LibWeb/Layout/expected/grid/gap.txt
deleted file mode 100644
index 77336df1df..0000000000
--- a/Tests/LibWeb/Layout/expected/grid/gap.txt
+++ /dev/null
@@ -1,102 +0,0 @@
-Viewport <#document> at (0,0) content-size 800x600 children: not-inline
-  BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
-    BlockContainer <body> at (8,8) content-size 784x150.8125 children: not-inline
-      Box <div.grid-container> at (8,8) content-size 784x44.9375 [GFC] children: not-inline
-        BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
-          TextNode <#text>
-        BlockContainer <div.grid-item> at (8,8) content-size 367.140625x17.46875 [BFC] children: inline
-          line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-            frag 0 from TextNode start: 0, length: 1, rect: [8,8 6.34375x17.46875]
-              "1"
-          TextNode <#text>
-        BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
-          TextNode <#text>
-        BlockContainer <div.grid-item> at (425.140625,8) content-size 367x17.46875 [BFC] children: inline
-          line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-            frag 0 from TextNode start: 0, length: 1, rect: [425.140625,8 8.8125x17.46875]
-              "2"
-          TextNode <#text>
-        BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
-          TextNode <#text>
-        BlockContainer <div.grid-item> at (8,35.46875) content-size 367.140625x17.46875 [BFC] children: inline
-          line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-            frag 0 from TextNode start: 0, length: 1, rect: [8,35.46875 9.09375x17.46875]
-              "3"
-          TextNode <#text>
-        BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
-          TextNode <#text>
-        BlockContainer <div.grid-item> at (425.140625,35.46875) content-size 367x17.46875 [BFC] children: inline
-          line 0 width: 7.75, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-            frag 0 from TextNode start: 0, length: 1, rect: [425.140625,35.46875 7.75x17.46875]
-              "4"
-          TextNode <#text>
-        BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
-          TextNode <#text>
-      BlockContainer <(anonymous)> at (8,52.9375) content-size 784x0 children: inline
-        TextNode <#text>
-        TextNode <#text>
-      Box <div.grid-container> at (8,52.9375) content-size 784x50.9375 [GFC] children: not-inline
-        BlockContainer <(anonymous)> at (8,52.9375) content-size 0x0 [BFC] children: inline
-          TextNode <#text>
-        BlockContainer <div.grid-item> at (435.934356,52.9375) content-size 357.300018x17.46875 [BFC] children: inline
-          line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-            frag 0 from TextNode start: 0, length: 1, rect: [435.934356,52.9375 6.34375x17.46875]
-              "1"
-          TextNode <#text>
-        BlockContainer <(anonymous)> at (8,52.9375) content-size 0x0 [BFC] children: inline
-          TextNode <#text>
-        BlockContainer <div.grid-item> at (8,86.40625) content-size 358.534362x17.46875 [BFC] children: inline
-          line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-            frag 0 from TextNode start: 0, length: 1, rect: [8,86.40625 8.8125x17.46875]
-              "2"
-          TextNode <#text>
-        BlockContainer <(anonymous)> at (8,52.9375) content-size 0x0 [BFC] children: inline
-          TextNode <#text>
-      BlockContainer <(anonymous)> at (8,103.875) content-size 784x0 children: inline
-        TextNode <#text>
-        TextNode <#text>
-        TextNode <#text>
-      Box <div.grid-container> at (8,103.875) content-size 784x17.46875 [GFC] children: not-inline
-        BlockContainer <(anonymous)> at (8,103.875) content-size 0x0 [BFC] children: inline
-          TextNode <#text>
-        BlockContainer <div.grid-item> at (408,103.875) content-size 384x17.46875 [BFC] children: inline
-          line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-            frag 0 from TextNode start: 0, length: 1, rect: [408,103.875 6.34375x17.46875]
-              "1"
-          TextNode <#text>
-        BlockContainer <(anonymous)> at (8,103.875) content-size 0x0 [BFC] children: inline
-          TextNode <#text>
-      BlockContainer <(anonymous)> at (8,121.34375) content-size 784x0 children: inline
-        TextNode <#text>
-        TextNode <#text>
-        TextNode <#text>
-      Box <div.grid-container> at (8,121.34375) content-size 784x20 [GFC] children: not-inline
-        BlockContainer <(anonymous)> at (8,121.34375) content-size 0x0 [BFC] children: inline
-          TextNode <#text>
-        BlockContainer <div.grid-item> at (408,121.34375) content-size 384x20 [BFC] children: inline
-          line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-            frag 0 from TextNode start: 0, length: 1, rect: [408,121.34375 6.34375x17.46875]
-              "1"
-          TextNode <#text>
-        BlockContainer <(anonymous)> at (8,121.34375) content-size 0x0 [BFC] children: inline
-          TextNode <#text>
-      BlockContainer <(anonymous)> at (8,141.34375) content-size 784x0 children: inline
-        TextNode <#text>
-        TextNode <#text>
-      Box <div.grid-container.with-border> at (8,141.34375) content-size 784x17.46875 [GFC] children: not-inline
-        BlockContainer <(anonymous)> at (8,141.34375) content-size 0x0 [BFC] children: inline
-          TextNode <#text>
-        BlockContainer <div.grid-item.with-border> at (8,141.34375) content-size 387x17.46875 [BFC] children: inline
-          line 0 width: 104.875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-            frag 0 from TextNode start: 0, length: 14, rect: [8,141.34375 104.875x17.46875]
-              "left side text"
-          TextNode <#text>
-        BlockContainer <(anonymous)> at (8,141.34375) content-size 0x0 [BFC] children: inline
-          TextNode <#text>
-        BlockContainer <div.grid-item.with-border> at (405,141.34375) content-size 387x17.46875 [BFC] children: inline
-          line 0 width: 363.203125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-            frag 0 from TextNode start: 0, length: 47, rect: [405,141.34375 363.203125x17.46875]
-              "right side text right side text right side text"
-          TextNode <#text>
-        BlockContainer <(anonymous)> at (8,141.34375) content-size 0x0 [BFC] children: inline
-          TextNode <#text>
diff --git a/Tests/LibWeb/Layout/expected/grid/grid-gap-1.txt b/Tests/LibWeb/Layout/expected/grid/grid-gap-1.txt
new file mode 100644
index 0000000000..0f271c9117
--- /dev/null
+++ b/Tests/LibWeb/Layout/expected/grid/grid-gap-1.txt
@@ -0,0 +1,24 @@
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x84.9375 children: not-inline
+      Box <div.grid-container> at (8,8) content-size 784x84.9375 [GFC] children: not-inline
+        BlockContainer <div.one> at (8,8) content-size 342.140625x17.46875 [BFC] children: inline
+          line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 1, rect: [8,8 6.34375x17.46875]
+              "1"
+          TextNode <#text>
+        BlockContainer <div.two> at (450.140625,8) content-size 342x17.46875 [BFC] children: inline
+          line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 1, rect: [450.140625,8 8.8125x17.46875]
+              "2"
+          TextNode <#text>
+        BlockContainer <div.three> at (8,75.46875) content-size 342.140625x17.46875 [BFC] children: inline
+          line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 1, rect: [8,75.46875 9.09375x17.46875]
+              "3"
+          TextNode <#text>
+        BlockContainer <div.four> at (450.140625,75.46875) content-size 342x17.46875 [BFC] children: inline
+          line 0 width: 7.75, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 1, rect: [450.140625,75.46875 7.75x17.46875]
+              "4"
+          TextNode <#text>
diff --git a/Tests/LibWeb/Layout/expected/grid/grid-gap-2.txt b/Tests/LibWeb/Layout/expected/grid/grid-gap-2.txt
new file mode 100644
index 0000000000..55959efe94
--- /dev/null
+++ b/Tests/LibWeb/Layout/expected/grid/grid-gap-2.txt
@@ -0,0 +1,14 @@
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x50.9375 children: not-inline
+      Box <div.container> at (8,8) content-size 784x50.9375 [GFC] children: not-inline
+        BlockContainer <div.item> at (435.934356,8) content-size 357.300018x17.46875 [BFC] children: inline
+          line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 1, rect: [435.934356,8 6.34375x17.46875]
+              "1"
+          TextNode <#text>
+        BlockContainer <div.item> at (8,41.46875) content-size 358.534362x17.46875 [BFC] children: inline
+          line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 1, rect: [8,41.46875 8.8125x17.46875]
+              "2"
+          TextNode <#text>
diff --git a/Tests/LibWeb/Layout/expected/grid/grid-gap-3.txt b/Tests/LibWeb/Layout/expected/grid/grid-gap-3.txt
new file mode 100644
index 0000000000..ab5091cc7e
--- /dev/null
+++ b/Tests/LibWeb/Layout/expected/grid/grid-gap-3.txt
@@ -0,0 +1,9 @@
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x17.46875 children: not-inline
+      Box <div.container> at (8,8) content-size 784x17.46875 [GFC] children: not-inline
+        BlockContainer <div.item> at (410,8) content-size 382x17.46875 [BFC] children: inline
+          line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 1, rect: [410,8 6.34375x17.46875]
+              "1"
+          TextNode <#text>
diff --git a/Tests/LibWeb/Layout/input/grid/gap.html b/Tests/LibWeb/Layout/input/grid/gap.html
deleted file mode 100644
index 2fc70eeb68..0000000000
--- a/Tests/LibWeb/Layout/input/grid/gap.html
+++ /dev/null
@@ -1,58 +0,0 @@
-<style>
-  .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/grid-gap-1.html b/Tests/LibWeb/Layout/input/grid/grid-gap-1.html
new file mode 100644
index 0000000000..a6cb14abdb
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/grid/grid-gap-1.html
@@ -0,0 +1,24 @@
+<style>
+.grid-container {
+    display: grid;
+    background-color: lightsalmon;
+    grid-template-columns: auto auto;
+    gap: 50px 100px;
+}
+
+.one {
+    background-color: lightblue;
+}
+
+.two {
+    background-color: yellowgreen;
+}
+
+.three {
+    background-color: palevioletred;
+}
+
+.four {
+    background-color: lightseagreen;
+}
+</style><div class="grid-container"><div class="one">1</div><div class="two">2</div><div class="three">3</div><div class="four">4</div></div>
+\ No newline at end of file
diff --git a/Tests/LibWeb/Layout/input/grid/grid-gap-2.html b/Tests/LibWeb/Layout/input/grid/grid-gap-2.html
new file mode 100644
index 0000000000..201957d45e
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/grid/grid-gap-2.html
@@ -0,0 +1,13 @@
+<style>
+.container {
+    display: grid;
+    background-color: lightsalmon;
+    grid-template-columns: auto auto;
+    gap: calc(1vh + 10px) calc(10% - 10px);
+}
+
+.item {
+    background-color: palevioletred;
+}
+</style>
+<div class="container"><div class="item" style="grid-column: 2 / span 1">1</div><div class="item">2</div></div>
+\ No newline at end of file
diff --git a/Tests/LibWeb/Layout/input/grid/grid-gap-3.html b/Tests/LibWeb/Layout/input/grid/grid-gap-3.html
new file mode 100644
index 0000000000..9bdfcf95cc
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/grid/grid-gap-3.html
@@ -0,0 +1,13 @@
+<style>
+.container {
+    display: grid;
+    background-color: lightsalmon;
+    grid-column-gap: 20px;
+    grid-template-columns: 1fr 1fr;
+}
+
+.item {
+    background-color: palevioletred;
+    grid-column: 2;
+}
+</style><div class="container"><div class="item">1</div></div>
+\ No newline at end of file
author	Aliaksandr Kalenik <kalenik.aliaksandr@gmail.com>	2023-05-08 23:52:12 +0300
committer	Andreas Kling <kling@serenityos.org>	2023-05-09 06:37:30 +0200
commit	0dcc93ed3d87094923cf2d34febf307c9c78c381 (patch)
tree	ad9b6c8ed697a50eff1cba92db8a17d281ab9ad3 /Tests/LibWeb/Layout
parent	bb90bf0141010788747e419d72a785ab8db2d4d3 (diff)
download	serenity-0dcc93ed3d87094923cf2d34febf307c9c78c381.zip