1 files changed, 148 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 000000000..a18429542
--- /dev/null
+++ b/devtools/client/shared/test/browser_filter-editor-05.js
@@ -0,0 +1,148 @@
+/* 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("devtools/client/shared/widgets/FilterWidget");
+const {getClientCssProperties} = require("devtools/shared/fronts/css-properties");
+
+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 = `data:text/html,<div id="filter-container" />`;
+
+add_task(function* () {
+  let [,, doc] = yield createHost("bottom", TEST_URI);
+  const cssIsValid = getClientCssProperties().getValidityChecker(doc);
+
+  const container = doc.querySelector("#filter-container");
+  let widget = new CSSFilterEditorWidget(
+    container, "grayscale(0%) url(test.svg)", cssIsValid
+  );
+
+  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");
+});