test/e2e/resources/elements/inactive-styles.html

<!doctype html>
<html lang="en">
  <head>
    <style>
      @font-palette-values --my-palette-1 {
        font-family: Arial;
        base-palette: 1;
      }
      @font-palette-values --my-palette-2 {
        font-family: Arial;
        base-palette: 2;
      }
      @property --my-prop {
        syntax: "<color>";
        initial-value: red;
        inherits: true;
      }
      @function --my-func() {
        result: var(--my-prop);
      }
      @function --my-other-func(--a) {
        result: var(--a);
      }

      body {
        margin: 20px;
      }

      .container {
        padding: 10px;
      }

      /* Inherited styles mapped via :focus-within */
      .container:focus-within {
        font-family: Arial;
        font-palette: --my-palette-1;
        padding: calc(10px + 5px);
      }
      .container:not(:focus-within) {
        font-family: Arial;
        font-palette: --my-palette-2;
        padding: calc(5px + 5px);
      }

      /* Direct styles mapped via :focus */
      .target-element:focus {
        color: --my-func();
        border: 2px solid green;
      }
      .target-element:not(:focus) {
        color: --my-other-func(blue);
        border: calc(1px * 2) solid red;
      }

      .other-element:focus {
        font-palette: --my-palette-2;
        color: red;
      }

      /* Animation styles */
      @keyframes my-animation {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      .animated-element.animating {
        animation: my-animation 1s infinite;
      }

      /* A/B Test case */
      .ab-element.state-a {
        color: orange;
      }
      .ab-element.state-b {
        color: purple;
      }

      /* Inherited + pseudo + highlight test case */
      .parent-inherited {
        font-size: 20px;
      }
      .parent-inherited::selection {
        background-color: yellow;
      }
      .intermediate-inherited:focus-within {
        font-weight: bold;
      }
      .intermediate-inherited:focus-within::selection {
        color: orange;
      }
      .inherited-target:focus::before {
        content: "focused";
        color: green;
      }

      /* @starting-style test case */
      .starting-style-target {
        background-color: green;
        @starting-style {
          background-color: red;
        }
      }
      @starting-style {
        .starting-style-target {
          color: yellow;
        }
      }
    </style>
  </head>
  <body>
    <div class="container" id="container">
      <button class="target-element" id="target">Focus me!</button>
    </div>
    <button class="other-element" id="other">Or focus me!</button>

    <div class="animated-element" id="animated">Click on me for animation!</div>

    <script>
      document.getElementById("animated").addEventListener("click", function (e) {
        this.classList.toggle("animating");
      });
    </script>

    <div class="ab-element state-a" id="ab-target">A/B test element</div>
    <script>
      document.getElementById("ab-target").addEventListener("click", function (e) {
        if (this.classList.contains("state-a") && !this.classList.contains("state-b")) {
          this.classList.remove("state-a");
          this.classList.add("state-b");
        } else if (this.classList.contains("state-b") && !this.classList.contains("state-a")) {
          this.classList.add("state-a");
        }
      });
    </script>

    <div class="parent-inherited" id="parent-inherited">
      <div class="intermediate-inherited" id="intermediate-inherited">
        <button class="inherited-target" id="inherited-target">Inherited test button</button>
      </div>
    </div>

    <div class="starting-style-target" id="starting-style-target">Starting style element</div>
  </body>
</html>