tor-browser

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

browser_rules_shadowdom_slot_rules.js (3142B)

      1 /* Any copyright is dedicated to the Public Domain.
      2 http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Test that when selecting a slot element, the rule view displays the rules for the
      7 // corresponding element.
      8 
      9 const TEST_URL =
     10  `data:text/html;charset=utf-8,` +
     11  encodeURIComponent(`
     12  <html>
     13  <head>
     14  <style>
     15    #el1 { color: red }
     16    #el2 { color: blue }
     17  </style>
     18  </head>
     19  <body>
     20  <test-component>
     21    <div slot="slot1" id="el1">slot1-1</div>
     22    <div slot="slot1" id="el2">slot1-2</div>
     23    <div slot="slot1" id="el3">slot1-2</div>
     24  </test-component>
     25 
     26  <script>
     27    'use strict';
     28    customElements.define('test-component', class extends HTMLElement {
     29      constructor() {
     30        super();
     31        let shadowRoot = this.attachShadow({mode: 'open'});
     32        shadowRoot.innerHTML = \`
     33          <style>
     34            ::slotted(#el3) {
     35              color: green;
     36            }
     37          </style>
     38          <slot name="slot1"></slot>
     39        \`;
     40      }
     41    });
     42  </script>
     43  </body>
     44  </html>
     45 `);
     46 
     47 add_task(async function () {
     48  const { inspector } = await openInspectorForURL(TEST_URL);
     49  const { markup } = inspector;
     50  const ruleview = inspector.getPanel("ruleview").view;
     51 
     52  // <test-component> is a shadow host.
     53  info("Find and expand the test-component shadow DOM host.");
     54  const hostFront = await getNodeFront("test-component", inspector);
     55 
     56  await markup.expandNode(hostFront);
     57  await waitForMultipleChildrenUpdates(inspector);
     58 
     59  info(
     60    "Test that expanding a shadow host shows shadow root and one host child."
     61  );
     62  const hostContainer = markup.getContainer(hostFront);
     63 
     64  info("Expand the shadow root");
     65  const childContainers = hostContainer.getChildContainers();
     66  const shadowRootContainer = childContainers[0];
     67  await expandContainer(inspector, shadowRootContainer);
     68 
     69  info("Expand the slot");
     70  const shadowChildContainers = shadowRootContainer.getChildContainers();
     71  // shadowChildContainers[0] is the style node.
     72  const slotContainer = shadowChildContainers[1];
     73  await expandContainer(inspector, slotContainer);
     74 
     75  const slotChildContainers = slotContainer.getChildContainers();
     76  is(slotChildContainers.length, 3, "Expecting 3 slotted children");
     77 
     78  info(
     79    "Select slotted node and check that the rule view displays correct content"
     80  );
     81  await selectNode(slotChildContainers[0].node, inspector);
     82  checkRule(ruleview, "#el1", "color", "red");
     83 
     84  info("Select another slotted node and check the rule view");
     85  await selectNode(slotChildContainers[1].node, inspector);
     86  checkRule(ruleview, "#el2", "color", "blue");
     87 
     88  info("Select the last slotted node and check the rule view");
     89  await selectNode(slotChildContainers[2].node, inspector);
     90  checkRule(ruleview, "::slotted(#el3)", "color", "green");
     91 });
     92 
     93 function checkRule(ruleview, selector, name, expectedValue) {
     94  const rule = getRuleViewRule(ruleview, selector);
     95  ok(rule, "ruleview shows the expected rule for slotted " + selector);
     96  const value = getRuleViewPropertyValue(ruleview, selector, name);
     97  is(
     98    value,
     99    expectedValue,
    100    "ruleview shows the expected value for slotted " + selector
    101  );
    102 }