tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

state-css-selector-shadow-dom.html (2372B)

      1 <!doctype html>
      2 <html>
      3  <head>
      4    <meta charset="utf-8" />
      5    <meta name="timeout" content="long" />
      6    <meta
      7      name="author"
      8      title="Keith Cirkel"
      9      href="mailto:wpt@keithcirkel.co.uk"
     10    />
     11    <link rel="help" href="https://html.spec.whatwg.org/multipage/custom-elements.html#custom-state-pseudo-class" />
     12    <title>:state() css selector applies in shadow roots</title>
     13 
     14    <script src="/resources/testharness.js"></script>
     15    <script src="/resources/testharnessreport.js"></script>
     16  </head>
     17  <body>
     18    <custom-state id="myCE"> I should be green </custom-state>
     19    <style></style>
     20    <script>
     21      customElements.define(
     22        "custom-state",
     23        class extends HTMLElement {
     24          connectedCallback() {
     25            this.elementInternals = this.attachInternals();
     26            const css = new CSSStyleSheet();
     27            css.replaceSync(`
     28              :host {
     29                color: #f00;
     30              }
     31              :host(:state(green)) {
     32                color: #0f0;
     33              }
     34            `);
     35            this.attachShadow({ mode: "open" }).adoptedStyleSheets.push(css);
     36          }
     37        },
     38      );
     39 
     40      test(function () {
     41        assert_false(myCE.elementInternals.states.has("green"));
     42        assert_equals(
     43          getComputedStyle(myCE).getPropertyValue("color"),
     44          "rgb(255, 0, 0)",
     45        );
     46      }, "state selector has no influence when state is not applied");
     47 
     48      test(function (t) {
     49        myCE.elementInternals.states.add("green");
     50        t.add_cleanup(() => {
     51          myCE.elementInternals.states.delete("green");
     52        });
     53        assert_true(myCE.elementInternals.states.has("green"));
     54        assert_equals(
     55          getComputedStyle(myCE).getPropertyValue("color"),
     56          "rgb(0, 255, 0)",
     57        );
     58      }, "state selector has influence when state is applied");
     59 
     60      test(function (t) {
     61        myCE.elementInternals.states.add("foo");
     62        t.add_cleanup(() => {
     63          myCE.elementInternals.states.delete("foo");
     64        });
     65        assert_false(myCE.elementInternals.states.has("green"));
     66        assert_true(myCE.elementInternals.states.has("foo"));
     67        assert_equals(
     68          getComputedStyle(myCE).getPropertyValue("color"),
     69          "rgb(255, 0, 0)",
     70        );
     71      }, "state selector only applies on given ident");
     72    </script>
     73  </body>
     74 </html>