tor-browser

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

part-lang.html (2623B)

      1 <!doctype html>
      2 <title>::part():lang() invalidation</title>
      3 <link rel="author" title="Keith Cirkel" href="mailto:wpt@keithcirkel.co.uk" />
      4 <link rel="help" href="https://drafts.csswg.org/css-shadow-parts/#part" />
      5 <link rel="help" href="https://github.com/whatwg/html/pull/8467" />
      6 <style>
      7  my-element::part(inner) {
      8    background-color: #ff0000;
      9  }
     10  my-element::part(inner):lang(en) {
     11    background-color: #00ffff;
     12  }
     13  my-element::part(inner):lang(en-GB) {
     14    background-color: #00ff00;
     15  }
     16  my-element::part(inner):lang(fr) {
     17    background-color: #0000ff;
     18  }
     19 </style>
     20 <body>
     21  <my-element id="subject" lang="en"></my-element>
     22  <script src="/resources/testharness.js"></script>
     23  <script src="/resources/testharnessreport.js"></script>
     24  <script>
     25    const RED = "rgb(255, 0, 0)";
     26    const GREEN = "rgb(0, 255, 0)";
     27    const BLUE = "rgb(0, 0, 255)";
     28    const AQUA = "rgb(0, 255, 255)";
     29    customElements.define(
     30      "my-element",
     31      class MyElement extends HTMLElement {
     32        connectedCallback() {
     33          this.attachShadow({
     34            mode: "open",
     35          }).innerHTML = `<div part="inner">Test</div>`;
     36          this.elementInternals = this.attachInternals();
     37        }
     38 
     39        get inner() {
     40          return this.shadowRoot.querySelector("[part=inner]");
     41        }
     42      },
     43    );
     44 
     45    test((t) => {
     46      t.add_cleanup(() => {
     47        subject.inner.removeAttribute("lang");
     48      });
     49      assert_equals(getComputedStyle(subject.inner).backgroundColor, AQUA);
     50      subject.inner.lang = "en-GB";
     51      assert_equals(getComputedStyle(subject.inner).backgroundColor, GREEN);
     52      subject.inner.lang = "fr";
     53      assert_equals(getComputedStyle(subject.inner).backgroundColor, BLUE);
     54      subject.inner.lang = "en";
     55      assert_equals(getComputedStyle(subject.inner).backgroundColor, AQUA);
     56    }, "::part():lang() invalidation");
     57 
     58    test((t) => {
     59      t.add_cleanup(() => {
     60        subject.inner.removeAttribute("lang");
     61      });
     62      assert_equals(getComputedStyle(subject.inner).backgroundColor, AQUA);
     63      subject.inner.setAttribute("lang", "en-GB");
     64      assert_equals(getComputedStyle(subject.inner).backgroundColor, GREEN);
     65      subject.inner.setAttribute("lang", "en");
     66      assert_equals(getComputedStyle(subject.inner).backgroundColor, AQUA);
     67      subject.inner.setAttribute("lang", "fr");
     68      assert_equals(getComputedStyle(subject.inner).backgroundColor, BLUE);
     69      subject.inner.removeAttribute("lang");
     70      assert_equals(getComputedStyle(subject.inner).backgroundColor, AQUA);
     71    }, "::part():lang() invalidation from setAttribute");
     72  </script>
     73 </body>