tor-browser

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

browser_styleinspector_transform-highlighter-01.js (2793B)

      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 created only when asked and only one
      7 // instance exists across the inspector
      8 
      9 const TEST_URI = `
     10  <style type="text/css">
     11    body {
     12      transform: skew(16deg);
     13      color: blue;
     14    }
     15  </style>
     16  Test the css transform highlighter
     17 `;
     18 
     19 const { TYPES } = ChromeUtils.importESModule(
     20  "resource://devtools/shared/highlighters.mjs"
     21 );
     22 const TYPE = TYPES.TRANSFORM;
     23 
     24 add_task(async function () {
     25  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
     26  const { inspector, view } = await openRuleView();
     27 
     28  let overlay = view.highlighters;
     29 
     30  ok(!overlay.highlighters[TYPE], "No highlighter exists in the rule-view");
     31 
     32  let onHighlighterShown = overlay.once("css-transform-highlighter-shown");
     33  const rulesViewTarget = getRuleViewProperty(
     34    view,
     35    "body",
     36    "transform"
     37  ).valueSpan;
     38  EventUtils.synthesizeMouse(
     39    rulesViewTarget,
     40    2,
     41    2,
     42    { type: "mousemove" },
     43    rulesViewTarget.ownerGlobal
     44  );
     45  const h = await onHighlighterShown;
     46 
     47  ok(
     48    overlay.highlighters[TYPE],
     49    "The highlighter has been created in the rule-view"
     50  );
     51  is(h, overlay.highlighters[TYPE], "The right highlighter has been created");
     52 
     53  info("Hide the highlighter");
     54  const onHighlighterHidden = overlay.once("css-transform-highlighter-hidden");
     55  EventUtils.synthesizeMouse(
     56    getRuleViewProperty(view, "body", "color").valueSpan,
     57    2,
     58    2,
     59    { type: "mousemove" },
     60    rulesViewTarget.ownerGlobal
     61  );
     62  await onHighlighterHidden;
     63 
     64  info("Show the highlighter again and check we got the same instance");
     65  onHighlighterShown = overlay.once("css-transform-highlighter-shown");
     66  EventUtils.synthesizeMouse(
     67    rulesViewTarget,
     68    2,
     69    2,
     70    { type: "mousemove" },
     71    rulesViewTarget.ownerGlobal
     72  );
     73  const h2 = await onHighlighterShown;
     74 
     75  is(
     76    h,
     77    h2,
     78    "The same instance of highlighter is returned everytime in the rule-view"
     79  );
     80 
     81  const onComputedViewReady = inspector.once("computed-view-refreshed");
     82  const cView = selectComputedView(inspector);
     83  await onComputedViewReady;
     84  overlay = cView.highlighters;
     85 
     86  ok(overlay.highlighters[TYPE], "The highlighter exists in the computed-view");
     87 
     88  onHighlighterShown = overlay.once("css-transform-highlighter-shown");
     89  const computedViewTarget = getComputedViewProperty(
     90    cView,
     91    "transform"
     92  ).valueSpan;
     93  EventUtils.synthesizeMouse(
     94    computedViewTarget,
     95    2,
     96    2,
     97    { type: "mousemove" },
     98    computedViewTarget.ownerGlobal
     99  );
    100 
    101  const h3 = await onHighlighterShown;
    102  is(
    103    h,
    104    h3,
    105    "The same instance of highlighter is returned everytime " +
    106      "in the computed-view"
    107  );
    108 });