From 92cb32b905481b22bbd4e79f694b3a822c06b900 Mon Sep 17 00:00:00 2001
From: Aliaksandr Kalenik <kalenik.aliaksandr@gmail.com>
Date: Wed, 8 Feb 2023 01:40:38 +0300
Subject: LibWeb: Add tests for flex formatting context

---
 Tests/LibWeb/Layout/expected/flex-auto.txt         | 29 +++++++++++++++++
 .../expected/flex-column-constained-wrap.txt       | 29 +++++++++++++++++
 .../expected/flex-column-constrained-nowrap.txt    | 29 +++++++++++++++++
 ...column-height-constrained-width-constrained.txt | 29 +++++++++++++++++
 .../expected/flex-column-height-constrained.txt    | 29 +++++++++++++++++
 .../expected/flex-container-constrained-nowrap.txt | 29 +++++++++++++++++
 .../expected/flex-container-constrained-wrap.txt   | 29 +++++++++++++++++
 .../expected/flex-container-width-constrained.txt  | 29 +++++++++++++++++
 .../LibWeb/Layout/expected/flex-grow-0-column.txt  | 29 +++++++++++++++++
 Tests/LibWeb/Layout/expected/flex-grow-1.txt       | 29 +++++++++++++++++
 Tests/LibWeb/Layout/expected/flex-grow-2.txt       | 29 +++++++++++++++++
 Tests/LibWeb/Layout/expected/flex-row.txt          | 29 +++++++++++++++++
 Tests/LibWeb/Layout/expected/flex-shrink-1.txt     | 38 ++++++++++++++++++++++
 Tests/LibWeb/Layout/expected/flex-shrink-2.txt     | 29 +++++++++++++++++
 Tests/LibWeb/Layout/expected/flex-shrink-3.txt     | 29 +++++++++++++++++
 Tests/LibWeb/Layout/input/flex-auto.html           | 23 +++++++++++++
 .../Layout/input/flex-column-constained-wrap.html  | 25 ++++++++++++++
 .../input/flex-column-constrained-nowrap.html      | 24 ++++++++++++++
 ...olumn-height-constrained-width-constrained.html | 24 ++++++++++++++
 .../input/flex-column-height-constrained.html      | 23 +++++++++++++
 .../input/flex-container-constrained-nowrap.html   | 23 +++++++++++++
 .../input/flex-container-constrained-wrap.html     | 23 +++++++++++++
 .../input/flex-container-width-constrained.html    | 22 +++++++++++++
 Tests/LibWeb/Layout/input/flex-grow-0-column.html  | 23 +++++++++++++
 Tests/LibWeb/Layout/input/flex-grow-1.html         | 22 +++++++++++++
 Tests/LibWeb/Layout/input/flex-grow-2.html         | 22 +++++++++++++
 Tests/LibWeb/Layout/input/flex-row.html            | 21 ++++++++++++
 Tests/LibWeb/Layout/input/flex-shrink-1.html       | 22 +++++++++++++
 Tests/LibWeb/Layout/input/flex-shrink-2.html       | 22 +++++++++++++
 Tests/LibWeb/Layout/input/flex-shrink-3.html       | 22 +++++++++++++
 30 files changed, 785 insertions(+)
 create mode 100644 Tests/LibWeb/Layout/expected/flex-auto.txt
 create mode 100644 Tests/LibWeb/Layout/expected/flex-column-constained-wrap.txt
 create mode 100644 Tests/LibWeb/Layout/expected/flex-column-constrained-nowrap.txt
 create mode 100644 Tests/LibWeb/Layout/expected/flex-column-height-constrained-width-constrained.txt
 create mode 100644 Tests/LibWeb/Layout/expected/flex-column-height-constrained.txt
 create mode 100644 Tests/LibWeb/Layout/expected/flex-container-constrained-nowrap.txt
 create mode 100644 Tests/LibWeb/Layout/expected/flex-container-constrained-wrap.txt
 create mode 100644 Tests/LibWeb/Layout/expected/flex-container-width-constrained.txt
 create mode 100644 Tests/LibWeb/Layout/expected/flex-grow-0-column.txt
 create mode 100644 Tests/LibWeb/Layout/expected/flex-grow-1.txt
 create mode 100644 Tests/LibWeb/Layout/expected/flex-grow-2.txt
 create mode 100644 Tests/LibWeb/Layout/expected/flex-row.txt
 create mode 100644 Tests/LibWeb/Layout/expected/flex-shrink-1.txt
 create mode 100644 Tests/LibWeb/Layout/expected/flex-shrink-2.txt
 create mode 100644 Tests/LibWeb/Layout/expected/flex-shrink-3.txt
 create mode 100644 Tests/LibWeb/Layout/input/flex-auto.html
 create mode 100644 Tests/LibWeb/Layout/input/flex-column-constained-wrap.html
 create mode 100644 Tests/LibWeb/Layout/input/flex-column-constrained-nowrap.html
 create mode 100644 Tests/LibWeb/Layout/input/flex-column-height-constrained-width-constrained.html
 create mode 100644 Tests/LibWeb/Layout/input/flex-column-height-constrained.html
 create mode 100644 Tests/LibWeb/Layout/input/flex-container-constrained-nowrap.html
 create mode 100644 Tests/LibWeb/Layout/input/flex-container-constrained-wrap.html
 create mode 100644 Tests/LibWeb/Layout/input/flex-container-width-constrained.html
 create mode 100644 Tests/LibWeb/Layout/input/flex-grow-0-column.html
 create mode 100644 Tests/LibWeb/Layout/input/flex-grow-1.html
 create mode 100644 Tests/LibWeb/Layout/input/flex-grow-2.html
 create mode 100644 Tests/LibWeb/Layout/input/flex-row.html
 create mode 100644 Tests/LibWeb/Layout/input/flex-shrink-1.html
 create mode 100644 Tests/LibWeb/Layout/input/flex-shrink-2.html
 create mode 100644 Tests/LibWeb/Layout/input/flex-shrink-3.html

diff --git a/Tests/LibWeb/Layout/expected/flex-auto.txt b/Tests/LibWeb/Layout/expected/flex-auto.txt
new file mode 100644
index 0000000000..9e92653790
--- /dev/null
+++ b/Tests/LibWeb/Layout/expected/flex-auto.txt
@@ -0,0 +1,29 @@
+InitialContainingBlock <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x120 children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x104 children: not-inline
+      Box <div.container> at (9,9) content-size 500x102 flex-container(row) children: not-inline
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.box> at (10,10) content-size 164.666671x100 flex-item 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: [10,10 6.34375x17.46875]
+              "1"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.box> at (176.666671,10) content-size 164.666671x100 flex-item 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: [176.666671,10 8.8125x17.46875]
+              "2"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.box> at (343.333343,10) content-size 164.666671x100 flex-item 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: [343.333343,10 9.09375x17.46875]
+              "3"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+      BlockContainer <(anonymous)> at (8,112) content-size 784x0 children: inline
+        TextNode <#text>
diff --git a/Tests/LibWeb/Layout/expected/flex-column-constained-wrap.txt b/Tests/LibWeb/Layout/expected/flex-column-constained-wrap.txt
new file mode 100644
index 0000000000..21558799b8
--- /dev/null
+++ b/Tests/LibWeb/Layout/expected/flex-column-constained-wrap.txt
@@ -0,0 +1,29 @@
+InitialContainingBlock <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x268 children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x252 children: not-inline
+      Box <div.container.column> at (9,9) content-size 250x250 flex-container(column) children: not-inline
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.box> at (10,10) content-size 100x100 flex-item 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: [10,10 6.34375x17.46875]
+              "1"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.box> at (10,112) content-size 100x100 flex-item 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: [10,112 8.8125x17.46875]
+              "2"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.box> at (135,10) content-size 100x100 flex-item 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: [135,10 9.09375x17.46875]
+              "3"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+      BlockContainer <(anonymous)> at (8,260) content-size 784x0 children: inline
+        TextNode <#text>
diff --git a/Tests/LibWeb/Layout/expected/flex-column-constrained-nowrap.txt b/Tests/LibWeb/Layout/expected/flex-column-constrained-nowrap.txt
new file mode 100644
index 0000000000..115695a0da
--- /dev/null
+++ b/Tests/LibWeb/Layout/expected/flex-column-constrained-nowrap.txt
@@ -0,0 +1,29 @@
+InitialContainingBlock <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x268 children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x252 children: not-inline
+      Box <div.container.column> at (9,9) content-size 782x250 flex-container(column) children: not-inline
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.box> at (10,10) content-size 100x81.333328 flex-item 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: [10,10 6.34375x17.46875]
+              "1"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.box> at (10,93.333328) content-size 100x81.333328 flex-item 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: [10,93.333328 8.8125x17.46875]
+              "2"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.box> at (10,176.666656) content-size 100x81.333328 flex-item 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: [10,176.666656 9.09375x17.46875]
+              "3"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+      BlockContainer <(anonymous)> at (8,260) content-size 784x0 children: inline
+        TextNode <#text>
diff --git a/Tests/LibWeb/Layout/expected/flex-column-height-constrained-width-constrained.txt b/Tests/LibWeb/Layout/expected/flex-column-height-constrained-width-constrained.txt
new file mode 100644
index 0000000000..785c0babe6
--- /dev/null
+++ b/Tests/LibWeb/Layout/expected/flex-column-height-constrained-width-constrained.txt
@@ -0,0 +1,29 @@
+InitialContainingBlock <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x268 children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x252 children: not-inline
+      Box <div.container.column> at (9,9) content-size 250x250 flex-container(column) children: not-inline
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.box> at (10,10) content-size 100x81.333328 flex-item 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: [10,10 6.34375x17.46875]
+              "1"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.box> at (10,93.333328) content-size 100x81.333328 flex-item 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: [10,93.333328 8.8125x17.46875]
+              "2"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.box> at (10,176.666656) content-size 100x81.333328 flex-item 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: [10,176.666656 9.09375x17.46875]
+              "3"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+      BlockContainer <(anonymous)> at (8,260) content-size 784x0 children: inline
+        TextNode <#text>
diff --git a/Tests/LibWeb/Layout/expected/flex-column-height-constrained.txt b/Tests/LibWeb/Layout/expected/flex-column-height-constrained.txt
new file mode 100644
index 0000000000..dec4cab714
--- /dev/null
+++ b/Tests/LibWeb/Layout/expected/flex-column-height-constrained.txt
@@ -0,0 +1,29 @@
+InitialContainingBlock <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x268 children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x252 children: not-inline
+      Box <div.container> at (9,9) content-size 782x250 flex-container(column) children: not-inline
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.box> at (10,10) content-size 100x81.333328 flex-item 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: [10,10 6.34375x17.46875]
+              "1"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.box> at (10,93.333328) content-size 100x81.333328 flex-item 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: [10,93.333328 8.8125x17.46875]
+              "2"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.box> at (10,176.666656) content-size 100x81.333328 flex-item 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: [10,176.666656 9.09375x17.46875]
+              "3"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+      BlockContainer <(anonymous)> at (8,260) content-size 784x0 children: inline
+        TextNode <#text>
diff --git a/Tests/LibWeb/Layout/expected/flex-container-constrained-nowrap.txt b/Tests/LibWeb/Layout/expected/flex-container-constrained-nowrap.txt
new file mode 100644
index 0000000000..47bf401521
--- /dev/null
+++ b/Tests/LibWeb/Layout/expected/flex-container-constrained-nowrap.txt
@@ -0,0 +1,29 @@
+InitialContainingBlock <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x120 children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x104 children: not-inline
+      Box <div.container> at (9,9) content-size 250x102 flex-container(row) children: not-inline
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.box> at (10,10) content-size 81.333328x100 flex-item 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: [10,10 6.34375x17.46875]
+              "1"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.box> at (93.333328,10) content-size 81.333328x100 flex-item 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: [93.333328,10 8.8125x17.46875]
+              "2"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.box> at (176.666656,10) content-size 81.333328x100 flex-item 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: [176.666656,10 9.09375x17.46875]
+              "3"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+      BlockContainer <(anonymous)> at (8,112) content-size 784x0 children: inline
+        TextNode <#text>
diff --git a/Tests/LibWeb/Layout/expected/flex-container-constrained-wrap.txt b/Tests/LibWeb/Layout/expected/flex-container-constrained-wrap.txt
new file mode 100644
index 0000000000..9b05b40187
--- /dev/null
+++ b/Tests/LibWeb/Layout/expected/flex-container-constrained-wrap.txt
@@ -0,0 +1,29 @@
+InitialContainingBlock <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x222 children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x206 children: not-inline
+      Box <div.container> at (9,9) content-size 250x204 flex-container(row) children: not-inline
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.box> at (10,10) content-size 100x100 flex-item 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: [10,10 6.34375x17.46875]
+              "1"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.box> at (112,10) content-size 100x100 flex-item 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: [112,10 8.8125x17.46875]
+              "2"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.box> at (10,112) content-size 100x100 flex-item 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: [10,112 9.09375x17.46875]
+              "3"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+      BlockContainer <(anonymous)> at (8,214) content-size 784x0 children: inline
+        TextNode <#text>
diff --git a/Tests/LibWeb/Layout/expected/flex-container-width-constrained.txt b/Tests/LibWeb/Layout/expected/flex-container-width-constrained.txt
new file mode 100644
index 0000000000..5252c93588
--- /dev/null
+++ b/Tests/LibWeb/Layout/expected/flex-container-width-constrained.txt
@@ -0,0 +1,29 @@
+InitialContainingBlock <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x120 children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x104 children: not-inline
+      Box <div.container.width-constrained> at (9,9) content-size 250x102 flex-container(row) children: not-inline
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.box> at (10,10) content-size 81.333328x100 flex-item 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: [10,10 6.34375x17.46875]
+              "1"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.box> at (93.333328,10) content-size 81.333328x100 flex-item 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: [93.333328,10 8.8125x17.46875]
+              "2"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.box> at (176.666656,10) content-size 81.333328x100 flex-item 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: [176.666656,10 9.09375x17.46875]
+              "3"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+      BlockContainer <(anonymous)> at (8,112) content-size 784x0 children: inline
+        TextNode <#text>
diff --git a/Tests/LibWeb/Layout/expected/flex-grow-0-column.txt b/Tests/LibWeb/Layout/expected/flex-grow-0-column.txt
new file mode 100644
index 0000000000..0aed1b12b8
--- /dev/null
+++ b/Tests/LibWeb/Layout/expected/flex-grow-0-column.txt
@@ -0,0 +1,29 @@
+InitialContainingBlock <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x76.40625 children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x60.40625 children: not-inline
+      Box <div.container> at (9,9) content-size 500x58.40625 flex-container(column) children: not-inline
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.box> at (10,10) content-size 100x17.46875 flex-item 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: [10,10 6.34375x17.46875]
+              "1"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.box> at (10,29.46875) content-size 100x17.46875 flex-item 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: [10,29.46875 8.8125x17.46875]
+              "2"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.box> at (10,48.9375) content-size 100x17.46875 flex-item 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: [10,48.9375 9.09375x17.46875]
+              "3"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+      BlockContainer <(anonymous)> at (8,68.40625) content-size 784x0 children: inline
+        TextNode <#text>
diff --git a/Tests/LibWeb/Layout/expected/flex-grow-1.txt b/Tests/LibWeb/Layout/expected/flex-grow-1.txt
new file mode 100644
index 0000000000..a44dc86878
--- /dev/null
+++ b/Tests/LibWeb/Layout/expected/flex-grow-1.txt
@@ -0,0 +1,29 @@
+InitialContainingBlock <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x120 children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x104 children: not-inline
+      Box <div.container> at (9,9) content-size 500x102 flex-container(row) children: not-inline
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.box> at (10,10) content-size 229.333343x100 flex-item children: inline
+          line 0 width: 144.546875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 17, rect: [10,10 144.546875x17.46875]
+              "1 I grow the most"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.box> at (241.333343,10) content-size 164.666671x100 flex-item children: inline
+          line 0 width: 67.375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 8, rect: [241.333343,10 67.375x17.46875]
+              "2 I grow"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.box> at (408,10) content-size 100x100 flex-item children: inline
+          line 0 width: 68, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 9, rect: [408,10 68x17.46875]
+              "3 I don't"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+      BlockContainer <(anonymous)> at (8,112) content-size 784x0 children: inline
+        TextNode <#text>
diff --git a/Tests/LibWeb/Layout/expected/flex-grow-2.txt b/Tests/LibWeb/Layout/expected/flex-grow-2.txt
new file mode 100644
index 0000000000..2e011a1568
--- /dev/null
+++ b/Tests/LibWeb/Layout/expected/flex-grow-2.txt
@@ -0,0 +1,29 @@
+InitialContainingBlock <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x120 children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x104 children: not-inline
+      Box <div.container> at (9,9) content-size 500x102 flex-container(row) children: not-inline
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.box> at (10,10) content-size 132.333343x100 flex-item 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: [10,10 6.34375x17.46875]
+              "1"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.box> at (144.333343,10) content-size 164.666671x100 flex-item 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: [144.333343,10 8.8125x17.46875]
+              "2"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.box> at (311,10) content-size 197x100 flex-item 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: [311,10 9.09375x17.46875]
+              "3"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+      BlockContainer <(anonymous)> at (8,112) content-size 784x0 children: inline
+        TextNode <#text>
diff --git a/Tests/LibWeb/Layout/expected/flex-row.txt b/Tests/LibWeb/Layout/expected/flex-row.txt
new file mode 100644
index 0000000000..73395de3c7
--- /dev/null
+++ b/Tests/LibWeb/Layout/expected/flex-row.txt
@@ -0,0 +1,29 @@
+InitialContainingBlock <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x120 children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x104 children: not-inline
+      Box <div.container> at (9,9) content-size 782x102 flex-container(row) children: not-inline
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.box> at (10,10) content-size 100x100 flex-item 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: [10,10 6.34375x17.46875]
+              "1"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.box> at (112,10) content-size 100x100 flex-item 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: [112,10 8.8125x17.46875]
+              "2"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.box> at (214,10) content-size 100x100 flex-item 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: [214,10 9.09375x17.46875]
+              "3"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+      BlockContainer <(anonymous)> at (8,112) content-size 784x0 children: inline
+        TextNode <#text>
diff --git a/Tests/LibWeb/Layout/expected/flex-shrink-1.txt b/Tests/LibWeb/Layout/expected/flex-shrink-1.txt
new file mode 100644
index 0000000000..0479ca917c
--- /dev/null
+++ b/Tests/LibWeb/Layout/expected/flex-shrink-1.txt
@@ -0,0 +1,38 @@
+InitialContainingBlock <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x120 children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x104 children: not-inline
+      Box <div.container> at (9,9) content-size 250x102 flex-container(row) children: not-inline
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.box> at (10,10) content-size 62.666664x100 flex-item children: inline
+          line 0 width: 18.9375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 3, rect: [10,10 18.9375x17.46875]
+              "1 I"
+          line 1 width: 49.359375, height: 17.9375, bottom: 35.40625, baseline: 13.53125
+            frag 0 from TextNode start: 4, length: 6, rect: [10,27 49.359375x17.46875]
+              "shrink"
+          line 2 width: 24.875, height: 18.40625, bottom: 53.34375, baseline: 13.53125
+            frag 0 from TextNode start: 11, length: 3, rect: [10,44 24.875x17.46875]
+              "the"
+          line 3 width: 38.765625, height: 17.875, bottom: 70.28125, baseline: 13.53125
+            frag 0 from TextNode start: 15, length: 4, rect: [10,62 38.765625x17.46875]
+              "most"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.box> at (74.666664,10) content-size 81.333328x100 flex-item children: inline
+          line 0 width: 78.765625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 10, rect: [74.666664,10 78.765625x17.46875]
+              "2 I shrink"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.box> at (158,10) content-size 100x100 flex-item children: inline
+          line 0 width: 68, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 9, rect: [158,10 68x17.46875]
+              "3 I don't"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+      BlockContainer <(anonymous)> at (8,112) content-size 784x0 children: inline
+        TextNode <#text>
diff --git a/Tests/LibWeb/Layout/expected/flex-shrink-2.txt b/Tests/LibWeb/Layout/expected/flex-shrink-2.txt
new file mode 100644
index 0000000000..35e8e1652d
--- /dev/null
+++ b/Tests/LibWeb/Layout/expected/flex-shrink-2.txt
@@ -0,0 +1,29 @@
+InitialContainingBlock <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x120 children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x104 children: not-inline
+      Box <div.container> at (9,9) content-size 500x102 flex-container(row) children: not-inline
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.box> at (10,10) content-size 47.000030x100 flex-item 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: [10,10 6.34375x17.46875]
+              "1"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.box> at (59.000030,10) content-size 164.666671x100 flex-item 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: [59.000030,10 8.8125x17.46875]
+              "2"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.box> at (225.666702,10) content-size 282.333312x100 flex-item 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: [225.666702,10 9.09375x17.46875]
+              "3"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+      BlockContainer <(anonymous)> at (8,112) content-size 784x0 children: inline
+        TextNode <#text>
diff --git a/Tests/LibWeb/Layout/expected/flex-shrink-3.txt b/Tests/LibWeb/Layout/expected/flex-shrink-3.txt
new file mode 100644
index 0000000000..690980ac98
--- /dev/null
+++ b/Tests/LibWeb/Layout/expected/flex-shrink-3.txt
@@ -0,0 +1,29 @@
+InitialContainingBlock <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x120 children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x104 children: not-inline
+      Box <div.container> at (9,9) content-size 500x102 flex-container(row) children: not-inline
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.box> at (10,10) content-size 100x100 flex-item 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: [10,10 6.34375x17.46875]
+              "1"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.box> at (112,10) content-size 100x100 flex-item 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: [112,10 8.8125x17.46875]
+              "2"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.box> at (214,10) content-size 100x100 flex-item 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: [214,10 9.09375x17.46875]
+              "3"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
+          TextNode <#text>
+      BlockContainer <(anonymous)> at (8,112) content-size 784x0 children: inline
+        TextNode <#text>
diff --git a/Tests/LibWeb/Layout/input/flex-auto.html b/Tests/LibWeb/Layout/input/flex-auto.html
new file mode 100644
index 0000000000..d537da07c4
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/flex-auto.html
@@ -0,0 +1,23 @@
+<style>
+    body {
+        font-family: 'SerenitySans';
+    }
+
+    .container {
+        display: flex;
+        border: 1px solid salmon;
+        flex-flow: row nowrap;
+        width: 500px;
+    }
+
+    .box {
+        width: 100px;
+        height: 100px;
+        border: 1px solid black;
+    }
+</style>
+<div class="container">
+    <div class="box" style="flex: auto;">1</div>
+    <div class="box" style="flex: auto;">2</div>
+    <div class="box" style="flex: auto;">3</div>
+</div>
diff --git a/Tests/LibWeb/Layout/input/flex-column-constained-wrap.html b/Tests/LibWeb/Layout/input/flex-column-constained-wrap.html
new file mode 100644
index 0000000000..e92e3c1a9e
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/flex-column-constained-wrap.html
@@ -0,0 +1,25 @@
+<style>
+    body {
+        font-family: 'SerenitySans';
+    }
+
+    .container {
+        display: flex;
+        border: 1px solid salmon;
+        flex-direction: column;
+        height: 250px;
+        width: 250px;
+        flex-wrap: wrap;
+    }
+
+    .box {
+        width: 100px;
+        height: 100px;
+        border: 1px solid black;
+    }
+</style>
+<div class="container column">
+    <div class="box">1</div>
+    <div class="box">2</div>
+    <div class="box">3</div>
+</div>
diff --git a/Tests/LibWeb/Layout/input/flex-column-constrained-nowrap.html b/Tests/LibWeb/Layout/input/flex-column-constrained-nowrap.html
new file mode 100644
index 0000000000..54a069d502
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/flex-column-constrained-nowrap.html
@@ -0,0 +1,24 @@
+<style>
+    body {
+        font-family: 'SerenitySans';
+    }
+
+    .container {
+        display: flex;
+        border: 1px solid salmon;
+        flex-direction: column;
+        height: 250px;
+        flex-wrap: nowrap;
+    }
+
+    .box {
+        width: 100px;
+        height: 100px;
+        border: 1px solid black;
+    }
+</style>
+<div class="container column">
+    <div class="box">1</div>
+    <div class="box">2</div>
+    <div class="box">3</div>
+</div>
diff --git a/Tests/LibWeb/Layout/input/flex-column-height-constrained-width-constrained.html b/Tests/LibWeb/Layout/input/flex-column-height-constrained-width-constrained.html
new file mode 100644
index 0000000000..ec05bd9d11
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/flex-column-height-constrained-width-constrained.html
@@ -0,0 +1,24 @@
+<style>
+    body {
+        font-family: 'SerenitySans';
+    }
+
+    .container {
+        display: flex;
+        border: 1px solid salmon;
+        flex-direction: column;
+        height: 250px;
+        width: 250px;
+    }
+
+    .box {
+        width: 100px;
+        height: 100px;
+        border: 1px solid black;
+    }
+</style>
+<div class="container column">
+    <div class="box">1</div>
+    <div class="box">2</div>
+    <div class="box">3</div>
+</div>
diff --git a/Tests/LibWeb/Layout/input/flex-column-height-constrained.html b/Tests/LibWeb/Layout/input/flex-column-height-constrained.html
new file mode 100644
index 0000000000..1664939c2d
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/flex-column-height-constrained.html
@@ -0,0 +1,23 @@
+<style>
+    body {
+        font-family: 'SerenitySans';
+    }
+
+    .container {
+        display: flex;
+        border: 1px solid salmon;
+        flex-direction: column;
+        height: 250px;
+    }
+
+    .box {
+        width: 100px;
+        height: 100px;
+        border: 1px solid black;
+    }
+</style>
+<div class="container">
+    <div class="box">1</div>
+    <div class="box">2</div>
+    <div class="box">3</div>
+</div>
diff --git a/Tests/LibWeb/Layout/input/flex-container-constrained-nowrap.html b/Tests/LibWeb/Layout/input/flex-container-constrained-nowrap.html
new file mode 100644
index 0000000000..bf6dafec9f
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/flex-container-constrained-nowrap.html
@@ -0,0 +1,23 @@
+<style>
+    body {
+        font-family: 'SerenitySans';
+    }
+
+    .container {
+        display: flex;
+        border: 1px solid salmon;
+        width: 250px;
+        flex-wrap: nowrap;
+    }
+
+    .box {
+        width: 100px;
+        height: 100px;
+        border: 1px solid black;
+    }
+</style>
+<div class="container">
+    <div class="box">1</div>
+    <div class="box">2</div>
+    <div class="box">3</div>
+</div>
diff --git a/Tests/LibWeb/Layout/input/flex-container-constrained-wrap.html b/Tests/LibWeb/Layout/input/flex-container-constrained-wrap.html
new file mode 100644
index 0000000000..cf8e1ebaec
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/flex-container-constrained-wrap.html
@@ -0,0 +1,23 @@
+<style>
+    body {
+        font-family: 'SerenitySans';
+    }
+
+    .container {
+        display: flex;
+        border: 1px solid salmon;
+        width: 250px;
+        flex-wrap: wrap;
+    }
+
+    .box {
+        width: 100px;
+        height: 100px;
+        border: 1px solid black;
+    }
+</style>
+<div class="container">
+    <div class="box">1</div>
+    <div class="box">2</div>
+    <div class="box">3</div>
+</div>
diff --git a/Tests/LibWeb/Layout/input/flex-container-width-constrained.html b/Tests/LibWeb/Layout/input/flex-container-width-constrained.html
new file mode 100644
index 0000000000..874118f62c
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/flex-container-width-constrained.html
@@ -0,0 +1,22 @@
+<style>
+    body {
+        font-family: 'SerenitySans';
+    }
+
+    .container {
+        display: flex;
+        border: 1px solid salmon;
+        width: 250px;
+    }
+
+    .box {
+        width: 100px;
+        height: 100px;
+        border: 1px solid black;
+    }
+</style>
+<div class="container width-constrained">
+    <div class="box">1</div>
+    <div class="box">2</div>
+    <div class="box">3</div>
+</div>
diff --git a/Tests/LibWeb/Layout/input/flex-grow-0-column.html b/Tests/LibWeb/Layout/input/flex-grow-0-column.html
new file mode 100644
index 0000000000..6b11f5f358
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/flex-grow-0-column.html
@@ -0,0 +1,23 @@
+<style>
+    body {
+        font-family: 'SerenitySans';
+    }
+
+    .container {
+        display: flex;
+        border: 1px solid salmon;
+        width: 500px;
+        flex-direction: column;
+    }
+
+    .box {
+        width: 100px;
+        height: 100px;
+        border: 1px solid black;
+    }
+</style>
+<div class="container">
+    <div class="box" style="flex: 0 0 0;">1</div>
+    <div class="box" style="flex: 0 0 0;">2</div>
+    <div class="box" style="flex: 0 0 0;">3</div>
+</div>
diff --git a/Tests/LibWeb/Layout/input/flex-grow-1.html b/Tests/LibWeb/Layout/input/flex-grow-1.html
new file mode 100644
index 0000000000..fab45baee2
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/flex-grow-1.html
@@ -0,0 +1,22 @@
+<style>
+    body {
+        font-family: 'SerenitySans';
+    }
+
+    .container {
+        display: flex;
+        border: 1px solid salmon;
+        width: 500px;
+    }
+
+    .box {
+        width: 100px;
+        height: 100px;
+        border: 1px solid black;
+    }
+</style>
+<div class="container">
+    <div class="box" style="flex-grow: 4;">1 I grow the most</div>
+    <div class="box" style="flex-grow: 2;">2 I grow</div>
+    <div class="box" style="flex-grow: 0;">3 I don't</div>
+</div>
diff --git a/Tests/LibWeb/Layout/input/flex-grow-2.html b/Tests/LibWeb/Layout/input/flex-grow-2.html
new file mode 100644
index 0000000000..518b7f742c
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/flex-grow-2.html
@@ -0,0 +1,22 @@
+<style>
+    body {
+        font-family: 'SerenitySans';
+    }
+
+    .container {
+        display: flex;
+        border: 1px solid salmon;
+        width: 500px;
+    }
+
+    .box {
+        width: 100px;
+        height: 100px;
+        border: 1px solid black;
+    }
+</style>
+<div class="container">
+    <div class="box" style="flex: 1;">1</div>
+    <div class="box" style="flex: 2;">2</div>
+    <div class="box" style="flex: 3;">3</div>
+</div>
diff --git a/Tests/LibWeb/Layout/input/flex-row.html b/Tests/LibWeb/Layout/input/flex-row.html
new file mode 100644
index 0000000000..7fdaa43586
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/flex-row.html
@@ -0,0 +1,21 @@
+<style>
+    body {
+        font-family: 'SerenitySans';
+    }
+
+    .container {
+        display: flex;
+        border: 1px solid salmon;
+    }
+
+    .box {
+        width: 100px;
+        height: 100px;
+        border: 1px solid black;
+    }
+</style>
+<div class="container">
+    <div class="box">1</div>
+    <div class="box">2</div>
+    <div class="box">3</div>
+</div>
diff --git a/Tests/LibWeb/Layout/input/flex-shrink-1.html b/Tests/LibWeb/Layout/input/flex-shrink-1.html
new file mode 100644
index 0000000000..c62775f0b6
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/flex-shrink-1.html
@@ -0,0 +1,22 @@
+<style>
+    body {
+        font-family: 'SerenitySans';
+    }
+
+    .container {
+        display: flex;
+        border: 1px solid salmon;
+        width: 250px;
+    }
+
+    .box {
+        width: 100px;
+        height: 100px;
+        border: 1px solid black;
+    }
+</style>
+<div class="container">
+    <div class="box" style="flex-shrink: 4;">1 I shrink the most</div>
+    <div class="box" style="flex-shrink: 2;">2 I shrink</div>
+    <div class="box" style="flex-shrink: 0;">3 I don't</div>
+</div>
diff --git a/Tests/LibWeb/Layout/input/flex-shrink-2.html b/Tests/LibWeb/Layout/input/flex-shrink-2.html
new file mode 100644
index 0000000000..70d65839af
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/flex-shrink-2.html
@@ -0,0 +1,22 @@
+<style>
+    body {
+        font-family: 'SerenitySans';
+    }
+
+    .container {
+        display: flex;
+        border: 1px solid salmon;
+        width: 500px;
+    }
+
+    .box {
+        width: 100px;
+        height: 100px;
+        border: 1px solid black;
+    }
+</style>
+<div class="container">
+    <div class="box" style="flex: 80% 0 3;">1</div>
+    <div class="box" style="flex: 80% 0 2;">2</div>
+    <div class="box" style="flex: 80% 0 1;">3</div>
+</div>
diff --git a/Tests/LibWeb/Layout/input/flex-shrink-3.html b/Tests/LibWeb/Layout/input/flex-shrink-3.html
new file mode 100644
index 0000000000..d5a7acf37a
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/flex-shrink-3.html
@@ -0,0 +1,22 @@
+<style>
+    body {
+        font-family: 'SerenitySans';
+    }
+
+    .container {
+        display: flex;
+        border: 1px solid salmon;
+        width: 500px;
+    }
+
+    .box {
+        width: 100px;
+        height: 100px;
+        border: 1px solid black;
+    }
+</style>
+<div class="container">
+    <div class="box" style="flex: auto 0 1;">1</div>
+    <div class="box" style="flex: auto 0 2;">2</div>
+    <div class="box" style="flex: auto 0 3;">3</div>
+</div>
-- 
cgit v1.2.3