tor-browser

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

browser_rules_css-compatibility-toggle-rules.js (3627B)

      1 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
      2 /* Any copyright is dedicated to the Public Domain.
      3 http://creativecommons.org/publicdomain/zero/1.0/ */
      4 
      5 "use strict";
      6 
      7 // Test - Toggling rules linked to the element and the class
      8 // Checking whether the compatibility warning icon is displayed
      9 // correctly.
     10 // If a rule is disabled, it is marked compatible to keep
     11 // consistency with compatibility panel.
     12 // We test both the compatible and incompatible rules here
     13 
     14 const TEST_URI = `
     15 <style>
     16  div {
     17    color: green;
     18    background-color: black;
     19    -moz-float-edge: content-box;
     20  }
     21 </style>
     22 <div class="test-inline" style="color:pink; user-select:none;"></div>
     23 <div class="test-class-linked"></div>`;
     24 
     25 const TEST_DATA_INITIAL = [
     26  {
     27    selector: ".test-class-linked",
     28    rules: [
     29      {},
     30      {
     31        color: { value: "green" },
     32        "background-color": { value: "black" },
     33        "-moz-float-edge": {
     34          value: "content-box",
     35          expected: COMPATIBILITY_TOOLTIP_MESSAGE.deprecated,
     36        },
     37      },
     38    ],
     39  },
     40  {
     41    selector: ".test-inline",
     42    rules: [
     43      {
     44        color: { value: "pink" },
     45        "user-select": {
     46          value: "none",
     47          expected: COMPATIBILITY_TOOLTIP_MESSAGE.default,
     48        },
     49      },
     50      {
     51        color: { value: "green" },
     52        "background-color": { value: "black" },
     53        "-moz-float-edge": {
     54          value: "content-box",
     55          expected: COMPATIBILITY_TOOLTIP_MESSAGE.deprecated,
     56        },
     57      },
     58    ],
     59  },
     60 ];
     61 
     62 const TEST_DATA_TOGGLE_CLASS_DECLARATION = [
     63  {
     64    selector: ".test-class-linked",
     65    rules: [
     66      {},
     67      {
     68        color: { value: "green" },
     69        "background-color": { value: "black" },
     70        "-moz-float-edge": { value: "content-box" },
     71      },
     72    ],
     73  },
     74  {
     75    selector: ".test-inline",
     76    rules: [
     77      {
     78        color: { value: "pink" },
     79        "user-select": {
     80          value: "none",
     81          expected: COMPATIBILITY_TOOLTIP_MESSAGE.default,
     82        },
     83      },
     84      {
     85        color: { value: "green" },
     86        "background-color": { value: "black" },
     87        "-moz-float-edge": { value: "content-box" },
     88      },
     89    ],
     90  },
     91 ];
     92 
     93 const TEST_DATA_TOGGLE_INLINE = [
     94  {
     95    selector: ".test-class-linked",
     96    rules: [
     97      {},
     98      {
     99        color: { value: "green" },
    100        "background-color": { value: "black" },
    101        "-moz-float-edge": { value: "content-box" },
    102      },
    103    ],
    104  },
    105  {
    106    selector: ".test-inline",
    107    rules: [
    108      {
    109        color: { value: "pink" },
    110        "user-select": { value: "none" },
    111      },
    112      {
    113        color: { value: "green" },
    114        "background-color": { value: "black" },
    115        "-moz-float-edge": { value: "content-box" },
    116      },
    117    ],
    118  },
    119 ];
    120 
    121 add_task(async function () {
    122  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
    123  const { inspector, view } = await openRuleView();
    124 
    125  const mozFloatEdge = { "-moz-float-edge": "content-box" };
    126  const userSelect = { "user-select": "none" };
    127 
    128  await runCSSCompatibilityTests(view, inspector, TEST_DATA_INITIAL);
    129 
    130  info(
    131    'Disable -moz-float-edge: "content-box" which is not cross browser compatible declaration'
    132  );
    133  await toggleDeclaration(view, 1, mozFloatEdge);
    134  await runCSSCompatibilityTests(
    135    view,
    136    inspector,
    137    TEST_DATA_TOGGLE_CLASS_DECLARATION
    138  );
    139 
    140  info(
    141    'Toggle inline declaration "user-select": "none" and check the compatibility status'
    142  );
    143  await selectNode(".test-inline", inspector);
    144  await toggleDeclaration(view, 0, userSelect);
    145  await runCSSCompatibilityTests(view, inspector, TEST_DATA_TOGGLE_INLINE);
    146 });