css/css-env/syntax.tentative.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="help" href="https://drafts.csswg.org/css-env-1/">
    <title>Test env() syntax</title>
    <script src="/resources/testharness.js"></script>
    <script src="/resources/testharnessreport.js"></script>
    <style>
      div { background-color: rgb(0, 128, 0); }
    </style>
  </head>
  <body>
    <script>
    // This value is expected if the syntax is valid.
    const envWorkingValue = "rgba(0, 0, 0, 0)";

    // This value is expected if the syntax is invalid.
    const pageDefaultValue = "rgb(0, 128, 0)";

    // This value is used to test fallback values.
    const blueValue = "rgb(0, 0, 255)";

    const testCases = [
      { style: "", expectedPropertyValue: pageDefaultValue },
      { style: "background-color: env(test)", expectedPropertyValue: envWorkingValue },
      { style: "background-color: ENV(test)", expectedPropertyValue: envWorkingValue },
      { style: "background-color: env(test) !important", expectedPropertyValue: envWorkingValue },
      { style: "background-color: env(test, 10px)", expectedPropertyValue: envWorkingValue },
      { style: "background-color: env(test, blue)", expectedPropertyValue: blueValue },
      { style: "background-color: env(test, env(another))", expectedPropertyValue: envWorkingValue },
      { style: "background-color: env(test, env(another, blue))", expectedPropertyValue: blueValue },
      { style: "background-color: env(-test)", expectedPropertyValue: envWorkingValue },
      { style: "background-color: env(--test)", expectedPropertyValue: envWorkingValue },
      { style: "background-color: env(10px)", expectedPropertyValue: pageDefaultValue },
      { style: "background-color: env(env(test))", expectedPropertyValue: pageDefaultValue },
      { style: "background-color: env( test)", expectedPropertyValue: envWorkingValue },
      { style: "background-color: env(test )", expectedPropertyValue: envWorkingValue },
      { style: "background-color: env( test )", expectedPropertyValue: envWorkingValue },
      { style: "background-color: env(test /**/, blue)", expectedPropertyValue: blueValue },
      { style: "background-color: env(test, {})", expectedPropertyValue: envWorkingValue },
      { style: "background-color: env(test, {)", expectedPropertyValue: pageDefaultValue },
    ];

    testCases.forEach((testcase) => {
      test(() => {
        const elem = document.createElement("div");
        const style = window.getComputedStyle(elem);

        document.body.appendChild(elem);
        elem.style.cssText = testcase.style;

        assert_equals(style.getPropertyValue("background-color"), testcase.expectedPropertyValue);
      }, testcase.style + " " + testcase.expectedPropertyValue);
    });
    </script>
  </body>
</html>