tor-browser

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

browser_styleinspector_transform-highlighter-04.js (2103B)

      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 only when hovering over a
      7 // transform declaration that isn't overriden or disabled
      8 
      9 // Note that unlike the other browser_styleinspector_transform-highlighter-N.js
     10 // tests, this one only tests the rule-view as only this view features disabled
     11 // and overriden properties
     12 
     13 const TEST_URI = `
     14  <style type="text/css">
     15    div {
     16      background: purple;
     17      width:300px;height:300px;
     18      transform: rotate(16deg);
     19    }
     20    .test {
     21      transform: skew(25deg);
     22    }
     23  </style>
     24  <div class="test"></div>
     25 `;
     26 
     27 const { TYPES } = ChromeUtils.importESModule(
     28  "resource://devtools/shared/highlighters.mjs"
     29 );
     30 const TYPE = TYPES.TRANSFORM;
     31 
     32 add_task(async function () {
     33  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
     34  const { inspector, view } = await openRuleView();
     35  await selectNode(".test", inspector);
     36 
     37  const hs = view.highlighters;
     38 
     39  info("Faking a mousemove on the overriden property");
     40  let { valueSpan } = getRuleViewProperty(view, "div", "transform");
     41  hs.onMouseMove({ target: valueSpan });
     42  ok(
     43    !hs.highlighters[TYPE],
     44    "No highlighter was created for the overriden property"
     45  );
     46 
     47  info("Disabling the applied property");
     48  const classRuleEditor = getRuleViewRuleEditor(view, 1);
     49  const propEditor = classRuleEditor.rule.textProps[0].editor;
     50  propEditor.enable.click();
     51  await classRuleEditor.rule._applyingModifications;
     52 
     53  info("Faking a mousemove on the disabled property");
     54  ({ valueSpan } = getRuleViewProperty(view, ".test", "transform"));
     55  hs.onMouseMove({ target: valueSpan });
     56  ok(
     57    !hs.highlighters[TYPE],
     58    "No highlighter was created for the disabled property"
     59  );
     60 
     61  info("Faking a mousemove on the now unoverriden property");
     62  ({ valueSpan } = getRuleViewProperty(view, "div", "transform"));
     63  const onHighlighterShown = hs.once("css-transform-highlighter-shown");
     64  hs.onMouseMove({ target: valueSpan });
     65  await onHighlighterShown;
     66 });