wpt/css/css-shadow-parts/grouping-with-checked.html at 15717f943ecb1ec88ad6bba1643c026bfcd1cb41 · web-platform-tests/wpt · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!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>