tor-browser

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

browser_compatibility_dynamic_js-dom-change.js (3988B)

      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_APPEND_NODE_COMPLETE,
     12  COMPATIBILITY_CLEAR_DESTROYED_NODES,
     13 } = require("resource://devtools/client/inspector/compatibility/actions/index.js");
     14 
     15 // Test the behavior rules are dynamically added
     16 
     17 const ISSUE_DEPRECATED = {
     18  type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
     19  property: "-moz-user-focus",
     20  url: "https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/-moz-user-focus",
     21  deprecated: true,
     22  experimental: false,
     23 };
     24 
     25 const ISSUE_NOT_DEPRECATED = {
     26  type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
     27  property: "overflow-anchor",
     28  url: "https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/overflow-anchor",
     29  deprecated: false,
     30  experimental: false,
     31 };
     32 
     33 const TEST_URI = `
     34  <style>
     35    .child {
     36      -moz-user-focus: none;
     37    }
     38  </style>
     39  <body></body>
     40 `;
     41 
     42 add_task(async function () {
     43  info("Testing dynamic DOM mutation using JavaScript");
     44  const tab = await addTab(
     45    "data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)
     46  );
     47 
     48  const { allElementsPane, inspector, selectedElementPane } =
     49    await openCompatibilityView();
     50 
     51  info("Check initial issues");
     52  await assertIssueList(selectedElementPane, []);
     53  await assertIssueList(allElementsPane, []);
     54 
     55  info("Append nodes dynamically using JavaScript");
     56  await testNodeMutation(
     57    ".child",
     58    COMPATIBILITY_APPEND_NODE_COMPLETE,
     59    tab,
     60    inspector,
     61    selectedElementPane,
     62    allElementsPane,
     63    [ISSUE_DEPRECATED],
     64    [ISSUE_NOT_DEPRECATED, ISSUE_DEPRECATED],
     65    async function () {
     66      const doc = content.document;
     67      const parent = doc.querySelector("body");
     68 
     69      const newElementWithIssue = doc.createElement("div");
     70      newElementWithIssue.style["overflow-anchor"] = "auto";
     71 
     72      const parentOfIssueElement = doc.createElement("div");
     73      parentOfIssueElement.classList.add("parent");
     74      const child = doc.createElement("div");
     75      child.classList.add("child");
     76      parentOfIssueElement.appendChild(child);
     77 
     78      parent.appendChild(newElementWithIssue);
     79      parent.appendChild(parentOfIssueElement);
     80    }
     81  );
     82 
     83  info("Remove node whose child has compatibility issue");
     84  await testNodeMutation(
     85    "div",
     86    COMPATIBILITY_CLEAR_DESTROYED_NODES,
     87    tab,
     88    inspector,
     89    selectedElementPane,
     90    allElementsPane,
     91    [ISSUE_NOT_DEPRECATED],
     92    [ISSUE_NOT_DEPRECATED],
     93    async function () {
     94      const doc = content.document;
     95      const parent = doc.querySelector(".parent");
     96      parent.remove();
     97    }
     98  );
     99 
    100  info("Remove node which has compatibility issue");
    101  await testNodeMutation(
    102    "body",
    103    COMPATIBILITY_CLEAR_DESTROYED_NODES,
    104    tab,
    105    inspector,
    106    selectedElementPane,
    107    allElementsPane,
    108    [],
    109    [],
    110    async function () {
    111      const doc = content.document;
    112      const issueElement = doc.querySelector("div");
    113      issueElement.remove();
    114    }
    115  );
    116 
    117  await removeTab(tab);
    118 });
    119 
    120 async function testNodeMutation(
    121  selector,
    122  action,
    123  tab,
    124  inspector,
    125  selectedElementPane,
    126  allElementsPane,
    127  expectedSelectedElementIssues,
    128  expectedAllElementsIssues,
    129  contentTaskFunction
    130 ) {
    131  let onPanelUpdate = Promise.all([
    132    inspector.once("markupmutation"),
    133    waitForDispatch(inspector.store, action),
    134  ]);
    135  info("Add a new node with issue and another node whose child has the issue");
    136  await ContentTask.spawn(tab.linkedBrowser, {}, contentTaskFunction);
    137  info("Wait for changes");
    138  await onPanelUpdate;
    139 
    140  onPanelUpdate = waitForUpdateSelectedNodeAction(inspector.store);
    141  await selectNode(selector, inspector);
    142  await onPanelUpdate;
    143 
    144  info("Check element issues");
    145  await assertIssueList(selectedElementPane, expectedSelectedElementIssues);
    146 
    147  info("Check all issues");
    148  await assertIssueList(allElementsPane, expectedAllElementsIssues);
    149 }