tor-browser

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

browser_rules_selector-highlighter-nested-rules.js (3410B)

      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 selector highlighter works for nested rules.
      7 
      8 const TEST_URI = `
      9  <style>
     10    main {
     11      background: tomato;
     12      & > h1 {
     13        color: gold;
     14 
     15        &#title {
     16          text-decoration: underline;
     17        }
     18 
     19        &.title {
     20          outline: 2px solid rebeccapurple;
     21          & em {
     22            color: salmon;
     23 
     24            html & {
     25              padding: 1em;
     26            }
     27          }
     28        }
     29      }
     30 
     31      .title {
     32        font-weight: 32px;
     33      }
     34    }
     35  </style>
     36  <main>
     37    <h1 class="title" id="title">Selector Highlighter for <em>nested rules</em></h1>
     38  </main>`;
     39 
     40 add_task(async function () {
     41  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
     42  const { inspector, view } = await openRuleView();
     43 
     44  await selectNode("h1", inspector);
     45 
     46  const activeHighlighter = inspector.highlighters.getActiveHighlighter(
     47    inspector.highlighters.TYPES.SELECTOR
     48  );
     49  ok(!activeHighlighter, "No selector highlighter is active");
     50 
     51  info(`Clicking on "& > h1" selector icon`);
     52  let highlighterData = await clickSelectorIcon(view, "& > h1");
     53  is(
     54    highlighterData.nodeFront.nodeName.toLowerCase(),
     55    "h1",
     56    "<h1> is highlighted"
     57  );
     58 
     59  ok(
     60    highlighterData.highlighter,
     61    "The selector highlighter instance was created"
     62  );
     63  ok(highlighterData.isShown, "The selector highlighter was shown");
     64 
     65  info(`Clicking on "&#title" selector icon`);
     66  highlighterData = await clickSelectorIcon(view, "&#title");
     67  is(
     68    highlighterData.nodeFront.nodeName.toLowerCase(),
     69    "h1",
     70    "<h1> is highlighted"
     71  );
     72  ok(
     73    highlighterData.highlighter,
     74    "The selector highlighter instance was created"
     75  );
     76  ok(highlighterData.isShown, "The selector highlighter was shown");
     77 
     78  info(`Clicking on "&.title" selector icon`);
     79  highlighterData = await clickSelectorIcon(view, "&.title");
     80  is(
     81    highlighterData.nodeFront.nodeName.toLowerCase(),
     82    "h1",
     83    "<h1> is highlighted"
     84  );
     85  ok(
     86    highlighterData.highlighter,
     87    "The selector highlighter instance was created"
     88  );
     89  ok(highlighterData.isShown, "The selector highlighter was shown");
     90 
     91  info(`Clicking on "& .title" selector icon`);
     92  highlighterData = await clickSelectorIcon(view, "& .title");
     93  is(
     94    highlighterData.nodeFront.nodeName.toLowerCase(),
     95    "h1",
     96    "<h1> is highlighted"
     97  );
     98  ok(
     99    highlighterData.highlighter,
    100    "The selector highlighter instance was created"
    101  );
    102  ok(highlighterData.isShown, "The selector highlighter was shown");
    103 
    104  await selectNode("h1 em", inspector);
    105  info(`Clicking on "& em" selector icon`);
    106  highlighterData = await clickSelectorIcon(view, "& em");
    107  is(
    108    highlighterData.nodeFront.nodeName.toLowerCase(),
    109    "em",
    110    "<em> is highlighted"
    111  );
    112  ok(
    113    highlighterData.highlighter,
    114    "The selector highlighter instance was created"
    115  );
    116  ok(highlighterData.isShown, "The selector highlighter was shown");
    117 
    118  info(`Clicking on "html &" selector icon`);
    119  highlighterData = await clickSelectorIcon(view, "html &");
    120  is(
    121    highlighterData.nodeFront.nodeName.toLowerCase(),
    122    "em",
    123    "<em> is highlighted"
    124  );
    125  ok(
    126    highlighterData.highlighter,
    127    "The selector highlighter instance was created"
    128  );
    129  ok(highlighterData.isShown, "The selector highlighter was shown");
    130 });