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
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
var { colorUtils } = require("resource://devtools/shared/css/color.js");
/* global getFixtureColorData */
loadHelperScript("helper_color_data.js");
add_task(async function () {
await addTab("about:blank");
const { host, doc } = await createHost("bottom");
info("Creating a test canvas element to test colors");
const canvas = createTestCanvas(doc);
info("Starting the test");
testColorUtils(canvas);
host.destroy();
gBrowser.removeCurrentTab();
});
function createTestCanvas(doc) {
const canvas = doc.createElement("canvas");
canvas.width = canvas.height = 10;
doc.body.appendChild(canvas);
return canvas;
}
function testColorUtils(canvas) {
const data = getFixtureColorData();
for (const { authored, name, hex, hsl, rgb } of data) {
const color = new colorUtils.CssColor(authored);
// Check all values.
info("Checking values for " + authored);
is(color.name, name, "color.name === name");
is(color.hex, hex, "color.hex === hex");
is(color.hsl, hsl, "color.hsl === hsl");
is(color.rgb, rgb, "color.rgb === rgb");
testToString(color, name, hex, hsl, rgb);
testColorMatch(name, hex, hsl, rgb, color.rgba, canvas);
}
}
function testToString(color, name, hex, hsl, rgb) {
const { COLORUNIT } = colorUtils.CssColor;
is(color.toString(COLORUNIT.name), name, "toString() with authored type");
is(color.toString(COLORUNIT.hex), hex, "toString() with hex type");
is(color.toString(COLORUNIT.hsl), hsl, "toString() with hsl type");
is(color.toString(COLORUNIT.rgb), rgb, "toString() with rgb type");
}
function testColorMatch(name, hex, hsl, rgb, rgba, canvas) {
let target;
const ctx = canvas.getContext("2d");
const clearCanvas = function () {
canvas.width = 1;
};
const setColor = function (color) {
ctx.fillStyle = color;
ctx.fillRect(0, 0, 1, 1);
};
const setTargetColor = function () {
clearCanvas();
// All colors have rgba so we can use this to compare against.
setColor(rgba);
const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data;
target = { r, g, b, a };
};
const test = function (color, type) {
// hsla -> rgba -> hsla produces inaccurate results so we
// need some tolerence here.
const tolerance = 3;
clearCanvas();
setColor(color);
const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data;
const rgbFail =
Math.abs(r - target.r) > tolerance ||
Math.abs(g - target.g) > tolerance ||
Math.abs(b - target.b) > tolerance;
ok(!rgbFail, "color " + rgba + " matches target. Type: " + type);
if (rgbFail) {
info(
`target: ${JSON.stringify(
target
)}, color: [r: ${r}, g: ${g}, b: ${b}, a: ${a}]`
);
}
const alphaFail = a !== target.a;
ok(!alphaFail, "color " + rgba + " alpha value matches target.");
};
setTargetColor();
test(name, "name");
test(hex, "hex");
test(hsl, "hsl");
test(rgb, "rgb");
}
|
