tor-browser

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

browser_styleinspector_output-parser.js (11084B)

      1 /* Any copyright is dedicated to the Public Domain.
      2 http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Test expected outputs of the output-parser's parseCssProperty function.
      7 
      8 // This is more of a unit test than a mochitest-browser test, but can't be
      9 // tested with an xpcshell test as the output-parser requires the DOM to work.
     10 
     11 const OutputParser = require("resource://devtools/client/shared/output-parser.js");
     12 
     13 const COLOR_CLASS = "color-class";
     14 const URL_CLASS = "url-class";
     15 const CUBIC_BEZIER_CLASS = "bezier-class";
     16 const ANGLE_CLASS = "angle-class";
     17 const LINEAR_EASING_CLASS = "linear-easing-class";
     18 const FLEX_CLASS = "flex-class";
     19 const GRID_CLASS = "grid-class";
     20 
     21 const TEST_DATA = [
     22  {
     23    name: "width",
     24    value: "100%",
     25    test: fragment => {
     26      is(countAll(fragment), 0);
     27      is(fragment.textContent, "100%");
     28    },
     29  },
     30  {
     31    name: "width",
     32    value: "blue",
     33    test: fragment => {
     34      is(countAll(fragment), 0);
     35    },
     36  },
     37  {
     38    name: "content",
     39    value: "'red url(test.png) repeat top left'",
     40    test: fragment => {
     41      is(countAll(fragment), 0);
     42    },
     43  },
     44  {
     45    name: "content",
     46    value: '"blue"',
     47    test: fragment => {
     48      is(countAll(fragment), 0);
     49    },
     50  },
     51  {
     52    name: "margin-left",
     53    value: "url(something.jpg)",
     54    test: fragment => {
     55      is(countAll(fragment), 0);
     56    },
     57  },
     58  {
     59    name: "background-color",
     60    value: "transparent",
     61    test: fragment => {
     62      is(countAll(fragment), 2);
     63      is(countColors(fragment), 1);
     64      is(fragment.textContent, "transparent");
     65    },
     66  },
     67  {
     68    name: "color",
     69    value: "red",
     70    test: fragment => {
     71      is(countColors(fragment), 1);
     72      is(fragment.textContent, "red");
     73    },
     74  },
     75  {
     76    name: "color",
     77    value: "#F06",
     78    test: fragment => {
     79      is(countColors(fragment), 1);
     80      is(fragment.textContent, "#F06");
     81    },
     82  },
     83  {
     84    name: "border",
     85    value: "80em dotted pink",
     86    test: fragment => {
     87      is(countAll(fragment), 2);
     88      is(countColors(fragment), 1);
     89      is(getColor(fragment), "pink");
     90    },
     91  },
     92  {
     93    name: "color",
     94    value: "red !important",
     95    test: fragment => {
     96      is(countColors(fragment), 1);
     97      is(fragment.textContent, "red !important");
     98    },
     99  },
    100  {
    101    name: "background",
    102    value: "red url(test.png) repeat top left",
    103    test: fragment => {
    104      is(countColors(fragment), 1);
    105      is(countUrls(fragment), 1);
    106      is(getColor(fragment), "red");
    107      is(getUrl(fragment), "test.png");
    108      is(countAll(fragment), 3);
    109    },
    110  },
    111  {
    112    name: "background",
    113    value: "blue url(test.png) repeat top left !important",
    114    test: fragment => {
    115      is(countColors(fragment), 1);
    116      is(countUrls(fragment), 1);
    117      is(getColor(fragment), "blue");
    118      is(getUrl(fragment), "test.png");
    119      is(countAll(fragment), 3);
    120    },
    121  },
    122  {
    123    name: "list-style-image",
    124    value: 'url("images/arrow.gif")',
    125    test: fragment => {
    126      is(countAll(fragment), 1);
    127      is(getUrl(fragment), "images/arrow.gif");
    128    },
    129  },
    130  {
    131    name: "list-style-image",
    132    value: 'url("images/arrow.gif")!important',
    133    test: fragment => {
    134      is(countAll(fragment), 1);
    135      is(getUrl(fragment), "images/arrow.gif");
    136      is(fragment.textContent, 'url("images/arrow.gif")!important');
    137    },
    138  },
    139  {
    140    name: "background",
    141    value:
    142      "linear-gradient(to right, rgba(183,222,237,1) 0%, " +
    143      "rgba(33,180,226,1) 30%, rgba(31,170,217,.5) 44%, " +
    144      "#F06 75%, red 100%)",
    145    test: fragment => {
    146      is(countAll(fragment), 10);
    147      const allSwatches = fragment.querySelectorAll("." + COLOR_CLASS);
    148      is(allSwatches.length, 5);
    149      is(allSwatches[0].textContent, "rgba(183,222,237,1)");
    150      is(allSwatches[1].textContent, "rgba(33,180,226,1)");
    151      is(allSwatches[2].textContent, "rgba(31,170,217,.5)");
    152      is(allSwatches[3].textContent, "#F06");
    153      is(allSwatches[4].textContent, "red");
    154    },
    155  },
    156  {
    157    name: "background",
    158    value:
    159      "radial-gradient(circle closest-side at center, orange 0%, red 100%)",
    160    test: fragment => {
    161      is(countAll(fragment), 4);
    162      const colorSwatches = fragment.querySelectorAll("." + COLOR_CLASS);
    163      is(colorSwatches.length, 2);
    164      is(colorSwatches[0].textContent, "orange");
    165      is(colorSwatches[1].textContent, "red");
    166    },
    167  },
    168  {
    169    name: "background",
    170    value: "white  url(http://test.com/wow_such_image.png) no-repeat top left",
    171    test: fragment => {
    172      is(countAll(fragment), 3);
    173      is(countUrls(fragment), 1);
    174      is(countColors(fragment), 1);
    175    },
    176  },
    177  {
    178    name: "background",
    179    value:
    180      'url("http://test.com/wow_such_(oh-noes)image.png?testid=1&color=red#w00t")',
    181    test: fragment => {
    182      is(countAll(fragment), 1);
    183      is(
    184        getUrl(fragment),
    185        "http://test.com/wow_such_(oh-noes)image.png?testid=1&color=red#w00t"
    186      );
    187    },
    188  },
    189  {
    190    name: "background-image",
    191    value: "url(this-is-an-incredible-image.jpeg)",
    192    test: fragment => {
    193      is(countAll(fragment), 1);
    194      is(getUrl(fragment), "this-is-an-incredible-image.jpeg");
    195    },
    196  },
    197  {
    198    name: "background",
    199    value:
    200      'red url(    "http://wow.com/cool/../../../you\'re(doingit)wrong"   ) repeat center',
    201    test: fragment => {
    202      is(countAll(fragment), 3);
    203      is(countColors(fragment), 1);
    204      is(getUrl(fragment), "http://wow.com/cool/../../../you're(doingit)wrong");
    205    },
    206  },
    207  {
    208    name: "background-image",
    209    value:
    210      "url(../../../look/at/this/folder/structure/../" +
    211      "../red.blue.green.svg   )",
    212    test: fragment => {
    213      is(countAll(fragment), 1);
    214      is(
    215        getUrl(fragment),
    216        "../../../look/at/this/folder/structure/../" + "../red.blue.green.svg"
    217      );
    218    },
    219  },
    220  {
    221    name: "transition-timing-function",
    222    value: "linear",
    223    test: fragment => {
    224      is(countCubicBeziers(fragment), 1);
    225      is(getCubicBezier(fragment), "linear");
    226    },
    227  },
    228  {
    229    name: "animation-timing-function",
    230    value: "ease-in-out",
    231    test: fragment => {
    232      is(countCubicBeziers(fragment), 1);
    233      is(getCubicBezier(fragment), "ease-in-out");
    234    },
    235  },
    236  {
    237    name: "animation-timing-function",
    238    value: "cubic-bezier(.1, 0.55, .9, -3.45)",
    239    test: fragment => {
    240      is(countCubicBeziers(fragment), 1);
    241      is(getCubicBezier(fragment), "cubic-bezier(.1, 0.55, .9, -3.45)");
    242    },
    243  },
    244  {
    245    name: "animation-timing-function",
    246    value: "CUBIC-BEZIER(.1, 0.55, .9, -3.45)",
    247    test: fragment => {
    248      is(countCubicBeziers(fragment), 1);
    249      is(getCubicBezier(fragment), "CUBIC-BEZIER(.1, 0.55, .9, -3.45)");
    250    },
    251  },
    252  {
    253    name: "animation",
    254    value: "move 3s cubic-bezier(.1, 0.55, .9, -3.45)",
    255    test: fragment => {
    256      is(countCubicBeziers(fragment), 1);
    257      is(getCubicBezier(fragment), "cubic-bezier(.1, 0.55, .9, -3.45)");
    258    },
    259  },
    260  {
    261    name: "transition",
    262    value: "top 1s ease-in",
    263    test: fragment => {
    264      is(countCubicBeziers(fragment), 1);
    265      is(getCubicBezier(fragment), "ease-in");
    266    },
    267  },
    268  {
    269    name: "animation-timing-function",
    270    value: "linear(0, 1 50% 100%)",
    271    test: fragment => {
    272      is(countLinears(fragment), 1);
    273      is(getLinear(fragment), "linear(0, 1 50% 100%)");
    274    },
    275  },
    276  {
    277    name: "animation-timing-function",
    278    value: "LINEAR(0, 1 50% 100%)",
    279    test: fragment => {
    280      is(countLinears(fragment), 1);
    281      is(getLinear(fragment), "LINEAR(0, 1 50% 100%)");
    282    },
    283  },
    284  {
    285    name: "transition",
    286    value: "top 3s steps(4, end)",
    287    test: fragment => {
    288      is(countAll(fragment), 0);
    289    },
    290  },
    291  {
    292    name: "transition",
    293    value: "top 3s step-start",
    294    test: fragment => {
    295      is(countAll(fragment), 0);
    296    },
    297  },
    298  {
    299    name: "transition",
    300    value: "top 3s step-end",
    301    test: fragment => {
    302      is(countAll(fragment), 0);
    303    },
    304  },
    305  {
    306    name: "background",
    307    value: "rgb(255, var(--g-value), 192)",
    308    test: fragment => {
    309      is(fragment.textContent, "rgb(255, var(--g-value), 192)");
    310    },
    311  },
    312  {
    313    name: "background",
    314    value: "rgb(255, var(--g-value, 0), 192)",
    315    test: fragment => {
    316      is(fragment.textContent, "rgb(255, var(--g-value, 0), 192)");
    317    },
    318  },
    319  {
    320    name: "--url",
    321    value: "url(())",
    322    test: fragment => {
    323      is(countAll(fragment), 0);
    324      is(fragment.textContent, "url(())");
    325    },
    326  },
    327  {
    328    name: "display",
    329    value: "flex",
    330    test: fragment => {
    331      is(countFlex(fragment), 1, "Got expected flex toggle button");
    332    },
    333  },
    334  {
    335    name: "display",
    336    value: "grid",
    337    test: fragment => {
    338      is(countGrid(fragment), 1, "Got expected grid toggle button");
    339    },
    340  },
    341  {
    342    name: "display",
    343    value: "flex",
    344    parserOptions: { flexClass: null },
    345    test: fragment => {
    346      is(
    347        countFlex(fragment),
    348        0,
    349        "No flex toggle button is created when flexClass is null"
    350      );
    351    },
    352  },
    353  {
    354    name: "display",
    355    value: "grid",
    356    parserOptions: { gridClass: null },
    357    test: fragment => {
    358      is(
    359        countGrid(fragment),
    360        0,
    361        "No grid toggle button is created when gridClass is null"
    362      );
    363    },
    364  },
    365 ];
    366 
    367 add_task(async function () {
    368  const cssProperties = getClientCssProperties();
    369  const parser = new OutputParser(document, cssProperties);
    370  for (let i = 0; i < TEST_DATA.length; i++) {
    371    const data = TEST_DATA[i];
    372    info(
    373      "Output-parser test data " +
    374        i +
    375        ". {" +
    376        data.name +
    377        " : " +
    378        data.value +
    379        ";}"
    380    );
    381    data.test(
    382      parser.parseCssProperty(data.name, data.value, {
    383        colorClass: COLOR_CLASS,
    384        urlClass: URL_CLASS,
    385        bezierClass: CUBIC_BEZIER_CLASS,
    386        angleClass: ANGLE_CLASS,
    387        linearEasingClass: LINEAR_EASING_CLASS,
    388        flexClass: FLEX_CLASS,
    389        gridClass: GRID_CLASS,
    390        ...(data.parserOptions || {}),
    391      })
    392    );
    393  }
    394 });
    395 
    396 function countAll(fragment) {
    397  return fragment.querySelectorAll("*").length;
    398 }
    399 function countColors(fragment) {
    400  return fragment.querySelectorAll("." + COLOR_CLASS).length;
    401 }
    402 function countUrls(fragment) {
    403  return fragment.querySelectorAll("." + URL_CLASS).length;
    404 }
    405 function countCubicBeziers(fragment) {
    406  return fragment.querySelectorAll("." + CUBIC_BEZIER_CLASS).length;
    407 }
    408 function countLinears(fragment) {
    409  return fragment.querySelectorAll("." + LINEAR_EASING_CLASS).length;
    410 }
    411 function countFlex(fragment) {
    412  return fragment.querySelectorAll("." + FLEX_CLASS).length;
    413 }
    414 function countGrid(fragment) {
    415  return fragment.querySelectorAll("." + GRID_CLASS).length;
    416 }
    417 function getColor(fragment, index) {
    418  return fragment.querySelectorAll("." + COLOR_CLASS)[index || 0].textContent;
    419 }
    420 function getUrl(fragment, index) {
    421  return fragment.querySelectorAll("." + URL_CLASS)[index || 0].textContent;
    422 }
    423 function getCubicBezier(fragment, index) {
    424  return fragment.querySelectorAll("." + CUBIC_BEZIER_CLASS)[index || 0]
    425    .textContent;
    426 }
    427 function getLinear(fragment, index = 0) {
    428  return fragment.querySelectorAll("." + LINEAR_EASING_CLASS)[index]
    429    .textContent;
    430 }