tor-browser

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

browser_rules_edit-property-nested-rules.js (2535B)

      1 /* Any copyright is dedicated to the Public Domain.
      2 http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Testing editing nested rules in the rule view.
      7 
      8 const STYLE = `
      9    main {
     10      background-color: tomato;
     11      & > .foo {
     12        background-color: teal;
     13        &.foo {
     14          color: gold;
     15        }
     16      }
     17    }`;
     18 
     19 const HTML = `
     20  <main>
     21    Hello
     22    <div class=foo>Nested</div>
     23  </main>`;
     24 
     25 const TEST_URI_INLINE_SHEET = `
     26  <style>${STYLE}</style>
     27  ${HTML}`;
     28 
     29 const TEST_URI_CONSTRUCTED_SHEET = `
     30  ${HTML}
     31  <script>
     32    const sheet = new CSSStyleSheet();
     33    sheet.replaceSync(\`${STYLE}\`);
     34    document.adoptedStyleSheets.push(sheet);
     35  </script>
     36 `;
     37 
     38 add_task(async function test_inline_sheet() {
     39  info("Run test with inline stylesheet");
     40  await runTest(TEST_URI_INLINE_SHEET);
     41 });
     42 
     43 add_task(async function test_constructed_sheet() {
     44  info("Run test with constructed stylesheet");
     45  await runTest(TEST_URI_CONSTRUCTED_SHEET);
     46 });
     47 
     48 async function runTest(uri) {
     49  await addTab(`data:text/html,<meta charset=utf8>${encodeURIComponent(uri)}`);
     50  const { inspector, view } = await openRuleView();
     51 
     52  await selectNode(".foo", inspector);
     53 
     54  info(`Modify color in "&.foo" rule`);
     55  await updateDeclaration(view, 1, { color: "gold" }, { color: "white" });
     56  is(
     57    await getComputedStyleProperty(".foo", null, "color"),
     58    "rgb(255, 255, 255)",
     59    "color was set to white on .foo"
     60  );
     61 
     62  info(`Modify background-color in "& > .foo" rule`);
     63  await updateDeclaration(
     64    view,
     65    2,
     66    { "background-color": "teal" },
     67    { "background-color": "blue" }
     68  );
     69  is(
     70    await getComputedStyleProperty(".foo", null, "background-color"),
     71    "rgb(0, 0, 255)",
     72    "background-color was set to blue on .foo…"
     73  );
     74  is(
     75    await getComputedStyleProperty(".foo", null, "color"),
     76    "rgb(255, 255, 255)",
     77    "…and color is still white"
     78  );
     79 
     80  await selectNode("main", inspector);
     81  info(`Modify background-color in "main" rule`);
     82  await updateDeclaration(
     83    view,
     84    1,
     85    { "background-color": "tomato" },
     86    { "background-color": "red" }
     87  );
     88  is(
     89    await getComputedStyleProperty("main", null, "background-color"),
     90    "rgb(255, 0, 0)",
     91    "background-color was set to red on <main>…"
     92  );
     93  is(
     94    await getComputedStyleProperty(".foo", null, "background-color"),
     95    "rgb(0, 0, 255)",
     96    "…background-color is still blue on .foo…"
     97  );
     98  is(
     99    await getComputedStyleProperty(".foo", null, "color"),
    100    "rgb(255, 255, 255)",
    101    "…and color is still white"
    102  );
    103 }