tor-browser

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

browser_rules_custom-states.js (3359B)

      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 the rule-view properly handles custom states pseudo classes
      7 
      8 const TEST_URI = `data:text/html,<meta charset=utf8>${encodeURIComponent(`
      9  <style>
     10    fx-test {
     11      color: lime;
     12    }
     13 
     14    fx-test:state(custom-state) {
     15      color: gold;
     16    }
     17 
     18    fx-test:state(another-custom-state) {
     19      color: tomato;
     20    }
     21  </style>
     22  <body>
     23  </body>
     24  <script>
     25    customElements.define("fx-test", class extends HTMLElement {});
     26 
     27    const noStateEl = document.createElement("fx-test");
     28    noStateEl.id = "no-state";
     29    noStateEl.textContent = noStateEl.id;
     30 
     31    const singleStateEl = document.createElement("fx-test");
     32    singleStateEl.id = "single-state";
     33    singleStateEl.textContent = singleStateEl.id;
     34    const singleStateElInternals = singleStateEl.attachInternals();
     35    singleStateElInternals.states.add("custom-state");
     36 
     37    const multipleStateEl = document.createElement("fx-test");
     38    multipleStateEl.id = "multiple-state";
     39    multipleStateEl.textContent = multipleStateEl.id;
     40    const multipleStateElInternals = multipleStateEl.attachInternals();
     41    multipleStateElInternals.states.add("custom-state");
     42    multipleStateElInternals.states.add("another-custom-state");
     43 
     44    document.body.append(noStateEl, singleStateEl, multipleStateEl);
     45  </script>
     46 `)}
     47 `;
     48 
     49 add_task(async function () {
     50  await addTab(TEST_URI);
     51  const { inspector, view } = await openRuleView();
     52 
     53  await selectNode("fx-test#no-state", inspector);
     54  await checkRuleViewContent(view, [
     55    {
     56      selector: `element`,
     57      ancestorRulesData: null,
     58      selectorEditable: false,
     59      declarations: [],
     60    },
     61    {
     62      selector: `fx-test`,
     63      declarations: [{ name: "color", value: "lime" }],
     64    },
     65  ]);
     66 
     67  await selectNode("fx-test#single-state", inspector);
     68  await checkRuleViewContent(view, [
     69    {
     70      selector: `element`,
     71      ancestorRulesData: null,
     72      selectorEditable: false,
     73      declarations: [],
     74    },
     75    {
     76      selector: `fx-test:state(custom-state)`,
     77      declarations: [{ name: "color", value: "gold" }],
     78    },
     79    {
     80      selector: `fx-test`,
     81      declarations: [{ name: "color", value: "lime", overridden: true }],
     82    },
     83  ]);
     84 
     85  await selectNode("fx-test#multiple-state", inspector);
     86  await checkRuleViewContent(view, [
     87    {
     88      selector: `element`,
     89      ancestorRulesData: null,
     90      selectorEditable: false,
     91      declarations: [],
     92    },
     93    {
     94      selector: `fx-test:state(another-custom-state)`,
     95      declarations: [{ name: "color", value: "tomato" }],
     96    },
     97    {
     98      selector: `fx-test:state(custom-state)`,
     99      declarations: [{ name: "color", value: "gold", overridden: true }],
    100    },
    101    {
    102      selector: `fx-test`,
    103      declarations: [{ name: "color", value: "lime", overridden: true }],
    104    },
    105  ]);
    106 
    107  info("Check that the selector highlighter works for :state()");
    108  let data = await clickSelectorIcon(view, "fx-test:state(custom-state)");
    109 
    110  ok(data.highlighter, "The selector highlighter instance was created");
    111  ok(data.isShown, "The selector highlighter was shown");
    112 
    113  info("Click on the same icon to disable highlighter");
    114  data = await clickSelectorIcon(view, "fx-test:state(custom-state)");
    115  ok(!data.isShown, "The highlighter is not visible anymore");
    116 });