tor-browser

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

browser_rules_variables_01.js (4764B)

      1 /* Any copyright is dedicated to the Public Domain.
      2 http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Test for variables in rule view.
      7 
      8 const TEST_URI = URL_ROOT + "doc_variables_1.html";
      9 
     10 add_task(async function () {
     11  await addTab(TEST_URI);
     12  const { inspector, view } = await openRuleView();
     13  await selectNode("#target", inspector);
     14 
     15  info(
     16    "Tests basic support for CSS Variables for both single variable " +
     17      "and double variable. Formats tested: var(x, constant), var(x, var(y))"
     18  );
     19 
     20  const unsetColor = getRuleViewProperty(
     21    view,
     22    "div",
     23    "color"
     24  ).valueSpan.querySelector(".inspector-unmatched");
     25  is(unsetColor.textContent, " red", "red is unmatched in color");
     26 
     27  await assertVariableTooltipForProperty(view, "div", "color", {
     28    header:
     29      // prettier-ignore
     30      '<span xmlns="http://www.w3.org/1999/xhtml" data-color="chartreuse" class="color-swatch-container">' +
     31        '<span class="inspector-swatch inspector-colorswatch" style="background-color:chartreuse">' +
     32        '</span>' +
     33        '<span class="ruleview-color">chartreuse</span>' +
     34      '</span>',
     35    // Computed value isn't displayed when it's the same as we put in the header
     36    computed: null,
     37  });
     38 
     39  await assertVariableTooltipForProperty(view, "div", "background-color", {
     40    index: 0,
     41    header: "--not-set is not set",
     42    headerClasses: [],
     43    isMatched: false,
     44  });
     45 
     46  await assertVariableTooltipForProperty(view, "div", "background-color", {
     47    index: 1,
     48    header:
     49      // prettier-ignore
     50      '<span xmlns="http://www.w3.org/1999/xhtml" data-color="seagreen" class="color-swatch-container">' +
     51        '<span class="inspector-swatch inspector-colorswatch" style="background-color:seagreen">' +
     52        '</span>' +
     53        '<span class="ruleview-color">seagreen</span>' +
     54      '</span>',
     55    // Computed value isn't displayed when it's the same as we put in the header
     56    computed: null,
     57  });
     58 
     59  await assertVariableTooltipForProperty(view, "div", "outline-color", {
     60    header:
     61      // prettier-ignore
     62      '<span xmlns="http://www.w3.org/1999/xhtml" data-color="chartreuse" class="color-swatch-container">' +
     63        '<span class="inspector-swatch inspector-colorswatch" style="background-color:chartreuse">' +
     64        '</span>' +
     65        '<span class="ruleview-color">' +
     66          'var(' +
     67            '<span data-variable="chartreuse" class="inspector-variable">--color</span>' +
     68          ')' +
     69        '</span>' +
     70      '</span>',
     71    computed:
     72      // prettier-ignore
     73      `<span xmlns="http://www.w3.org/1999/xhtml" data-color="chartreuse" class="color-swatch-container">` +
     74        `<span ` +
     75          `class="inspector-swatch inspector-colorswatch" ` +
     76          `style="background-color:chartreuse">` +
     77        `</span>` +
     78        `<span class="ruleview-color">chartreuse</span>` +
     79      `</span>`,
     80  });
     81 
     82  await assertVariableTooltipForProperty(view, "div", "border-color", {
     83    header:
     84      // prettier-ignore
     85      '<span xmlns="http://www.w3.org/1999/xhtml">' +
     86        'var(' +
     87          '<span data-variable="light-dark(var(--color), var(--bg))" class="inspector-variable" data-variable-computed="light-dark(chartreuse, seagreen)">' +
     88            '--theme-color' +
     89          '</span>' +
     90        ')' +
     91      '</span>',
     92    computed:
     93      // prettier-ignore
     94      `light-dark(` +
     95        `<span xmlns="http://www.w3.org/1999/xhtml" data-color="chartreuse" class="color-swatch-container">` +
     96          `<span ` +
     97            `class="inspector-swatch inspector-colorswatch" ` +
     98            `style="background-color:chartreuse" ` +
     99            `data-color-function="light-dark">` +
    100          `</span>` +
    101          `<span class="ruleview-color">chartreuse</span>` +
    102        `</span>, ` +
    103        `<span xmlns="http://www.w3.org/1999/xhtml" data-color="seagreen" class="color-swatch-container inspector-unmatched">` +
    104          `<span ` +
    105            `class="inspector-swatch inspector-colorswatch" ` +
    106            `style="background-color:seagreen" ` +
    107            `data-color-function="light-dark">` +
    108          `</span>` +
    109          `<span class="ruleview-color">seagreen</span>` +
    110        `</span>` +
    111      `)`,
    112  });
    113 
    114  await assertVariableTooltipForProperty(view, "div", "background", {
    115    header:
    116      // prettier-ignore
    117      '<span xmlns="http://www.w3.org/1999/xhtml">' +
    118        'var(' +
    119          '<span data-variable="" class="inspector-variable">' +
    120            '--empty' +
    121          '</span>' +
    122        ')' +
    123      '</span>',
    124    computed: "&lt;empty&gt;",
    125    computedClasses: ["empty-css-variable"],
    126  });
    127 
    128  await assertVariableTooltipForProperty(view, "*", "--nested-with-empty", {
    129    header: "&lt;empty&gt;",
    130    headerClasses: ["empty-css-variable"],
    131  });
    132 });