tor-browser

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

browser_compatibility_event_rule-change.js (4763B)

      1 /* Any copyright is dedicated to the Public Domain.
      2   http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Test whether the content of the issue list will be changed when the rules are changed
      7 // on the rule view.
      8 
      9 const TEST_URI = `
     10  <style>
     11  .test-class {
     12    overflow-anchor: auto;
     13  }
     14  div {
     15    user-select: auto;
     16  }
     17  </style>
     18  <div class="test-class">test class</div>
     19  <div>test</div>
     20 `;
     21 
     22 const TEST_DATA_SELECTED = {
     23  fullRule: {
     24    expectedProperties: [
     25      {
     26        property: "overflow-anchor",
     27        url: "https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/overflow-anchor",
     28      },
     29      {
     30        property: "user-select",
     31        url: "https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/user-select",
     32      },
     33    ],
     34    expectedNodes: [
     35      {
     36        property: "overflow-anchor",
     37        nodes: [],
     38      },
     39      {
     40        property: "user-select",
     41        nodes: [],
     42      },
     43    ],
     44  },
     45  classRule: {
     46    expectedProperties: [
     47      {
     48        property: "overflow-anchor",
     49        url: "https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/overflow-anchor",
     50      },
     51    ],
     52    expectedNodes: [
     53      {
     54        property: "overflow-anchor",
     55        nodes: [],
     56      },
     57    ],
     58  },
     59  elementRule: {
     60    expectedProperties: [
     61      {
     62        property: "user-select",
     63        url: "https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/user-select",
     64      },
     65    ],
     66    expectedNodes: [
     67      {
     68        property: "user-select",
     69        nodes: [],
     70      },
     71    ],
     72  },
     73 };
     74 
     75 const TEST_DATA_ALL = {
     76  fullRule: {
     77    expectedProperties: [
     78      {
     79        property: "overflow-anchor",
     80        url: "https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/overflow-anchor",
     81      },
     82      {
     83        property: "user-select",
     84        url: "https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/user-select",
     85      },
     86    ],
     87    expectedNodes: [
     88      {
     89        property: "overflow-anchor",
     90        nodes: ["div.test-class"],
     91      },
     92      {
     93        property: "user-select",
     94        nodes: ["div.test-class", "div"],
     95      },
     96    ],
     97  },
     98  classRule: {
     99    expectedProperties: [
    100      {
    101        property: "overflow-anchor",
    102        url: "https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/overflow-anchor",
    103      },
    104    ],
    105    expectedNodes: [
    106      {
    107        property: "overflow-anchor",
    108        nodes: ["div.test-class"],
    109      },
    110    ],
    111  },
    112  elementRule: {
    113    expectedProperties: [
    114      {
    115        property: "user-select",
    116        url: "https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/user-select",
    117      },
    118    ],
    119    expectedNodes: [
    120      {
    121        property: "user-select",
    122        nodes: ["div.test-class", "div"],
    123      },
    124    ],
    125  },
    126 };
    127 
    128 const {
    129  COMPATIBILITY_UPDATE_NODES_COMPLETE,
    130 } = require("resource://devtools/client/inspector/compatibility/actions/index.js");
    131 
    132 add_task(async function () {
    133  info("Enable 3 pane mode");
    134  await pushPref("devtools.inspector.three-pane-enabled", true);
    135 
    136  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
    137 
    138  const { allElementsPane, inspector, selectedElementPane } =
    139    await openCompatibilityView();
    140  await selectNode(".test-class", inspector);
    141 
    142  info("Check the initial issue");
    143  await assertAll(selectedElementPane, TEST_DATA_SELECTED.fullRule);
    144  await assertAll(allElementsPane, TEST_DATA_ALL.fullRule);
    145 
    146  info("Check the issue after unchecking class rule");
    147  await _togglePropStatus(inspector, 1, 0);
    148  await assertAll(selectedElementPane, TEST_DATA_SELECTED.elementRule);
    149  await assertAll(allElementsPane, TEST_DATA_ALL.elementRule);
    150 
    151  info("Check the issue after unchecking div rule");
    152  await _togglePropStatus(inspector, 2, 0);
    153  await assertIssueList(selectedElementPane, []);
    154  await assertIssueList(allElementsPane, []);
    155 
    156  info("Check the issue after reverting class rule");
    157  await _togglePropStatus(inspector, 1, 0);
    158  await assertAll(selectedElementPane, TEST_DATA_SELECTED.classRule);
    159  await assertAll(allElementsPane, TEST_DATA_ALL.classRule);
    160 
    161  info("Check the issue after reverting div rule");
    162  await _togglePropStatus(inspector, 2, 0);
    163  await assertAll(selectedElementPane, TEST_DATA_SELECTED.fullRule);
    164  await assertAll(allElementsPane, TEST_DATA_ALL.fullRule);
    165 });
    166 
    167 async function assertAll(pane, { expectedProperties, expectedNodes }) {
    168  await assertIssueList(pane, expectedProperties);
    169  await assertNodeList(pane, expectedNodes);
    170 }
    171 
    172 async function _togglePropStatus(inspector, ruleIndex, propIndex) {
    173  const onNodesUpdated = waitForDispatch(
    174    inspector.store,
    175    COMPATIBILITY_UPDATE_NODES_COMPLETE
    176  );
    177  await togglePropStatusOnRuleView(inspector, ruleIndex, propIndex);
    178  await onNodesUpdated;
    179 }