tor-browser

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

browser_compatibility_dynamic_js-attribute-change.js (3535B)

      1 /* Any copyright is dedicated to the Public Domain.
      2   http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 const {
      7  COMPATIBILITY_ISSUE_TYPE,
      8 } = require("resource://devtools/shared/constants.js");
      9 
     10 const {
     11  COMPATIBILITY_UPDATE_NODE_COMPLETE,
     12 } = require("resource://devtools/client/inspector/compatibility/actions/index.js");
     13 
     14 // Test the behavior rules are dynamically added
     15 
     16 const ISSUE_DEPRECATED = {
     17  type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
     18  property: "-moz-user-focus",
     19  url: "https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/-moz-user-focus",
     20  deprecated: true,
     21  experimental: false,
     22 };
     23 
     24 const ISSUE_NOT_DEPRECATED = {
     25  type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
     26  property: "overflow-anchor",
     27  url: "https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/overflow-anchor",
     28  deprecated: false,
     29  experimental: false,
     30 };
     31 
     32 const TEST_URI = `
     33  <style>
     34    .issue {
     35      -moz-user-focus: none;
     36    }
     37  </style>
     38  <body>
     39    <div class="test"></div>
     40  </body>
     41 `;
     42 
     43 add_task(async function () {
     44  info("Testing dynamic style change using JavaScript");
     45  const tab = await addTab(
     46    "data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)
     47  );
     48 
     49  const { allElementsPane, inspector, selectedElementPane } =
     50    await openCompatibilityView();
     51 
     52  info("Testing inline style change due to JavaScript execution");
     53  const onPanelUpdate = waitForUpdateSelectedNodeAction(inspector.store);
     54  info("Select the div to undergo mutation");
     55  await selectNode(".test", inspector);
     56  await onPanelUpdate;
     57 
     58  info("Check initial issues");
     59  await assertIssueList(selectedElementPane, []);
     60  await assertIssueList(allElementsPane, []);
     61 
     62  info("Adding inline style with compatibility issue");
     63  await testAttributeMutation(
     64    tab,
     65    inspector,
     66    selectedElementPane,
     67    allElementsPane,
     68    [ISSUE_NOT_DEPRECATED],
     69    [ISSUE_NOT_DEPRECATED],
     70    async function () {
     71      content.document.querySelector(".test").style["overflow-anchor"] = "auto";
     72    }
     73  );
     74 
     75  info("Adding a class with declarations having compatibility issue");
     76  await testAttributeMutation(
     77    tab,
     78    inspector,
     79    selectedElementPane,
     80    allElementsPane,
     81    [ISSUE_NOT_DEPRECATED, ISSUE_DEPRECATED],
     82    [ISSUE_NOT_DEPRECATED, ISSUE_DEPRECATED],
     83    async function () {
     84      content.document.querySelector(".test").classList.add("issue");
     85    }
     86  );
     87 
     88  info("Removing a class with declarations having compatibility issue");
     89  await testAttributeMutation(
     90    tab,
     91    inspector,
     92    selectedElementPane,
     93    allElementsPane,
     94    [ISSUE_NOT_DEPRECATED],
     95    [ISSUE_NOT_DEPRECATED],
     96    async function () {
     97      content.document.querySelector(".test").classList.remove("issue");
     98    }
     99  );
    100 
    101  await removeTab(tab);
    102 });
    103 
    104 async function testAttributeMutation(
    105  tab,
    106  inspector,
    107  selectedElementPane,
    108  allElementsPane,
    109  expectedSelectedElementIssues,
    110  expectedAllElementsIssues,
    111  contentTaskFunction
    112 ) {
    113  const onPanelUpdate = Promise.all([
    114    inspector.once("markupmutation"),
    115    waitForDispatch(inspector.store, COMPATIBILITY_UPDATE_NODE_COMPLETE),
    116  ]);
    117  info("Run the task in webpage context");
    118  await ContentTask.spawn(tab.linkedBrowser, {}, contentTaskFunction);
    119  info("Wait for changes to reflect");
    120  await onPanelUpdate;
    121 
    122  info("Check issues listed in selected element pane");
    123  await assertIssueList(selectedElementPane, expectedSelectedElementIssues);
    124  info("Check issues listed in all issues pane");
    125  await assertIssueList(allElementsPane, expectedAllElementsIssues);
    126 }