1 files changed, 95 insertions, 0 deletions
diff --git a/devtools/client/shared/test/browser_cubic-bezier-06.js b/devtools/client/shared/test/browser_cubic-bezier-06.js
new file mode 100644
index 0000000000..9cb00e8bf7
--- /dev/null
+++ b/devtools/client/shared/test/browser_cubic-bezier-06.js
@@ -0,0 +1,95 @@
+/* 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, rect) {
+  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");
+}