tor-browser

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

browser_rules_cubicbezier-commit-on-ENTER.js (2403B)

      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 a curve change in the cubic-bezier tooltip is committed when ENTER
      7 // is pressed.
      8 
      9 const TEST_URI = `
     10  <style type="text/css">
     11    body {
     12      transition: top 2s linear;
     13    }
     14  </style>
     15 `;
     16 
     17 add_task(async function () {
     18  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
     19  const { view } = await openRuleView();
     20 
     21  info("Getting the bezier swatch element");
     22  const swatch = getRuleViewProperty(
     23    view,
     24    "body",
     25    "transition"
     26  ).valueSpan.querySelector(".inspector-bezierswatch");
     27 
     28  await testPressingEnterCommitsChanges(swatch, view);
     29 });
     30 
     31 async function testPressingEnterCommitsChanges(swatch, ruleView) {
     32  const bezierTooltip = ruleView.tooltips.getTooltip("cubicBezier");
     33 
     34  info("Showing the tooltip");
     35  const onBezierWidgetReady = bezierTooltip.once("ready");
     36  swatch.click();
     37  await onBezierWidgetReady;
     38 
     39  const widget = await bezierTooltip.widget;
     40  info("Simulating a change of curve in the widget");
     41  widget.coordinates = [0.1, 2, 0.9, -1];
     42  const expected = "cubic-bezier(0.1, 2, 0.9, -1)";
     43 
     44  await waitForSuccess(async function () {
     45    const func = await getComputedStyleProperty(
     46      "body",
     47      null,
     48      "transition-timing-function"
     49    );
     50    return func === expected;
     51  }, "Waiting for the change to be previewed on the element");
     52 
     53  ok(
     54    getRuleViewProperty(
     55      ruleView,
     56      "body",
     57      "transition"
     58    ).valueSpan.textContent.includes("cubic-bezier("),
     59    "The text of the timing-function was updated"
     60  );
     61 
     62  info("Sending RETURN key within the tooltip document");
     63  // Pressing RETURN ends up doing 2 rule-view updates, one for the preview and
     64  // one for the commit when the tooltip closes.
     65  const onRuleViewChanged = waitForNEvents(ruleView, "ruleview-changed", 2);
     66  focusAndSendKey(widget.parent.ownerDocument.defaultView, "RETURN");
     67  await onRuleViewChanged;
     68 
     69  const style = await getComputedStyleProperty(
     70    "body",
     71    null,
     72    "transition-timing-function"
     73  );
     74  is(style, expected, "The element's timing-function was kept after RETURN");
     75 
     76  const ruleViewStyle = getRuleViewProperty(
     77    ruleView,
     78    "body",
     79    "transition"
     80  ).valueSpan.textContent.includes("cubic-bezier(");
     81  ok(ruleViewStyle, "The text of the timing-function was kept after RETURN");
     82 }