tor-browser

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

browser_rules_selector_highlight.js (4142B)

      1 /* Any copyright is dedicated to the Public Domain.
      2 http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Tests that the rule view selector text is highlighted correctly according
      7 // to the components of the selector.
      8 
      9 const TEST_URI = [
     10  "<style type='text/css'>",
     11  "  h1 {}",
     12  "  h1#testid {}",
     13  "  h1 + p {}",
     14  '  div[hidden="true"] {}',
     15  '  div[title="test"][checked=true] {}',
     16  "  p:empty {}",
     17  "  p:lang(en) {}",
     18  "  .testclass:active {}",
     19  "  .testclass:focus {}",
     20  "  .testclass:hover {}",
     21  "</style>",
     22  "<h1>Styled Node</h1>",
     23  "<p>Paragraph</p>",
     24  '<h1 id="testid">Styled Node</h1>',
     25  '<div hidden="true"></div>',
     26  '<div title="test" checked="true"></div>',
     27  "<p></p>",
     28  '<p lang="en">Paragraph<p>',
     29  '<div class="testclass">Styled Node</div>',
     30 ].join("\n");
     31 
     32 const SELECTOR_ATTRIBUTE = "ruleview-selector-attribute";
     33 const SELECTOR_ELEMENT = "ruleview-selector-element";
     34 const SELECTOR_PSEUDO_CLASS = "ruleview-selector-pseudo-class";
     35 const SELECTOR_PSEUDO_CLASS_LOCK = "ruleview-selector-pseudo-class-lock";
     36 
     37 const TEST_DATA = [
     38  {
     39    node: "h1",
     40    expected: [{ value: "h1", class: SELECTOR_ELEMENT }],
     41  },
     42  {
     43    node: "h1 + p",
     44    expected: [{ value: "h1 + p", class: SELECTOR_ELEMENT }],
     45  },
     46  {
     47    node: "h1#testid",
     48    expected: [{ value: "h1#testid", class: SELECTOR_ELEMENT }],
     49  },
     50  {
     51    node: "div[hidden='true']",
     52    expected: [
     53      { value: "div", class: SELECTOR_ELEMENT },
     54      { value: '[hidden="true"]', class: SELECTOR_ATTRIBUTE },
     55    ],
     56  },
     57  {
     58    node: 'div[title="test"][checked="true"]',
     59    expected: [
     60      { value: "div", class: SELECTOR_ELEMENT },
     61      { value: '[title="test"]', class: SELECTOR_ATTRIBUTE },
     62      { value: '[checked="true"]', class: SELECTOR_ATTRIBUTE },
     63    ],
     64  },
     65  {
     66    node: "p:empty",
     67    expected: [
     68      { value: "p", class: SELECTOR_ELEMENT },
     69      { value: ":empty", class: SELECTOR_PSEUDO_CLASS },
     70    ],
     71  },
     72  {
     73    node: "p:lang(en)",
     74    expected: [
     75      { value: "p", class: SELECTOR_ELEMENT },
     76      { value: ":lang(en)", class: SELECTOR_PSEUDO_CLASS },
     77    ],
     78  },
     79  {
     80    node: ".testclass",
     81    pseudoClass: ":active",
     82    expected: [
     83      { value: ".testclass", class: SELECTOR_ELEMENT },
     84      { value: ":active", class: SELECTOR_PSEUDO_CLASS_LOCK },
     85    ],
     86  },
     87  {
     88    node: ".testclass",
     89    pseudoClass: ":focus",
     90    expected: [
     91      { value: ".testclass", class: SELECTOR_ELEMENT },
     92      { value: ":focus", class: SELECTOR_PSEUDO_CLASS_LOCK },
     93    ],
     94  },
     95  {
     96    node: ".testclass",
     97    pseudoClass: ":hover",
     98    expected: [
     99      { value: ".testclass", class: SELECTOR_ELEMENT },
    100      { value: ":hover", class: SELECTOR_PSEUDO_CLASS_LOCK },
    101    ],
    102  },
    103 ];
    104 
    105 add_task(async function () {
    106  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
    107  const { inspector, view } = await openRuleView();
    108 
    109  for (const { node, pseudoClass, expected } of TEST_DATA) {
    110    await selectNode(node, inspector);
    111 
    112    if (pseudoClass) {
    113      const onRefresh = inspector.once("rule-view-refreshed");
    114      inspector.togglePseudoClass(pseudoClass);
    115      await onRefresh;
    116    }
    117 
    118    const selectorContainer = getRuleViewRuleEditor(view, 1).selectorText
    119      .firstChild;
    120 
    121    if (selectorContainer.children.length === expected.length) {
    122      for (let i = 0; i < expected.length; i++) {
    123        is(
    124          expected[i].value,
    125          selectorContainer.children[i].textContent,
    126          "Got expected selector value: " +
    127            expected[i].value +
    128            " == " +
    129            selectorContainer.children[i].textContent
    130        );
    131        is(
    132          expected[i].class,
    133          selectorContainer.children[i].className,
    134          "Got expected class name: " +
    135            expected[i].class +
    136            " == " +
    137            selectorContainer.children[i].className
    138        );
    139      }
    140    } else {
    141      for (const selector of selectorContainer.children) {
    142        info(
    143          "Actual selector components: { value: " +
    144            selector.textContent +
    145            ", class: " +
    146            selector.className +
    147            " }\n"
    148        );
    149      }
    150    }
    151  }
    152 });