Tests/LibWeb: Split input/grid/template-areas.html into smaller tests

The file template-areas.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. Also this change removes parts of template-areas.html that we can't layout correctly yet.
author: Aliaksandr Kalenik <kalenik.aliaksandr@gmail.com> 2023-05-08 23:08:22 +0300
committer: Andreas Kling <kling@serenityos.org> 2023-05-09 06:37:30 +0200
commit: bb90bf0141010788747e419d72a785ab8db2d4d3 (patch)
tree: 6ef73ae7cfc32b675616f0359fec111fff9c324d /Tests
parent: 3af92a76bea0bc2cfefbade735a7318925d8fc88 (diff)
download: serenity-bb90bf0141010788747e419d72a785ab8db2d4d3.zip
9 files changed, 107 insertions, 143 deletions
diff --git a/Tests/LibWeb/Layout/expected/grid/grid-template-areas-basics.txt b/Tests/LibWeb/Layout/expected/grid/grid-template-areas-basics.txt
new file mode 100644
index 0000000000..c3701400b9
--- /dev/null
+++ b/Tests/LibWeb/Layout/expected/grid/grid-template-areas-basics.txt
@@ -0,0 +1,19 @@
+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 784x34.9375 children: not-inline
+      Box <div.container> at (8,8) content-size 784x34.9375 [GFC] children: not-inline
+        BlockContainer <div.item.right-bottom> at (400,25.46875) content-size 392x17.46875 [BFC] children: inline
+          line 0 width: 99.703125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 12, rect: [400,25.46875 99.703125x17.46875]
+              "right-bottom"
+          TextNode <#text>
+        BlockContainer <div.item.left> at (8,8) content-size 392x34.9375 [BFC] children: inline
+          line 0 width: 26.25, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 4, rect: [8,8 26.25x17.46875]
+              "left"
+          TextNode <#text>
+        BlockContainer <div.item.right-top> at (400,8) content-size 392x17.46875 [BFC] children: inline
+          line 0 width: 70.234375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 9, rect: [400,8 70.234375x17.46875]
+              "right-top"
+          TextNode <#text>
diff --git a/Tests/LibWeb/Layout/expected/grid/template-areas.txt b/Tests/LibWeb/Layout/expected/grid/template-areas.txt
deleted file mode 100644
index ff752eaff5..0000000000
--- a/Tests/LibWeb/Layout/expected/grid/template-areas.txt
+++ /dev/null
@@ -1,83 +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 784x104.8125 children: not-inline
-      Box <div.grid-container> at (8,8) content-size 784x34.9375 [GFC] children: not-inline
-        BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
-          TextNode <#text>
-        BlockContainer <div> at (400,25.46875) content-size 392x17.46875 [BFC] children: inline
-          line 0 width: 99.703125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-            frag 0 from TextNode start: 1, length: 12, rect: [400,25.46875 99.703125x17.46875]
-              "right-bottom"
-          TextNode <#text>
-        BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
-          TextNode <#text>
-        BlockContainer <div> at (8,8) content-size 392x34.9375 [BFC] children: inline
-          line 0 width: 26.25, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-            frag 0 from TextNode start: 0, length: 4, rect: [8,8 26.25x17.46875]
-              "left"
-          TextNode <#text>
-        BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
-          TextNode <#text>
-        BlockContainer <div> at (400,8) content-size 392x17.46875 [BFC] children: inline
-          line 0 width: 70.234375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-            frag 0 from TextNode start: 0, length: 9, rect: [400,8 70.234375x17.46875]
-              "right-top"
-          TextNode <#text>
-        BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
-          TextNode <#text>
-      BlockContainer <(anonymous)> at (8,42.9375) content-size 784x0 children: inline
-        TextNode <#text>
-        TextNode <#text>
-        TextNode <#text>
-      Box <div.grid-container> at (8,42.9375) content-size 784x17.46875 [GFC] children: not-inline
-        BlockContainer <(anonymous)> at (8,42.9375) content-size 0x0 [BFC] children: inline
-          TextNode <#text>
-        BlockContainer <div.grid-item> at (8,42.9375) content-size 261.333343x17.46875 [BFC] children: inline
-          line 0 width: 21.609375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-            frag 0 from TextNode start: 0, length: 3, rect: [8,42.9375 21.609375x17.46875]
-              "1fr"
-          TextNode <#text>
-        BlockContainer <(anonymous)> at (8,42.9375) content-size 0x0 [BFC] children: inline
-          TextNode <#text>
-      BlockContainer <(anonymous)> at (8,60.40625) content-size 784x0 children: inline
-        TextNode <#text>
-        TextNode <#text>
-        TextNode <#text>
-      Box <div.grid-container> at (8,60.40625) content-size 784x17.46875 [GFC] children: not-inline
-        BlockContainer <(anonymous)> at (8,60.40625) content-size 0x0 [BFC] children: inline
-          TextNode <#text>
-        BlockContainer <div.grid-item> at (8,60.40625) content-size 392x17.46875 [BFC] children: inline
-          line 0 width: 21.609375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-            frag 0 from TextNode start: 0, length: 3, rect: [8,60.40625 21.609375x17.46875]
-              "1fr"
-          TextNode <#text>
-        BlockContainer <(anonymous)> at (8,60.40625) content-size 0x0 [BFC] children: inline
-          TextNode <#text>
-      BlockContainer <(anonymous)> at (8,77.875) content-size 784x0 children: inline
-        TextNode <#text>
-        TextNode <#text>
-        TextNode <#text>
-      Box <div.grid-container> at (8,77.875) content-size 784x17.46875 [GFC] children: not-inline
-        BlockContainer <(anonymous)> at (8,77.875) content-size 0x0 [BFC] children: inline
-          TextNode <#text>
-        BlockContainer <div.grid-item> at (8,77.875) content-size 196x17.46875 [BFC] children: inline
-          line 0 width: 21.609375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-            frag 0 from TextNode start: 0, length: 3, rect: [8,77.875 21.609375x17.46875]
-              "1fr"
-          TextNode <#text>
-        BlockContainer <(anonymous)> at (8,77.875) content-size 0x0 [BFC] children: inline
-          TextNode <#text>
-      BlockContainer <(anonymous)> at (8,95.34375) content-size 784x0 children: inline
-        TextNode <#text>
-        TextNode <#text>
-        TextNode <#text>
-      Box <div.grid-container> at (8,95.34375) content-size 784x17.46875 [GFC] children: not-inline
-        BlockContainer <(anonymous)> at (8,95.34375) content-size 0x0 [BFC] children: inline
-          TextNode <#text>
-        BlockContainer <div.grid-item> at (8,95.34375) content-size 196x17.46875 [BFC] children: inline
-          line 0 width: 21.609375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-            frag 0 from TextNode start: 0, length: 3, rect: [8,95.34375 21.609375x17.46875]
-              "1fr"
-          TextNode <#text>
-        BlockContainer <(anonymous)> at (8,95.34375) content-size 0x0 [BFC] children: inline
-          TextNode <#text>
diff --git a/Tests/LibWeb/Layout/expected/grid/template-lines-and-areas.txt b/Tests/LibWeb/Layout/expected/grid/template-lines-and-areas.txt
new file mode 100644
index 0000000000..a94c806bd8
--- /dev/null
+++ b/Tests/LibWeb/Layout/expected/grid/template-lines-and-areas.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 784x17.46875 children: not-inline
+      Box <div.grid> at (8,8) content-size 784x17.46875 [GFC] children: not-inline
+        BlockContainer <div.item-left> at (8,8) content-size 261.333343x17.46875 [BFC] children: inline
+          line 0 width: 21.609375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 3, rect: [8,8 21.609375x17.46875]
+              "1fr"
+          TextNode <#text>
+        BlockContainer <div.item-right> at (530.666687,8) content-size 261.333312x17.46875 [BFC] children: inline
+          line 0 width: 21.609375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 3, rect: [530.666687,8 21.609375x17.46875]
+              "1fr"
+          TextNode <#text>
diff --git a/Tests/LibWeb/Layout/expected/grid/valid-grid-areas-1.txt b/Tests/LibWeb/Layout/expected/grid/valid-grid-areas-1.txt
new file mode 100644
index 0000000000..4e26284f6e
--- /dev/null
+++ b/Tests/LibWeb/Layout/expected/grid/valid-grid-areas-1.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.grid-container> at (8,8) content-size 784x17.46875 [GFC] children: not-inline
+        BlockContainer <div.grid-item> at (8,8) content-size 392x17.46875 [BFC] children: inline
+          line 0 width: 21.609375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 3, rect: [8,8 21.609375x17.46875]
+              "1fr"
+          TextNode <#text>
diff --git a/Tests/LibWeb/Layout/input/grid/grid-template-areas-basics.html b/Tests/LibWeb/Layout/input/grid/grid-template-areas-basics.html
new file mode 100644
index 0000000000..208ab690d6
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/grid/grid-template-areas-basics.html
@@ -0,0 +1,29 @@
+<style>
+.container {
+    display: grid;
+    background-color: lightsalmon;
+    grid-template-columns: 1fr 1fr;
+    grid-template-areas:
+        "left right-top"
+        "left right-bottom";
+}
+
+.item {
+    background-color: lightblue;
+}
+
+.right-bottom {
+    background-color: lightpink;
+    grid-area: right-bottom / right-bottom / right-bottom / right-bottom;
+}
+
+.left {
+    background-color: lightgreen;
+    grid-area: left;
+}
+
+.right-top {
+    background-color: lightgrey;
+    grid-column-end: right-top;
+}
+</style><div class="container"><div class="item right-bottom">right-bottom</div><div class="item left">left</div><div class="item right-top">right-top</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
deleted file mode 100644
index aa5ab44103..0000000000
--- a/Tests/LibWeb/Layout/input/grid/template-areas.html
+++ /dev/null
@@ -1,59 +0,0 @@
-<style>
-  .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
diff --git a/Tests/LibWeb/Layout/input/grid/template-lines-and-areas.html b/Tests/LibWeb/Layout/input/grid/template-lines-and-areas.html
new file mode 100644
index 0000000000..02f616812e
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/grid/template-lines-and-areas.html
@@ -0,0 +1,21 @@
+<style>
+.grid {
+    display: grid;
+    background-color: lightsalmon;
+    grid-template-columns: [c] 1fr [b] 1fr [a] 1fr;
+    grid-template-areas: "a b c";
+}
+
+.item-left {
+    background-color: lightblue;
+    grid-column-start: a;
+    grid-column-end: a;
+}
+
+/* FIXME: This item should start at [b] and end at [c]. Currently it starts at [c] and ends at [c]. */
+.item-right {
+    background-color: yellowgreen;
+    grid-column-start: b;
+    grid-column-end: c;
+}
+</style><div class="grid"><div class="item-left">1fr</div><div class="item-right">1fr</div></div>
+\ No newline at end of file
diff --git a/Tests/LibWeb/Layout/input/grid/valid-grid-areas-1.html b/Tests/LibWeb/Layout/input/grid/valid-grid-areas-1.html
new file mode 100644
index 0000000000..ce6611aac7
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/grid/valid-grid-areas-1.html
@@ -0,0 +1,14 @@
+<style>
+.grid-container {
+    display: grid;
+    background-color: lightsalmon;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-areas: "one one three two";
+}
+
+.grid-item {
+    background-color: lightblue;
+    grid-column-start: one;
+    grid-column-end: one;
+}
+</style><div class="grid-container"><div class="grid-item">1fr</div></div>
+\ No newline at end of file
diff --git a/Tests/LibWeb/Layout/layout_test.sh b/Tests/LibWeb/Layout/layout_test.sh
index e52103ac49..ddc2855783 100755
--- a/Tests/LibWeb/Layout/layout_test.sh
+++ b/Tests/LibWeb/Layout/layout_test.sh
@@ -12,7 +12,7 @@ fi
 
 BROWSER_BINARY="./headless-browser"
 
-find "${SCRIPT_DIR}/input/" -type f -name "*.html" -print0 | while IFS= read -r -d '' input_html_path; do
+find "${SCRIPT_DIR}/input/grid" -type f -name "*.html" -print0 | while IFS= read -r -d '' input_html_path; do
     input_html_file=${input_html_path/${SCRIPT_DIR}"/input/"/}
     input_html_file=${input_html_file/".html"/}
author	Aliaksandr Kalenik <kalenik.aliaksandr@gmail.com>	2023-05-08 23:08:22 +0300
committer	Andreas Kling <kling@serenityos.org>	2023-05-09 06:37:30 +0200
commit	bb90bf0141010788747e419d72a785ab8db2d4d3 (patch)
tree	6ef73ae7cfc32b675616f0359fec111fff9c324d /Tests
parent	3af92a76bea0bc2cfefbade735a7318925d8fc88 (diff)
download	serenity-bb90bf0141010788747e419d72a785ab8db2d4d3.zip