<!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>
