grouping-with-checked.html | Explore in Territory

<!doctype html>
<title>::part():disabled grouping</title>
<link rel="help" href="https://drafts.csswg.org/css-shadow-parts/">
<style>
  my-element::part(checkbox) {
    font-family: fantasy;
    background-color: #ff0000;
  }
  #grouped {
    color: #ff0000;
  }
  my-element::part(checkbox):checked {
    background-color: #00ff00;
  }
  my-element::part(checkbox):checked,
  #grouped {
    color: #00ff00;
  }
  my-element::part(not-a-part):checked,
  #grouped {
    font-family: monospace;
  }
</style>
<body>
  <my-element id="subject"></my-element>
  <p id="grouped">Text</p>
  <script src="/resources/testharness.js"></script>
  <script src="/resources/testharnessreport.js"></script>
  <script>
    const RED = "rgb(255, 0, 0)";
    const GREEN = "rgb(0, 255, 0)";
    customElements.define(
      "my-element",
      class MyElement extends HTMLElement {
        connectedCallback() {
          this.attachShadow({
            mode: "open",
          }).innerHTML = `
              <input part="checkbox" type="checkbox" checked />
            `;
          this.elementInternals = this.attachInternals();
        }

        get inner() {
          return this.shadowRoot.querySelector("[part=checkbox]");
        }
      },
    );

    test(() => {
        assert_equals(getComputedStyle(subject.inner).fontFamily, 'fantasy');
    }, "Styles applied to ::part(...)");

    test(() => {
        assert_equals(getComputedStyle(subject.inner).backgroundColor, GREEN);
    }, "Styles applied to ::part(...):checked");

    test(() => {
        assert_equals(getComputedStyle(subject.inner).color, GREEN);
        assert_equals(getComputedStyle(grouped).color, GREEN);
    }, "Styles applied via grouped selector including matched ::part(...):checked");

    test(() => {
        assert_equals(getComputedStyle(grouped).fontFamily, 'monospace');
    }, "Styles applied via grouped selector including unmatched ::part(...):checked");
  </script>
</body>
chromium/third_party/blink/web_tests/external/wpt/css/css-shadow-parts/grouping-with-checked.html
