tor-browser

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

exportparts-multiple.html (2234B)

      1 <!doctype html>
      2 <title>CSS Shadow Parts - Exporting multiple shadow parts</title>
      3 <script src="/resources/testharness.js"></script>
      4 <script src="/resources/testharnessreport.js"></script>
      5 <link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
      6 <link rel="author" href="https://mozilla.org" title="Mozilla">
      7 <link rel="help" href="https://drafts.csswg.org/css-shadow-parts/">
      8 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1618509">
      9 <style>
     10 ::part(inner-part) {
     11  color: red;
     12  background: blue;
     13  width: 100px;
     14  height: 100px;
     15 }
     16 ::part(inner-part-alias) {
     17  color: green;
     18 }
     19 .change-1::part(inner-part) {
     20  background: green;
     21 }
     22 
     23 .change-2::part(inner-part-alias) {
     24  color: blue;
     25 }
     26 </style>
     27 <div id="outer"></div>
     28 <script>
     29 test(function() {
     30  let outer = document.getElementById("outer");
     31  outer.attachShadow({ mode: "open" }).innerHTML = `
     32    <div exportparts="inner-part, inner-part: inner-part-alias"></div>
     33  `;
     34 
     35  let inner = outer.shadowRoot.querySelector("div");
     36  inner.attachShadow({ mode: "open" }).innerHTML = `
     37    <div part="inner-part"></div>
     38  `;
     39 
     40  let innerPart = inner.shadowRoot.querySelector("div");
     41  assert_equals(
     42    getComputedStyle(innerPart).color,
     43    "rgb(0, 128, 0)",
     44    "color should be green from ::part(inner-part-alias) rule"
     45  );
     46  assert_equals(
     47    getComputedStyle(innerPart).backgroundColor,
     48    "rgb(0, 0, 255)",
     49    "background should be blue from ::part(inner-part) rule"
     50  );
     51 
     52  outer.classList.add("change-1");
     53  assert_equals(
     54    getComputedStyle(innerPart).color,
     55    "rgb(0, 128, 0)",
     56    "color should be green from ::part(inner-part-alias) rule"
     57  );
     58  assert_equals(
     59    getComputedStyle(innerPart).backgroundColor,
     60    "rgb(0, 128, 0)",
     61    "background should be green from .change-1::part(inner-part) rule"
     62  );
     63 
     64  outer.classList.add("change-2");
     65  assert_equals(
     66    getComputedStyle(innerPart).color,
     67    "rgb(0, 0, 255)",
     68    "color should be blue from .change-2::part(inner-part-alias) rule"
     69  );
     70  assert_equals(
     71    getComputedStyle(innerPart).backgroundColor,
     72    "rgb(0, 128, 0)",
     73    "background should be green from .change-1::part(inner-part) rule"
     74  );
     75 }, "Forwarding part under multiple names should work");
     76 </script>