tor-browser

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

browser_styleinspector_transform-highlighter-03.js (3731B)

      1 /* Any copyright is dedicated to the Public Domain.
      2 http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Test that the css transform highlighter is shown when hovering over transform
      7 // properties
      8 
      9 // Note that in this test, we mock the highlighter front, merely testing the
     10 // behavior of the style-inspector UI for now
     11 
     12 const TEST_URI = `
     13  <style type="text/css">
     14    html {
     15      transform: scale(.9);
     16    }
     17    body {
     18      transform: skew(16deg);
     19      color: purple;
     20    }
     21  </style>
     22  Test the css transform highlighter
     23 `;
     24 
     25 const { TYPES } = ChromeUtils.importESModule(
     26  "resource://devtools/shared/highlighters.mjs"
     27 );
     28 const TYPE = TYPES.TRANSFORM;
     29 
     30 add_task(async function () {
     31  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
     32  const { inspector, view } = await openRuleView();
     33 
     34  // Mock the highlighter front to get the reference of the NodeFront
     35  const HighlighterFront = {
     36    isShown: false,
     37    nodeFront: null,
     38    nbOfTimesShown: 0,
     39    show(nodeFront) {
     40      this.nodeFront = nodeFront;
     41      this.isShown = true;
     42      this.nbOfTimesShown++;
     43      return Promise.resolve(true);
     44    },
     45    hide() {
     46      this.nodeFront = null;
     47      this.isShown = false;
     48      return Promise.resolve();
     49    },
     50    finalize() {},
     51  };
     52 
     53  // Inject the mock highlighter in the rule-view
     54  const hs = view.highlighters;
     55  hs.highlighters[TYPE] = HighlighterFront;
     56 
     57  let { valueSpan } = getRuleViewProperty(view, "body", "transform");
     58 
     59  info("Checking that the HighlighterFront's show/hide methods are called");
     60  let onHighlighterShown = hs.once("css-transform-highlighter-shown");
     61  hs.onMouseMove({ target: valueSpan });
     62  await onHighlighterShown;
     63  ok(HighlighterFront.isShown, "The highlighter is shown");
     64  let onHighlighterHidden = hs.once("css-transform-highlighter-hidden");
     65  hs.onMouseOut();
     66  await onHighlighterHidden;
     67  ok(!HighlighterFront.isShown, "The highlighter is hidden");
     68 
     69  info(
     70    "Checking that hovering several times over the same property doesn't" +
     71      " show the highlighter several times"
     72  );
     73  const nb = HighlighterFront.nbOfTimesShown;
     74  onHighlighterShown = hs.once("css-transform-highlighter-shown");
     75  hs.onMouseMove({ target: valueSpan });
     76  await onHighlighterShown;
     77  is(HighlighterFront.nbOfTimesShown, nb + 1, "The highlighter was shown once");
     78  hs.onMouseMove({ target: valueSpan });
     79  hs.onMouseMove({ target: valueSpan });
     80  is(
     81    HighlighterFront.nbOfTimesShown,
     82    nb + 1,
     83    "The highlighter was shown once, after several mousemove"
     84  );
     85 
     86  info("Checking that the right NodeFront reference is passed");
     87  await selectNode("html", inspector);
     88  ({ valueSpan } = getRuleViewProperty(view, "html", "transform"));
     89  onHighlighterShown = hs.once("css-transform-highlighter-shown");
     90  hs.onMouseMove({ target: valueSpan });
     91  await onHighlighterShown;
     92  is(
     93    HighlighterFront.nodeFront.tagName,
     94    "HTML",
     95    "The right NodeFront is passed to the highlighter (1)"
     96  );
     97 
     98  await selectNode("body", inspector);
     99  ({ valueSpan } = getRuleViewProperty(view, "body", "transform"));
    100  onHighlighterShown = hs.once("css-transform-highlighter-shown");
    101  hs.onMouseMove({ target: valueSpan });
    102  await onHighlighterShown;
    103  is(
    104    HighlighterFront.nodeFront.tagName,
    105    "BODY",
    106    "The right NodeFront is passed to the highlighter (2)"
    107  );
    108 
    109  info(
    110    "Checking that the highlighter gets hidden when hovering a " +
    111      "non-transform property"
    112  );
    113  ({ valueSpan } = getRuleViewProperty(view, "body", "color"));
    114  onHighlighterHidden = hs.once("css-transform-highlighter-hidden");
    115  hs.onMouseMove({ target: valueSpan });
    116  await onHighlighterHidden;
    117  ok(!HighlighterFront.isShown, "The highlighter is hidden");
    118 });