1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
/* vim: set ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Tests that the spectrum color picker works correctly
const {Spectrum} = require("devtools/client/shared/widgets/Spectrum");
const TEST_URI = `data:text/html,
<link rel="stylesheet" href="chrome://devtools/content/shared/widgets/spectrum.css" type="text/css"/>
<div id="spectrum-container" />`;
add_task(function* () {
let [host,, doc] = yield createHost("bottom", TEST_URI);
let container = doc.getElementById("spectrum-container");
yield testCreateAndDestroyShouldAppendAndRemoveElements(container);
yield testPassingAColorAtInitShouldSetThatColor(container);
yield testSettingAndGettingANewColor(container);
yield testChangingColorShouldEmitEvents(container);
yield testSettingColorShoudUpdateTheUI(container);
host.destroy();
});
function testCreateAndDestroyShouldAppendAndRemoveElements(container) {
ok(container, "We have the root node to append spectrum to");
is(container.childElementCount, 0, "Root node is empty");
let s = new Spectrum(container, [255, 126, 255, 1]);
s.show();
ok(container.childElementCount > 0, "Spectrum has appended elements");
s.destroy();
is(container.childElementCount, 0, "Destroying spectrum removed all nodes");
}
function testPassingAColorAtInitShouldSetThatColor(container) {
let initRgba = [255, 126, 255, 1];
let s = new Spectrum(container, initRgba);
s.show();
let setRgba = s.rgb;
is(initRgba[0], setRgba[0], "Spectrum initialized with the right color");
is(initRgba[1], setRgba[1], "Spectrum initialized with the right color");
is(initRgba[2], setRgba[2], "Spectrum initialized with the right color");
is(initRgba[3], setRgba[3], "Spectrum initialized with the right color");
s.destroy();
}
function testSettingAndGettingANewColor(container) {
let s = new Spectrum(container, [0, 0, 0, 1]);
s.show();
let colorToSet = [255, 255, 255, 1];
s.rgb = colorToSet;
let newColor = s.rgb;
is(colorToSet[0], newColor[0], "Spectrum set with the right color");
is(colorToSet[1], newColor[1], "Spectrum set with the right color");
is(colorToSet[2], newColor[2], "Spectrum set with the right color");
is(colorToSet[3], newColor[3], "Spectrum set with the right color");
s.destroy();
}
function testChangingColorShouldEmitEvents(container) {
return new Promise(resolve => {
let s = new Spectrum(container, [255, 255, 255, 1]);
s.show();
s.once("changed", (event, rgba, color) => {
ok(true, "Changed event was emitted on color change");
is(rgba[0], 128, "New color is correct");
is(rgba[1], 64, "New color is correct");
is(rgba[2], 64, "New color is correct");
is(rgba[3], 1, "New color is correct");
is(`rgba(${rgba.join(", ")})`, color, "RGBA and css color correspond");
s.destroy();
resolve();
});
// Simulate a drag move event by calling the handler directly.
s.onDraggerMove(s.dragger.offsetWidth / 2, s.dragger.offsetHeight / 2);
});
}
function testSettingColorShoudUpdateTheUI(container) {
let s = new Spectrum(container, [255, 255, 255, 1]);
s.show();
let dragHelperOriginalPos = [s.dragHelper.style.top, s.dragHelper.style.left];
let alphaHelperOriginalPos = s.alphaSliderHelper.style.left;
s.rgb = [50, 240, 234, .2];
s.updateUI();
ok(s.alphaSliderHelper.style.left != alphaHelperOriginalPos, "Alpha helper has moved");
ok(s.dragHelper.style.top !== dragHelperOriginalPos[0], "Drag helper has moved");
ok(s.dragHelper.style.left !== dragHelperOriginalPos[1], "Drag helper has moved");
s.rgb = [240, 32, 124, 0];
s.updateUI();
is(s.alphaSliderHelper.style.left, -(s.alphaSliderHelper.offsetWidth / 2) + "px",
"Alpha range UI has been updated again");
s.destroy();
}
|
