tor-browser

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

browser_rules_add-rule-shadow-dom.js (3604B)

      1 /* Any copyright is dedicated to the Public Domain.
      2 http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Tests adding a rule on elements in shadow DOM
      7 
      8 const TEST_URL =
      9  `data:text/html;charset=utf-8,` +
     10  encodeURIComponent(`
     11  <html>
     12  <body>
     13    <test-component>
     14      <div slot="my-slot">a slot</div>
     15    </test-component>
     16 
     17    <script>
     18      'use strict';
     19      customElements.define('test-component', class extends HTMLElement {
     20        constructor() {
     21          super();
     22          let shadowRoot = this.attachShadow({mode: 'open'});
     23          shadowRoot.innerHTML = '<h1>hello</h1><slot name="my-slot"></slot>';
     24        }
     25      });
     26    </script>
     27  </body>
     28  </html>
     29 `);
     30 
     31 add_task(async function () {
     32  await addTab(TEST_URL);
     33  const { inspector, view } = await openRuleView();
     34  const { markup } = inspector;
     35 
     36  // <test-component> is a shadow host.
     37  info("Find and expand the test-component shadow DOM host.");
     38  const hostFront = await getNodeFront("test-component", inspector);
     39 
     40  await markup.expandNode(hostFront);
     41  await waitForMultipleChildrenUpdates(inspector);
     42 
     43  info(
     44    "Test that expanding a shadow host shows shadow root and one host child."
     45  );
     46  const hostContainer = markup.getContainer(hostFront);
     47 
     48  info("Expand the shadow root");
     49  const childContainers = hostContainer.getChildContainers();
     50  const shadowRootContainer = childContainers[0];
     51  await expandContainer(inspector, shadowRootContainer);
     52 
     53  const [h1Container, slotContainer] = shadowRootContainer.getChildContainers();
     54 
     55  info("Add a rule on the h1 node in the shadow DOM");
     56  await selectNode(h1Container.node, inspector);
     57 
     58  // Add the rule
     59  await addNewRuleAndDismissEditor(inspector, view, "h1", 1);
     60  // and a property
     61  await addProperty(view, 1, "color", "red");
     62 
     63  await checkRuleViewContent(view, [
     64    {
     65      selector: "element",
     66      selectorEditable: false,
     67      declarations: [],
     68    },
     69    {
     70      selector: "h1",
     71      declarations: [{ name: "color", value: "red", dirty: true }],
     72    },
     73  ]);
     74  let computedColor = await SpecialPowers.spawn(
     75    gBrowser.selectedBrowser,
     76    [],
     77    () =>
     78      content.getComputedStyle(
     79        content.document
     80          .querySelector("test-component")
     81          .shadowRoot.querySelector("h1")
     82      ).color
     83  );
     84  is(
     85    computedColor,
     86    "rgb(255, 0, 0)",
     87    "The declaration was properly assigned to the shadow DOM h1"
     88  );
     89 
     90  info("Add a rule on the slot node in the shadow DOM");
     91  await selectNode(slotContainer.node, inspector);
     92 
     93  // Add the rule
     94  await addNewRuleAndDismissEditor(inspector, view, "slot", 1);
     95  // and a property
     96  await addProperty(view, 1, "color", "blue");
     97 
     98  await checkRuleViewContent(view, [
     99    {
    100      selector: "element",
    101      selectorEditable: false,
    102      declarations: [],
    103    },
    104    {
    105      selector: "slot",
    106      declarations: [{ name: "color", value: "blue", dirty: true }],
    107    },
    108  ]);
    109  computedColor = await SpecialPowers.spawn(
    110    gBrowser.selectedBrowser,
    111    [],
    112    () =>
    113      content.getComputedStyle(
    114        content.document
    115          .querySelector("test-component")
    116          .shadowRoot.querySelector("slot")
    117      ).color
    118  );
    119  is(
    120    computedColor,
    121    "rgb(0, 0, 255)",
    122    "The declaration was properly assigned to the shadow DOM h1"
    123  );
    124 
    125  const shadowRootStyleSheetsCount = await SpecialPowers.spawn(
    126    gBrowser.selectedBrowser,
    127    [],
    128    () =>
    129      content.document.querySelector("test-component").shadowRoot.styleSheets
    130        .length
    131  );
    132  is(
    133    shadowRootStyleSheetsCount,
    134    1,
    135    "Only one stylesheet was created in the shadow root"
    136  );
    137 });