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
|
<!doctype html>
<meta charset="utf-8">
<title>CSSOKLab tests</title>
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#csshwb">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../resources/testhelper.js"></script>
<script>
'use strict';
const gValidLightnessInputs = [
{lightness: CSS.percent(50), desc: 'percent', expected: CSS.percent(50)},
{lightness: 0.5, desc: 'number', expected: CSS.percent(50)},
];
const gInvalidLightnessInputs = [
{lightness: CSS.px(1), desc: "css pixels"},
{lightness: CSS.deg(180), desc: "degrees"},
]
for (const {lightness, desc, expected} of gValidLightnessInputs) {
test(() => {
const result = new CSSOKLab(lightness, 0.5, 0.5);
assert_color_channel_approx_equals(result.l, expected);
}, `Constructing a CSSOKLab with ${desc} for the lightness works as intended.`);
test(() => {
const result = new CSSOKLab(CSS.percent(0), 0.5, 0.5);
result.l = lightness;
assert_color_channel_approx_equals(result.l, expected);
}, `CSSOKLab.l can be updated with a ${desc}.`);
}
for (const {lightness, desc} of gInvalidLightnessInputs) {
test(() => {
assert_throws_dom("SyntaxError", () => new CSSOKLab(lightness, 0, 0));
}, `Constructing a CSSOKLab with ${desc} for lightness throws a SyntaxError.`);
}
test(() => {
const result = new CSSOKLab(CSS.percent(27), 7, CSS.number(8));
assert_color_channel_approx_equals(result.l, CSS.percent(27));
assert_color_channel_approx_equals(result.a, CSS.number(7));
assert_color_channel_approx_equals(result.b, CSS.number(8));
assert_color_channel_approx_equals(result.alpha, CSS.percent(100));
}, 'CSSOKLab can be constructed from three numbers and will get an alpha of 100%.');
test(() => {
const result = new CSSOKLab(0.2, 7, CSS.number(8), CSS.percent(0.4));
assert_color_channel_approx_equals(result.l, CSS.percent(20));
assert_color_channel_approx_equals(result.a, CSS.number(7));
assert_color_channel_approx_equals(result.b, CSS.number(8));
assert_color_channel_approx_equals(result.alpha, CSS.percent(0.4));
}, 'CSSOKLab can be constructed from four numbers.');
test(() => {
assert_throws_dom("SyntaxError", () => new CSSOKLab(CSS.number(1), 0, 0, 0));
assert_throws_dom("SyntaxError", () => new CSSOKLab(0, 0, 0, CSS.number(1)));
}, `Constructing a CSSOKLab with CSS.number for l or alpha throws a SyntaxError`);
for (const attr of ['l', 'alpha']) {
test(() => {
const result = new CSSOKLab(CSS.percent(0), 0, 0);
assert_throws_dom("SyntaxError", () => result[attr] = CSS.number(1));
}, `Updating a CSSOKLab with CSS.number for ${attr} throws a SyntaxError`);
test(() => {
const result = new CSSOKLab(CSS.percent(0), 0, 0);
result[attr] = 0.5;
assert_color_channel_approx_equals(result[attr], CSS.percent(50));
}, 'CSSOKLab.' + attr + ' can be updated to a number.');
test(() => {
const result = new CSSOKLab(CSS.percent(0), 0, 0);
result[attr] = CSS.percent(50);
assert_color_channel_approx_equals(result[attr], CSS.percent(50));
}, 'CSSOKLab.' + attr + ' can be updated with a CSS percent.');
}
</script>
|
