tor-browser

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

browser_rules_variables_02.js (8534B)

      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_2.html";
      9 
     10 add_task(async function () {
     11  await addTab(TEST_URI);
     12  const { inspector, view } = await openRuleView();
     13 
     14  await testBasic(inspector, view);
     15  await testNestedCssFunctions(inspector, view);
     16  await testBorderShorthandAndInheritance(inspector, view);
     17  await testSingleLevelVariable(inspector, view);
     18  await testDoubleLevelVariable(inspector, view);
     19  await testTripleLevelVariable(inspector, view);
     20 });
     21 
     22 async function testBasic(inspector, view) {
     23  info(
     24    "Test support for basic variable functionality for var() with 2 variables." +
     25      "Format: var(--var1, var(--var2))"
     26  );
     27 
     28  await selectNode("#a", inspector);
     29  const unsetVar = getRuleViewProperty(
     30    view,
     31    "#a",
     32    "font-size"
     33  ).valueSpan.querySelector(".inspector-unmatched");
     34  const setVarParent = unsetVar.nextElementSibling;
     35  const setVar = getVarFromParent(setVarParent);
     36  is(
     37    unsetVar.textContent,
     38    "--var-not-defined",
     39    "--var-not-defined is not set correctly"
     40  );
     41  is(
     42    unsetVar.dataset.variable,
     43    "--var-not-defined is not set",
     44    "--var-not-defined's dataset.variable is not set correctly"
     45  );
     46  is(
     47    setVarParent.textContent,
     48    " var(--var-defined-font-size)",
     49    "var(--var-defined-font-size) parsed incorrectly"
     50  );
     51  is(
     52    setVar.textContent,
     53    "--var-defined-font-size",
     54    "--var-defined-font-size is not set correctly"
     55  );
     56  is(
     57    setVar.dataset.variable,
     58    "60px",
     59    "--bg's dataset.variable is not set correctly"
     60  );
     61 }
     62 
     63 async function testNestedCssFunctions(inspector, view) {
     64  info(
     65    "Test support for variable functionality for a var() nested inside " +
     66      "another CSS function. Format: rgb(0, 0, var(--var1, var(--var2)))"
     67  );
     68 
     69  await selectNode("#b", inspector);
     70  const unsetVarParent = getRuleViewProperty(
     71    view,
     72    "#b",
     73    "color"
     74  ).valueSpan.querySelector(".inspector-unmatched");
     75  const unsetVar = getVarFromParent(unsetVarParent);
     76  const setVar = unsetVarParent.previousElementSibling;
     77  is(
     78    unsetVarParent.textContent,
     79    " var(--var-defined-r-2)",
     80    "var(--var-defined-r-2) not parsed correctly"
     81  );
     82  is(
     83    unsetVar.textContent,
     84    "--var-defined-r-2",
     85    "--var-defined-r-2 is not set correctly"
     86  );
     87  is(
     88    unsetVar.dataset.variable,
     89    "0",
     90    "--var-defined-r-2's dataset.variable is not set correctly"
     91  );
     92  is(
     93    setVar.textContent,
     94    "--var-defined-r-1",
     95    "--var-defined-r-1 is not set correctly"
     96  );
     97  is(
     98    setVar.dataset.variable,
     99    "255",
    100    "--var-defined-r-1's dataset.variable is not set correctly"
    101  );
    102 }
    103 
    104 async function testBorderShorthandAndInheritance(inspector, view) {
    105  info(
    106    "Test support for variable functionality for shorthands/CSS styles with spaces " +
    107      'like "margin: w x y z". Also tests functionality for inherticance of CSS' +
    108      " variables. Format: var(l, var(m)) var(x) rgb(var(r) var(g) var(b))"
    109  );
    110 
    111  await selectNode("#c", inspector);
    112  const unsetVarL = getRuleViewProperty(
    113    view,
    114    "#c",
    115    "border"
    116  ).valueSpan.querySelector(".inspector-unmatched");
    117  const setVarMParent = unsetVarL.nextElementSibling;
    118 
    119  // var(x) is the next sibling of the parent of M
    120  const setVarXParent = setVarMParent.parentNode.nextElementSibling;
    121 
    122  // var(x) next sibling is the element that wraps the color
    123  const colorParent =
    124    setVarXParent.nextElementSibling.querySelector(".ruleview-color");
    125  // var(r) is the first childElement of the ruleview-color element
    126  const setVarRParent = colorParent.firstElementChild;
    127  // var(g) is the next sibling of var(r),
    128  const setVarGParent = setVarRParent.nextElementSibling;
    129  // and var(b) is the next sibling of var(g),
    130  const setVarBParent = setVarGParent.nextElementSibling;
    131 
    132  const setVarM = getVarFromParent(setVarMParent);
    133  const setVarX = setVarXParent.firstElementChild;
    134  const setVarR = setVarRParent.firstElementChild;
    135  const setVarG = setVarGParent.firstElementChild;
    136  const setVarB = setVarBParent.firstElementChild;
    137 
    138  is(
    139    unsetVarL.textContent,
    140    "--var-undefined",
    141    "--var-undefined is not set correctly"
    142  );
    143  is(
    144    unsetVarL.dataset.variable,
    145    "--var-undefined is not set",
    146    "--var-undefined's dataset.variable is not set correctly"
    147  );
    148 
    149  is(
    150    setVarM.textContent,
    151    "--var-border-px",
    152    "--var-border-px is not set correctly"
    153  );
    154  is(
    155    setVarM.dataset.variable,
    156    "10px",
    157    "--var-border-px's dataset.variable is not set correctly"
    158  );
    159 
    160  is(
    161    setVarX.textContent,
    162    "--var-border-style",
    163    "--var-border-style is not set correctly"
    164  );
    165  is(
    166    setVarX.dataset.variable,
    167    "solid",
    168    "var-border-style's dataset.variable is not set correctly"
    169  );
    170 
    171  is(
    172    setVarR.textContent,
    173    "--var-border-r",
    174    "--var-defined-r is not set correctly"
    175  );
    176  is(
    177    setVarR.dataset.variable,
    178    "255",
    179    "--var-defined-r's dataset.variable is not set correctly"
    180  );
    181 
    182  is(
    183    setVarG.textContent,
    184    "--var-border-g",
    185    "--var-defined-g is not set correctly"
    186  );
    187  is(
    188    setVarG.dataset.variable,
    189    "0",
    190    "--var-defined-g's dataset.variable is not set correctly"
    191  );
    192 
    193  is(
    194    setVarB.textContent,
    195    "--var-border-b",
    196    "--var-defined-b is not set correctly"
    197  );
    198  is(
    199    setVarB.dataset.variable,
    200    "0",
    201    "--var-defined-b's dataset.variable is not set correctly"
    202  );
    203 }
    204 
    205 async function testSingleLevelVariable(inspector, view) {
    206  info(
    207    "Test support for variable functionality of a single level of " +
    208      "undefined variables. Format: var(x, constant)"
    209  );
    210 
    211  await selectNode("#d", inspector);
    212  const unsetVar = getRuleViewProperty(
    213    view,
    214    "#d",
    215    "font-size"
    216  ).valueSpan.querySelector(".inspector-unmatched");
    217 
    218  is(
    219    unsetVar.textContent,
    220    "--var-undefined",
    221    "--var-undefined is not set correctly"
    222  );
    223  is(
    224    unsetVar.dataset.variable,
    225    "--var-undefined is not set",
    226    "--var-undefined's dataset.variable is not set correctly"
    227  );
    228 }
    229 
    230 async function testDoubleLevelVariable(inspector, view) {
    231  info(
    232    "Test support for variable functionality of double level of " +
    233      "undefined variables. Format: var(x, var(y, constant))"
    234  );
    235 
    236  await selectNode("#e", inspector);
    237  const allUnsetVars = getRuleViewProperty(
    238    view,
    239    "#e",
    240    "color"
    241  ).valueSpan.querySelectorAll(".inspector-unmatched");
    242 
    243  is(allUnsetVars.length, 2, "The number of unset variables is mismatched.");
    244 
    245  const unsetVar1 = allUnsetVars[0];
    246  const unsetVar2 = allUnsetVars[1];
    247 
    248  is(
    249    unsetVar1.textContent,
    250    "--var-undefined",
    251    "--var-undefined is not set correctly"
    252  );
    253  is(
    254    unsetVar1.dataset.variable,
    255    "--var-undefined is not set",
    256    "--var-undefined's dataset.variable is not set correctly"
    257  );
    258 
    259  is(
    260    unsetVar2.textContent,
    261    "--var-undefined-2",
    262    "--var-undefined is not set correctly"
    263  );
    264  is(
    265    unsetVar2.dataset.variable,
    266    "--var-undefined-2 is not set",
    267    "--var-undefined-2's dataset.variable is not set correctly"
    268  );
    269 }
    270 
    271 async function testTripleLevelVariable(inspector, view) {
    272  info(
    273    "Test support for variable functionality of triple level of " +
    274      "undefined variables. Format: var(x, var(y, var(z, constant)))"
    275  );
    276 
    277  await selectNode("#f", inspector);
    278  const allUnsetVars = getRuleViewProperty(
    279    view,
    280    "#f",
    281    "border-style"
    282  ).valueSpan.querySelectorAll(".inspector-unmatched");
    283 
    284  is(allUnsetVars.length, 3, "The number of unset variables is mismatched.");
    285 
    286  const unsetVar1 = allUnsetVars[0];
    287  const unsetVar2 = allUnsetVars[1];
    288  const unsetVar3 = allUnsetVars[2];
    289 
    290  is(
    291    unsetVar1.textContent,
    292    "--var-undefined",
    293    "--var-undefined is not set correctly"
    294  );
    295  is(
    296    unsetVar1.dataset.variable,
    297    "--var-undefined is not set",
    298    "--var-undefined's dataset.variable is not set correctly"
    299  );
    300 
    301  is(
    302    unsetVar2.textContent,
    303    "--var-undefined-2",
    304    "--var-undefined-2 is not set correctly"
    305  );
    306  is(
    307    unsetVar2.dataset.variable,
    308    "--var-undefined-2 is not set",
    309    "--var-defined-r-2's dataset.variable is not set correctly"
    310  );
    311 
    312  is(
    313    unsetVar3.textContent,
    314    "--var-undefined-3",
    315    "--var-undefined-3 is not set correctly"
    316  );
    317  is(
    318    unsetVar3.dataset.variable,
    319    "--var-undefined-3 is not set",
    320    "--var-defined-r-3's dataset.variable is not set correctly"
    321  );
    322 }
    323 
    324 function getVarFromParent(varParent) {
    325  return varParent.firstElementChild.firstElementChild;
    326 }