Rune Lillesveen
08bc02fbc8
Automatic update from web-platform-tests Move css-shadow-parts/ tests to css-shadow/part/ The css-shadow-parts spec is now part of css-shadow. Kept a separate directory to make it easier for the META.yml and feature mapping. Change-Id: I9d2572ad4f31d8dd7dd1aacf76209028c6a3d84a Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7485890 Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org> Commit-Queue: Rune Lillesveen <futhark@chromium.org> Cr-Commit-Position: refs/heads/main@{#1570431} -- wpt-commits: 680e4cf3fcabe4a6de1deb7fc36eb84d8278eedd wpt-pr: 57245
68 lines
1.9 KiB
HTML
68 lines
1.9 KiB
HTML
<!doctype html>
|
|
<title>::part():disabled grouping</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-shadow/#part">
|
|
<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>
|