syntax.tentative.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-env/syntax.tentative.html - WPT Dashboard Interop Dashboard

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