<!DOCTYPE html>
<html>
<head>
  <title>fullscreen-env-initial</title>
  <style>
      #dummy {
          position: absolute;
          top: 0;
          left: 0;
          width: 0;
          height: 0;
          --fullscreen-inset-top: env(fullscreen-inset-top);
          --fullscreen-inset-right: env(fullscreen-inset-right);
          --fullscreen-inset-bottom: env(fullscreen-inset-bottom);
          --fullscreen-inset-left: env(fullscreen-inset-left);
          --fullscreen-auto-hide-duration: env(fullscreen-auto-hide-duration);
      }
      @supports (padding: env(fullscreen-inset-top)) {
          #should-be-green {
              background-color: green;
          }
      }
  </style>
  <script>
      const ENVS = ["fullscreen-inset-top", "fullscreen-inset-right", "fullscreen-inset-bottom", "fullscreen-inset-left", "fullscreen-auto-hide-duration"];
      function runTest() {
          const results = document.getElementById("results");
          const dummyStyle = window.getComputedStyle(document.getElementById("dummy"));
          const checkForValue = (accumulator, value) => {
              if (!accumulator)
                  return false;
              return dummyStyle.getPropertyValue(`--${value}`) != "";
          };
          if (ENVS.reduce(checkForValue))
              results.textContent = `${ENVS.join(" ")} all had initial values.`;
          else
              results.textContent = `Some/all of ${ENVS.join(" ")} had missing initial values.`;
      }


window.addEventListener("load", runTest, false);
  </script>
</head>
<body>
<span id="dummy"></span>
<p id="should-be-green">This paragraph should have a green background.</p>
<p id="results"></p>
</body>
</html>