From 10aa06f16fbbf73e1cc5a55d8963dc0965442f38 Mon Sep 17 00:00:00 2001
From: Sam Atkins <atkinssj@serenityos.org>
Date: Fri, 3 Dec 2021 12:02:44 +0000
Subject: [PATCH] Base: Add more test cases to CSS var() test page

---
 Base/res/html/misc/custom-properties.html | 159 ++++++++++++++++++++++
 1 file changed, 159 insertions(+)

diff --git a/Base/res/html/misc/custom-properties.html b/Base/res/html/misc/custom-properties.html
index 8ff9584355b..b4766b2be46 100644
--- a/Base/res/html/misc/custom-properties.html
+++ b/Base/res/html/misc/custom-properties.html
@@ -6,6 +6,12 @@
     <style>
         :root {
             --my-color: purple;
+            --width: 10px;
+            --color: orange;
+            --style: solid;
+            --border: var(--width) var(--color) var(--style);
+            --background-color: yellow;
+            --background-position: top 10px right 5px;
         }
 
         div {
@@ -26,6 +32,67 @@
             height: 150px;
             border: 1px solid black;
         }
+
+        .test-fallback {
+            background-color: var(--fallback, lime);
+        }
+
+        .test-fallback.with {
+            --fallback: cyan;
+        }
+
+        .test-nested {
+            border: var(--border);
+        }
+
+        .test-mixed {
+            background: var(--background-color) url("background-repeat.png") var(--background-position) no-repeat;
+        }
+
+        .billion-laughs {
+            --prop1: lol;
+            --prop2: var(--prop1) var(--prop1);
+            --prop3: var(--prop2) var(--prop2);
+            --prop4: var(--prop3) var(--prop3);
+            --prop5: var(--prop4) var(--prop4);
+            --prop6: var(--prop5) var(--prop5);
+            --prop7: var(--prop6) var(--prop6);
+            --prop8: var(--prop7) var(--prop7);
+            --prop9: var(--prop8) var(--prop8);
+            --prop10: var(--prop9) var(--prop9);
+            --prop11: var(--prop10) var(--prop10);
+            --prop12: var(--prop11) var(--prop11);
+            --prop13: var(--prop12) var(--prop12);
+            --prop14: var(--prop13) var(--prop13);
+            --prop15: var(--prop14) var(--prop14);
+            --prop16: var(--prop15) var(--prop15);
+            --prop17: var(--prop16) var(--prop16);
+            --prop18: var(--prop17) var(--prop17);
+            --prop19: var(--prop18) var(--prop18);
+            --prop20: var(--prop19) var(--prop19);
+            --prop21: var(--prop20) var(--prop20);
+            --prop22: var(--prop21) var(--prop21);
+            --prop23: var(--prop22) var(--prop22);
+            --prop24: var(--prop23) var(--prop23);
+            --prop25: var(--prop24) var(--prop24);
+            --prop26: var(--prop25) var(--prop25);
+            --prop27: var(--prop26) var(--prop26);
+            --prop28: var(--prop27) var(--prop27);
+            --prop29: var(--prop28) var(--prop28);
+            --prop30: var(--prop29) var(--prop29);
+
+            background: var(--prop30);
+        }
+
+        .dependency-cycle {
+            --recursive: var(--recursive);
+
+            --a: var(--b);
+            --b: var(--a);
+
+            background: var(--a);
+            color: var(--recursive);
+        }
     </style>
 </head>
 
@@ -63,6 +130,98 @@
             This should be pink
         </div>
     </div>
+
+    <h2>Fallback Values</h2>
+    <pre>
+        .test-fallback {
+            background-color: var(--fallback, lime);
+        }
+
+        .test-fallback.with {
+            --fallback: cyan;
+        }
+    </pre>
+
+    <div class="box test-fallback">
+        <pre>.test-fallback</pre>
+        This should be green
+    </div>
+
+    <div class="box test-fallback with">
+        <pre>.test-fallback.with</pre>
+        This should be cyan
+    </div>
+
+    <h2>Nested var()</h2>
+    <pre>
+        :root {
+            --width: 10px;
+            --color: orange;
+            --style: solid;
+            --border: var(--width) var(--color) var(--style);
+        }
+        .test-nested {
+            border: var(--border);
+        }
+    </pre>
+
+    <div class="box test-nested">
+        <pre>.test-nested</pre>
+        This should have a 10px solid orange border
+    </div>
+
+    <h2>Mixed var()</h2>
+    <pre>
+        :root {
+            --background-color: yellow;
+            --background-position: top 10px right 5px;
+        }
+
+        .test-mixed {
+            background: var(--background-color) url("background-repeat.png") var(--background-position) no-repeat;
+        }
+    </pre>
+
+    <div class="box test-mixed">
+        <pre>.test-mixed</pre>
+        This should have a yellow background with a smiley face in the top-right corner
+    </div>
+
+    <h2>Billion laughs attack</h2>
+    <pre>
+        .billion-laughs {
+            --prop1: lol;
+            --prop2: var(--prop1) var(--prop1);
+            --prop3: var(--prop2) var(--prop2);
+
+            /* ... */
+
+            --prop30: var(--prop29) var(--prop29);
+
+            background: var(--prop30);
+        }
+    </pre>
+    <div class="box billion-laughs">
+        <pre>.billion-laughs</pre>
+        This box tests that we handle the billion laughs attack. If we don't crash, it worked!
+    </div>
+
+    <h2>Dependency cycles</h2>
+    <pre>
+        .dependency-cycle {
+            --recursive: var(--recursive);
+
+            --a: var(--b);
+            --b: var(--a);
+
+            background: var(--a);
+            color: var(--recursive);
+        }
+    </pre>
+    <div class="box dependency-cycle">
+        <pre>.dependency-cycle</pre>
+        This box tests that we handle dependency cycles correctly. If we don't crash, it worked!
+    </div>
 </body>
 
 </html>