browser_cubic-bezier-06.js

Enable keyboard shortcuts

This test gets skipped with pattern: apple_catalina OR os == 'linux' && !asan && !debug && !swgl && !ccov
Manifest: devtools/client/shared/test/browser.toml

/* Any copyright is dedicated to the Public Domain.

   http://creativecommons.org/publicdomain/zero/1.0/ */

"use strict";

// Tests the integration between CubicBezierWidget and CubicBezierPresets

const {

  CubicBezierWidget,

} = require("resource://devtools/client/shared/widgets/CubicBezierWidget.js");

const {

  PRESETS,

} = require("resource://devtools/client/shared/widgets/CubicBezierPresets.js");

const TEST_URI = CHROME_URL_ROOT + "doc_cubic-bezier-01.html";

add_task(async function () {

  const { host, win, doc } = await createHost("bottom", TEST_URI);

  const container = doc.querySelector("#cubic-bezier-container");

  const w = new CubicBezierWidget(

    container,

    PRESETS["ease-in"]["ease-in-sine"]

);

  w.presets.refreshMenu(PRESETS["ease-in"]["ease-in-sine"]);

  const rect = w.curve.getBoundingClientRect();

  rect.graphTop = rect.height * w.bezierCanvas.padding[0];

  await adjustingBezierUpdatesPreset(w, win, doc, rect);

  await selectingPresetUpdatesBezier(w, win, doc, rect);

  w.destroy();

  host.destroy();

});

function adjustingBezierUpdatesPreset(widget, win, doc, rect) {

  info("Checking that changing the bezier refreshes the preset menu");

is(

    widget.presets.activeCategory,

    doc.querySelector("#ease-in"),

    "The selected category is ease-in"

);

is(

    widget.presets._activePreset,

    doc.querySelector("#ease-in-sine"),

    "The selected preset is ease-in-sine"

);

  info("Generating custom bezier curve by dragging");

  widget._onPointMouseDown({ target: widget.p1 });

  doc.onmousemove({ pageX: rect.left, pageY: rect.graphTop });

  doc.onmouseup();

is(

    widget.presets.activeCategory,

    doc.querySelector("#ease-in"),

    "The selected category is still ease-in"

);

  is(widget.presets._activePreset, null, "There is no active preset");

async function selectingPresetUpdatesBezier(widget, win, doc) {

  info("Checking that selecting a preset updates bezier curve");

  info("Listening for the new coordinates event");

  const onNewCoordinates = widget.presets.once("new-coordinates");

  const onUpdated = widget.once("updated");

  info("Click a preset");

  const preset = doc.querySelector("#ease-in-sine");

  widget.presets._onPresetClick({ currentTarget: preset });

  await onNewCoordinates;

  ok(true, "The preset widget fired the new-coordinates event");

  const bezier = await onUpdated;

  ok(true, "The bezier canvas fired the updated event");

is(

    bezier.P1[0],

    preset.coordinates[0],

    "The new P1 time coordinate is correct"

);

is(

    bezier.P1[1],

    preset.coordinates[1],

    "The new P1 progress coordinate is correct"

);

  is(bezier.P2[0], preset.coordinates[2], "P2 time coordinate is correct ");

  is(bezier.P2[1], preset.coordinates[3], "P2 progress coordinate is correct");