LibWeb: Add borders functionality to CSS Grid

author: martinfalisse <martinmotteditfalisse@gmail.com> 2023-04-02 16:37:14 +0200
committer: Andreas Kling <kling@serenityos.org> 2023-04-02 19:08:04 +0200
commit: 289285cd6ee213a8af6bca261275649448cacbff (patch)
tree: f2023c7276f455d3fb981ebaaaea3ef666d4edaf /Tests/LibWeb/Layout
parent: 6f52272d34baa4c6da2e0976a05ba71beec67eb5 (diff)
download: serenity-289285cd6ee213a8af6bca261275649448cacbff.zip
2 files changed, 226 insertions, 0 deletions
diff --git a/Tests/LibWeb/Layout/expected/grid/borders.txt b/Tests/LibWeb/Layout/expected/grid/borders.txt
new file mode 100644
index 0000000000..61d8110ce7
--- /dev/null
+++ b/Tests/LibWeb/Layout/expected/grid/borders.txt
@@ -0,0 +1,164 @@
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x444.28125 children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x428.28125 children: not-inline
+      Box <div.grid-container> at (8,8) content-size 784x74.9375 children: not-inline
+        BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.grid-item> at (18,18) content-size 372.140625x17.46875 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: [18,18 6.34375x17.46875]
+              "1"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.grid-item> at (410.140625,18) content-size 372x17.46875 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: [410.140625,18 8.8125x17.46875]
+              "2"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.grid-item> at (18,55.46875) content-size 372.140625x17.46875 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: [18,55.46875 9.09375x17.46875]
+              "3"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.grid-item> at (410.140625,55.46875) content-size 372x17.46875 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: [410.140625,55.46875 7.75x17.46875]
+              "4"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
+          TextNode <#text>
+      BlockContainer <(anonymous)> at (8,82.9375) content-size 784x0 children: inline
+        TextNode <#text>
+      Box <div.grid-container> at (8,82.9375) content-size 784x107.46875 children: not-inline
+        BlockContainer <(anonymous)> at (8,82.9375) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.grid-item> at (18,92.9375) content-size 372.140625x50 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: [18,92.9375 6.34375x17.46875]
+              "1"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (8,82.9375) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.grid-item> at (410.140625,92.9375) content-size 372x50 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: [410.140625,92.9375 8.8125x17.46875]
+              "2"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (8,82.9375) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.grid-item> at (18,162.9375) content-size 372.140625x17.46875 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: [18,162.9375 9.09375x17.46875]
+              "3"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (8,82.9375) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.grid-item> at (410.140625,162.9375) content-size 372x17.46875 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: [410.140625,162.9375 7.75x17.46875]
+              "4"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (8,82.9375) content-size 0x0 children: inline
+          TextNode <#text>
+      BlockContainer <(anonymous)> at (8,190.40625) content-size 784x0 children: inline
+        TextNode <#text>
+      Box <div.grid-container> at (8,190.40625) content-size 784x84.9375 children: not-inline
+        BlockContainer <(anonymous)> at (8,190.40625) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.grid-item> at (18,200.40625) content-size 347.140625x17.46875 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: [18,200.40625 6.34375x17.46875]
+              "1"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (8,190.40625) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.grid-item> at (435.140625,200.40625) content-size 347x17.46875 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: [435.140625,200.40625 8.8125x17.46875]
+              "2"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (8,190.40625) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.grid-item> at (18,247.875) content-size 347.140625x17.46875 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: [18,247.875 9.09375x17.46875]
+              "3"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (8,190.40625) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.grid-item> at (435.140625,247.875) content-size 347x17.46875 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: [435.140625,247.875 7.75x17.46875]
+              "4"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (8,190.40625) content-size 0x0 children: inline
+          TextNode <#text>
+      BlockContainer <(anonymous)> at (8,275.34375) content-size 784x0 children: inline
+        TextNode <#text>
+      Box <div.grid-container> at (8,275.34375) content-size 784x90.9375 children: not-inline
+        BlockContainer <(anonymous)> at (8,275.34375) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.grid-item> at (445.434356,285.34375) content-size 337.800018x17.46875 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: [445.434356,285.34375 6.34375x17.46875]
+              "1"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (8,275.34375) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.grid-item> at (18,338.8125) content-size 339.034362x17.46875 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: [18,338.8125 8.8125x17.46875]
+              "2"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (8,275.34375) content-size 0x0 children: inline
+          TextNode <#text>
+      BlockContainer <(anonymous)> at (8,366.28125) content-size 784x0 children: inline
+        TextNode <#text>
+      Box <div.grid-container> at (8,366.28125) content-size 784x50 children: not-inline
+        BlockContainer <(anonymous)> at (8,366.28125) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.grid-item> at (18,376.28125) content-size 280x5 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: [18,376.28125 6.34375x17.46875]
+              "1"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (8,366.28125) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.grid-item> at (318,376.28125) content-size 280x5 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: [318,376.28125 8.8125x17.46875]
+              "2"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (8,366.28125) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.grid-item> at (18,401.28125) content-size 280x5 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: [18,401.28125 8.8125x17.46875]
+              "2"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (8,366.28125) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.grid-item> at (318,401.28125) content-size 280x5 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: [318,401.28125 8.8125x17.46875]
+              "2"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (8,366.28125) content-size 0x0 children: inline
+          TextNode <#text>
+      BlockContainer <(anonymous)> at (8,416.28125) content-size 784x0 children: inline
+        TextNode <#text>
+      Box <div.grid-container> at (8,416.28125) content-size 784x20 children: not-inline
+        BlockContainer <(anonymous)> at (8,416.28125) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.grid-item> at (18,426.28125) content-size 764x0 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: [18,426.28125 6.34375x17.46875]
+              "1"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (8,416.28125) content-size 0x0 children: inline
+          TextNode <#text>
diff --git a/Tests/LibWeb/Layout/input/grid/borders.html b/Tests/LibWeb/Layout/input/grid/borders.html
new file mode 100644
index 0000000000..e43cf1fe55
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/grid/borders.html
@@ -0,0 +1,62 @@
+<style>
+  body {
+    font-family: 'SerenitySans';
+  }
+
+  .grid-container {
+    display: grid;
+    background-color: lightsalmon;
+  }
+
+  .grid-item {
+    background-color: lightblue;
+    border: 10px solid black;
+  }
+</style>
+
+<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>
+
+<div class="grid-container" style="grid-template-columns: auto auto;">
+  <div class="grid-item" style="height: 50px;">1</div>
+  <div class="grid-item">2</div>
+  <div class="grid-item">3</div>
+  <div class="grid-item">4</div>
+</div>
+
+<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>
+
+<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>
+
+<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">2</div>
+  <div class="grid-item">2</div>
+</div>
+
+<div class="grid-container" style="grid-template-rows: 20px;">
+  <div class="grid-item">1</div>
+</div>
+\ No newline at end of file
author	martinfalisse <martinmotteditfalisse@gmail.com>	2023-04-02 16:37:14 +0200
committer	Andreas Kling <kling@serenityos.org>	2023-04-02 19:08:04 +0200
commit	289285cd6ee213a8af6bca261275649448cacbff (patch)
tree	f2023c7276f455d3fb981ebaaaea3ef666d4edaf /Tests/LibWeb/Layout
parent	6f52272d34baa4c6da2e0976a05ba71beec67eb5 (diff)
download	serenity-289285cd6ee213a8af6bca261275649448cacbff.zip