1 files changed, 166 insertions, 0 deletions
diff --git a/devtools/client/shared/test/browser_filter-editor-05.js b/devtools/client/shared/test/browser_filter-editor-05.js
new file mode 100644
index 0000000000..37c53ff6f4
--- /dev/null
+++ b/devtools/client/shared/test/browser_filter-editor-05.js
@@ -0,0 +1,166 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+requestLongerTimeout(2);
+
+// Tests the Filter Editor Widget's label-dragging
+
+const {
+  CSSFilterEditorWidget,
+} = require("resource://devtools/client/shared/widgets/FilterWidget.js");
+
+const FAST_VALUE_MULTIPLIER = 10;
+const SLOW_VALUE_MULTIPLIER = 0.1;
+const DEFAULT_VALUE_MULTIPLIER = 1;
+
+const GRAYSCALE_MAX = 100,
+  GRAYSCALE_MIN = 0;
+
+const TEST_URI = CHROME_URL_ROOT + "doc_filter-editor-01.html";
+
+add_task(async function () {
+  const { doc } = await createHost("bottom", TEST_URI);
+
+  const container = doc.querySelector("#filter-container");
+  const widget = new CSSFilterEditorWidget(
+    container,
+    "grayscale(0%) url(test.svg)"
+  );
+
+  const filters = widget.el.querySelector("#filters");
+  const grayscale = filters.children[0];
+  const url = filters.children[1];
+
+  info("Test label-dragging on number-type filters without modifiers");
+  widget._mouseDown({
+    target: grayscale.querySelector("label"),
+    pageX: 0,
+    altKey: false,
+    shiftKey: false,
+  });
+
+  widget._mouseMove({
+    pageX: 12,
+    altKey: false,
+    shiftKey: false,
+  });
+  let expected = DEFAULT_VALUE_MULTIPLIER * 12;
+  is(
+    widget.getValueAt(0),
+    `${expected}%`,
+    "Should update value correctly without modifiers"
+  );
+
+  info("Test label-dragging on number-type filters with alt");
+  widget._mouseMove({
+    // 20 - 12 = 8
+    pageX: 20,
+    altKey: true,
+    shiftKey: false,
+  });
+
+  expected = expected + SLOW_VALUE_MULTIPLIER * 8;
+  is(
+    widget.getValueAt(0),
+    `${expected}%`,
+    "Should update value correctly with alt key"
+  );
+
+  info("Test label-dragging on number-type filters with shift");
+  widget._mouseMove({
+    // 25 - 20 = 5
+    pageX: 25,
+    altKey: false,
+    shiftKey: true,
+  });
+
+  expected = expected + FAST_VALUE_MULTIPLIER * 5;
+  is(
+    widget.getValueAt(0),
+    `${expected}%`,
+    "Should update value correctly with shift key"
+  );
+
+  info("Test releasing mouse and dragging again");
+
+  widget._mouseUp();
+
+  widget._mouseDown({
+    target: grayscale.querySelector("label"),
+    pageX: 0,
+    altKey: false,
+    shiftKey: false,
+  });
+
+  widget._mouseMove({
+    pageX: 5,
+    altKey: false,
+    shiftKey: false,
+  });
+
+  expected = expected + DEFAULT_VALUE_MULTIPLIER * 5;
+  is(
+    widget.getValueAt(0),
+    `${expected}%`,
+    "Should reset multiplier to default"
+  );
+
+  info("Test value ranges");
+
+  widget._mouseMove({
+    // 30 - 25 = 5
+    pageX: 30,
+    altKey: false,
+    shiftKey: true,
+  });
+
+  expected = GRAYSCALE_MAX;
+  is(
+    widget.getValueAt(0),
+    `${expected}%`,
+    "Shouldn't allow values higher than max"
+  );
+
+  widget._mouseMove({
+    pageX: -11,
+    altKey: false,
+    shiftKey: true,
+  });
+
+  expected = GRAYSCALE_MIN;
+  is(
+    widget.getValueAt(0),
+    `${expected}%`,
+    "Shouldn't allow values less than min"
+  );
+
+  widget._mouseUp();
+
+  info("Test label-dragging on string-type filters");
+  widget._mouseDown({
+    target: url.querySelector("label"),
+    pageX: 0,
+    altKey: false,
+    shiftKey: false,
+  });
+
+  ok(
+    !widget.isDraggingLabel,
+    "Label-dragging should not work for string-type filters"
+  );
+
+  widget._mouseMove({
+    pageX: -11,
+    altKey: false,
+    shiftKey: true,
+  });
+
+  is(
+    widget.getValueAt(1),
+    "test.svg",
+    "Label-dragging on string-type filters shouldn't affect their value"
+  );
+  widget.destroy();
+});