67 lines
1.9 KiB
HTML
67 lines
1.9 KiB
HTML
<!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>
|