From 2a2efdedf73cbc6b23f5b24e29f715fff09707cd Mon Sep 17 00:00:00 2001
From: Sam Atkins <atkinssj@serenityos.org>
Date: Fri, 8 Oct 2021 15:34:51 +0100
Subject: [PATCH] Base: Add CSS.supports / `@supports {}` test-page

---
 Base/res/html/misc/supports.html | 147 +++++++++++++++++++++++++++++++
 Base/res/html/misc/welcome.html  |   1 +
 2 files changed, 148 insertions(+)
 create mode 100644 Base/res/html/misc/supports.html
diff --git a/Base/res/html/misc/supports.html b/Base/res/html/misc/supports.html
new file mode 100644
index 0000000000..0940b51c2d
--- /dev/null
+++ b/Base/res/html/misc/supports.html
@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>CSS.supports()</title>
+    <style>
+        @supports (color: green) {
+            .p1 {
+                background-color: lime;
+            }
+        }
+        @supports (color: green) and (width: 50px) {
+            .p2 {
+                background-color: lime;
+            }
+        }
+        @supports (color: green) or (flogwizzle: purple) {
+            .p3 {
+                background-color: lime;
+            }
+        }
+        @supports (not (flogwizzle: purple)) {
+            .p4 {
+                background-color: lime;
+            }
+        }
+
+        .negative {
+            background-color: red;
+        }
+        @supports (not (color: green)) {
+            .n1 {
+                background-color: lime;
+            }
+        }
+        @supports (color: green) and (width: 50px) or (color: green) {
+            .n2 {
+                background-color: lime;
+            }
+        }
+        @supports (width: yellow) or (height: green) {
+            .n3 {
+                background-color: lime;
+            }
+        }
+        @supports (flogwizzle: purple) {
+            .n4 {
+                background-color: lime;
+            }
+        }
+
+        .success {
+            background-color: lime;
+        }
+        .failure {
+            background-color: red;
+        }
+    </style>
+</head>
+<body>
+    <h1>These should all be green</h1>
+    <p class="p1">@supports (color: green)</p>
+    <p class="p2">@supports (color: green) and (width: 50px)</p>
+    <p class="p3">@supports (color: green) or (flogwizzle: purple)</p>
+    <p class="p4">@supports (not (flogwizzle: purple))</p>
+
+    <h1>These should all be red</h1>
+    <p class="negative n1">@supports (not (color: green))</p>
+    <p class="negative n2">@supports (color: green) and (width: 50px) or (color: green)</p>
+    <p class="negative n3">@supports (width: yellow) or (height: green)</p>
+    <p class="negative n4">@supports (flogwizzle: purple)</p>
+
+    <h1>Testing CSS.supports(property, value)</h1>
+    <ul id="property-success">
+    </ul>
+    <ul id="property-failure">
+    </ul>
+
+    <h1>Testing CSS.supports(string)</h1>
+    <p>These should all be green, meaning they returned true</p>
+    <ul id="output-success">
+    </ul>
+    <p>These should all be red, meaning they returned false</p>
+    <ul id="output-failure">
+    </ul>
+
+<script>
+    let property_success = document.getElementById("property-success");
+    let property_should_succeed = [
+        ["color", "green"],
+        ["width", "100%"],
+        ["border", "3px solid black"]
+    ];
+    for (let it of property_should_succeed) {
+        let success = CSS.supports(it[0], it[1]);
+        let li = document.createElement("li");
+        li.innerText = it[0] + ": " + it[1];
+        li.className = success ? "success" : "failure";
+        property_success.appendChild(li);
+    }
+
+    let property_failure = document.getElementById("property-failure");
+    let property_should_fail = [
+        ["color", "20px"],
+        ["width", "orange"],
+        ["border", "9"]
+    ];
+    for (let it of property_should_fail) {
+        let success = CSS.supports(it[0], it[1]);
+        let li = document.createElement("li");
+        li.innerText = it[0] + ": " + it[1];
+        li.className = success ? "success" : "failure";
+        property_failure.appendChild(li);
+    }
+
+    let output_success = document.getElementById("output-success");
+    let should_succeed = [
+        "color: green",
+        "(color: green) and (width: 50px)",
+        "(color: green) or (flogwizzle: purple)",
+        "not (flogwizzle: purple)"
+    ];
+    for (let text of should_succeed) {
+        let success = CSS.supports(text);
+        let li = document.createElement("li");
+        li.innerText = text;
+        li.className = success ? "success" : "failure";
+        output_success.appendChild(li);
+    }
+
+    let output_failure = document.getElementById("output-failure");
+    let should_fail = [
+        "not (color: green)",
+        "(color: green) and (width: 50px) or (color: green)",
+        "(width: yellow) or (height: green)",
+        "flogwizzle: purple"
+    ];
+    for (let text of should_fail) {
+        let success = CSS.supports(text);
+        let li = document.createElement("li");
+        li.innerText = text;
+        li.className = success ? "success" : "failure";
+        output_failure.appendChild(li);
+    }
+</script>
+</body>
+</html>
diff --git a/Base/res/html/misc/welcome.html b/Base/res/html/misc/welcome.html
index 30225b9023..e5e57ba8c8 100644
--- a/Base/res/html/misc/welcome.html
+++ b/Base/res/html/misc/welcome.html
@@ -76,6 +76,7 @@
         <ul>
             <li><h3>CSSOM</h3></li>
             <li><a href="computed-style.html">Computed style</a></li>
+            <li><a href="supports.html">CSS.supports() and @supports</a></li>
             <li><h3>Selectors</h3></li>
             <li><a href="selectors.html">Selectors</a></li>
             <li><a href="attrselectors.html">Attribute selectors</a></li>
