grouping-with-disabled.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(button) {
    font-family: fantasy;
    background-color: #ff0000;
  }
  #grouped {
    color: #ff0000;
  }
  my-element::part(button):disabled {
    background-color: #00ff00;
  }
  my-element::part(button):disabled,
  #grouped {
    color: #00ff00;
  }
  my-element::part(not-a-part):disabled,
  #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 = `
              <button part="button" disabled>Test</button>
            `;
          this.elementInternals = this.attachInternals();
        }

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

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

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

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

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