tor-browser

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

browser_rules_inherited-custom-properties.js (2063B)

      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 custom properties are only displayed when they are unregistered,
      7 // or when their property definition indicate that they should inherit.
      8 
      9 const TEST_URI = `
     10  <style>
     11    @property --inherit {
     12      syntax: "<color>";
     13      inherits: true;
     14      initial-value: gold;
     15    }
     16 
     17    @property --no-inherit {
     18      syntax: "<color>";
     19      inherits: false;
     20      initial-value: tomato;
     21    }
     22 
     23    main, [test="no-inherit"] {
     24      --no-inherit: blue;
     25    }
     26 
     27    main, [test="inherit"] {
     28      --inherit: red;
     29    }
     30 
     31    main, [test="unregistered"] {
     32      --myvar: brown;
     33    }
     34 
     35    h1 {
     36      background-color: var(--no-inherit);
     37      color: var(--inherit);
     38      outline-color: var(--myvar);
     39    }
     40  </style>
     41  <main>
     42    <h1>Hello world</h1>
     43  </main>
     44 `;
     45 
     46 add_task(async function () {
     47  await pushPref("layout.css.properties-and-values.enabled", true);
     48  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
     49  const { inspector, view } = await openRuleView();
     50  await selectNode("h1", inspector);
     51 
     52  // The `main, [test="no-inherit"]` only has 1 definition that should be hidden,
     53  // which means that the whole rule should be hidden
     54  await checkRuleViewContent(view, [
     55    {
     56      selector: `element`,
     57      ancestorRulesData: null,
     58      selectorEditable: false,
     59      declarations: [],
     60    },
     61    {
     62      selector: `h1`,
     63      declarations: [
     64        { name: "background-color", value: "var(--no-inherit)" },
     65        { name: "color", value: "var(--inherit)" },
     66        { name: "outline-color", value: "var(--myvar)" },
     67      ],
     68    },
     69    { header: "Inherited from main" },
     70    {
     71      selector: `main, ~~[test="unregistered"]~~`,
     72      inherited: true,
     73      declarations: [{ name: "--myvar", value: "brown" }],
     74    },
     75    {
     76      selector: `main, ~~[test="inherit"]~~`,
     77      inherited: true,
     78      declarations: [{ name: "--inherit", value: "red" }],
     79    },
     80    { header: "@property" },
     81  ]);
     82 });