149 lines
3.4 KiB
JavaScript
149 lines
3.4 KiB
JavaScript
/* 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");
|
|
});
|