tor-browser

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

browser_cubic-bezier-07.js (2289B)

      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 changing the cubic-bezier curve in the widget does change the dot animation
      7 // preview too.
      8 
      9 const {
     10  CubicBezierWidget,
     11 } = require("resource://devtools/client/shared/widgets/CubicBezierWidget.js");
     12 const {
     13  PREDEFINED,
     14 } = require("resource://devtools/client/shared/widgets/CubicBezierPresets.js");
     15 
     16 const TEST_URI = CHROME_URL_ROOT + "doc_cubic-bezier-01.html";
     17 
     18 registerCleanupFunction(() => {
     19  Services.prefs.clearUserPref("ui.prefersReducedMotion");
     20 });
     21 
     22 add_task(async function () {
     23  const { host, doc } = await createHost("bottom", TEST_URI);
     24  // Unset "prefers reduced motion", otherwise the dot animation preview won't be created.
     25  // See Bug 1637842
     26  // https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion
     27  await pushPref("ui.prefersReducedMotion", 0);
     28 
     29  const container = doc.querySelector("#cubic-bezier-container");
     30  const w = new CubicBezierWidget(container, PREDEFINED.linear);
     31 
     32  await previewDotReactsToChanges(w, [0.6, -0.28, 0.74, 0.05]);
     33  await previewDotReactsToChanges(w, [0.9, 0.03, 0.69, 0.22]);
     34  await previewDotReactsToChanges(w, [0.68, -0.55, 0.27, 1.55]);
     35  await previewDotReactsToChanges(w, PREDEFINED.ease, "ease");
     36  await previewDotReactsToChanges(w, PREDEFINED["ease-in-out"], "ease-in-out");
     37 
     38  w.destroy();
     39  host.destroy();
     40 });
     41 
     42 async function previewDotReactsToChanges(widget, coords, expectedEasing) {
     43  const onUpdated = widget.once("updated");
     44  widget.coordinates = coords;
     45  await onUpdated;
     46 
     47  const animatedDot = widget.timingPreview.dot;
     48  const animations = animatedDot.getAnimations();
     49 
     50  if (!expectedEasing) {
     51    expectedEasing = `cubic-bezier(${coords[0]}, ${coords[1]}, ${coords[2]}, ${coords[3]})`;
     52  }
     53 
     54  is(animations.length, 1, "The dot is animated");
     55 
     56  const goingToRight = animations[0].effect.getKeyframes()[2];
     57  is(
     58    goingToRight.easing,
     59    expectedEasing,
     60    `The easing when going to the right was set correctly to ${coords}`
     61  );
     62 
     63  const goingToLeft = animations[0].effect.getKeyframes()[6];
     64  is(
     65    goingToLeft.easing,
     66    expectedEasing,
     67    `The easing when going to the left was set correctly to ${coords}`
     68  );
     69 }