tor-browser

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

browser_rules_cubicbezier-appears-on-swatch-click.js (2219B)

      1 /* Any copyright is dedicated to the Public Domain.
      2 http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Tests that cubic-bezier pickers appear when clicking on cubic-bezier
      7 // swatches.
      8 
      9 const TEST_URI = `
     10  <style type="text/css">
     11    div {
     12      animation: move 3s linear;
     13      transition: top 4s cubic-bezier(.1, 1.45, 1, -1.2);
     14    }
     15    .test {
     16      animation-timing-function: ease-in-out;
     17      transition-timing-function: ease-out;
     18    }
     19  </style>
     20  <div class="test">Testing the cubic-bezier tooltip!</div>
     21 `;
     22 
     23 add_task(async function () {
     24  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
     25  const { inspector, view } = await openRuleView();
     26  await selectNode("div", inspector);
     27 
     28  const swatches = [];
     29  swatches.push(
     30    getRuleViewProperty(view, "div", "animation").valueSpan.querySelector(
     31      ".inspector-bezierswatch"
     32    )
     33  );
     34  swatches.push(
     35    getRuleViewProperty(view, "div", "transition").valueSpan.querySelector(
     36      ".inspector-bezierswatch"
     37    )
     38  );
     39  swatches.push(
     40    getRuleViewProperty(
     41      view,
     42      ".test",
     43      "animation-timing-function"
     44    ).valueSpan.querySelector(".inspector-bezierswatch")
     45  );
     46  swatches.push(
     47    getRuleViewProperty(
     48      view,
     49      ".test",
     50      "transition-timing-function"
     51    ).valueSpan.querySelector(".inspector-bezierswatch")
     52  );
     53 
     54  for (const swatch of swatches) {
     55    info("Testing that the cubic-bezier appears on cubicswatch click");
     56    await testAppears(view, swatch);
     57  }
     58 });
     59 
     60 async function testAppears(view, swatch) {
     61  ok(swatch, "The cubic-swatch exists");
     62 
     63  const bezier = view.tooltips.getTooltip("cubicBezier");
     64  ok(bezier, "The rule-view has the expected cubicBezier property");
     65 
     66  const bezierPanel = bezier.tooltip.panel;
     67  ok(bezierPanel, "The XUL panel for the cubic-bezier tooltip exists");
     68 
     69  const onBezierWidgetReady = bezier.once("ready");
     70  swatch.click();
     71  await onBezierWidgetReady;
     72 
     73  ok(true, "The cubic-bezier tooltip was shown on click of the cibuc swatch");
     74  ok(
     75    !inplaceEditor(swatch.parentNode),
     76    "The inplace editor wasn't shown as a result of the cibuc swatch click"
     77  );
     78  await hideTooltipAndWaitForRuleViewChanged(bezier, view);
     79 }