| <!doctype html> |
| <html> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="timeout" content="long" /> |
| <meta |
| name="author" |
| title="Keith Cirkel" |
| href="mailto:wpt@keithcirkel.co.uk" |
| /> |
| <link rel="help" href="https://html.spec.whatwg.org/multipage/custom-elements.html#custom-state-pseudo-class" /> |
| <title>:state() css selector applies in shadow roots</title> |
| |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| </head> |
| <body> |
| <custom-state id="myCE"> I should be green </custom-state> |
| <style></style> |
| <script> |
| customElements.define( |
| "custom-state", |
| class extends HTMLElement { |
| connectedCallback() { |
| this.elementInternals = this.attachInternals(); |
| const css = new CSSStyleSheet(); |
| css.replaceSync(` |
| :host { |
| color: #f00; |
| } |
| :host(:state(green)) { |
| color: #0f0; |
| } |
| `); |
| this.attachShadow({ mode: "open" }).adoptedStyleSheets.push(css); |
| } |
| }, |
| ); |
| |
| test(function () { |
| assert_false(myCE.elementInternals.states.has("green")); |
| assert_equals( |
| getComputedStyle(myCE).getPropertyValue("color"), |
| "rgb(255, 0, 0)", |
| ); |
| }, "state selector has no influence when state is not applied"); |
| |
| test(function (t) { |
| myCE.elementInternals.states.add("green"); |
| t.add_cleanup(() => { |
| myCE.elementInternals.states.delete("green"); |
| }); |
| assert_true(myCE.elementInternals.states.has("green")); |
| assert_equals( |
| getComputedStyle(myCE).getPropertyValue("color"), |
| "rgb(0, 255, 0)", |
| ); |
| }, "state selector has influence when state is applied"); |
| |
| test(function (t) { |
| myCE.elementInternals.states.add("foo"); |
| t.add_cleanup(() => { |
| myCE.elementInternals.states.delete("foo"); |
| }); |
| assert_false(myCE.elementInternals.states.has("green")); |
| assert_true(myCE.elementInternals.states.has("foo")); |
| assert_equals( |
| getComputedStyle(myCE).getPropertyValue("color"), |
| "rgb(255, 0, 0)", |
| ); |
| }, "state selector only applies on given ident"); |
| </script> |
| </body> |
| </html> |
