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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Color Level 5: Parsing and serialization of colors using invalid relative color syntax</title>
<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com">
<link rel="help" href="https://drafts.csswg.org/css-color-5/#relative-colors">
<link rel="help" href="https://drafts.csswg.org/css-color-5/#serial-relative-color">
<meta name="assert" content="invalid colors using relative color syntax fail to parse">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
// rgb(from ...)
// Testing invalid values
test_invalid_value(`color`, `rgb(from rebeccapurple r 10deg 10)`);
test_invalid_value(`color`, `rgb(from rebeccapurple r 10 10deg)`);
test_invalid_value(`color`, `rgb(from rebeccapurple 10deg g b)`);
test_invalid_value(`color`, `rgb(from rgb(10%, 20%, 30%, 40%) r 10deg 10)`);
test_invalid_value(`color`, `rgb(from rgb(10%, 20%, 30%, 40%) r 10 10deg)`);
test_invalid_value(`color`, `rgb(from rgb(10%, 20%, 30%, 40%) 10deg g b)`);
// Testing invalid component names
test_invalid_value(`color`, `rgb(from rebeccapurple red g b)`);
test_invalid_value(`color`, `rgb(from rebeccapurple l g b)`);
test_invalid_value(`color`, `rgb(from rebeccapurple h g b)`);
// Testing invalid function name variation (only rgb() is valid, rgba() is invalid)
test_invalid_value(`color`, `rgba(from rebeccapurple r g b)`);
test_invalid_value(`color`, `rgba(from rgb(10%, 20%, 30%, 40%) r g b / alpha)`);
// Testing with calc().
test_invalid_value(`color`, `rgb(from rebeccapurple calc(r + 1%) g b)`);
// hsl(from ...)
// Testing invalid values.
test_invalid_value(`color`, `hsl(from rebeccapurple 10% s l)`);
test_invalid_value(`color`, `hsl(from rgb(10%, 20%, 30%, 40%) 10% s l)`);
// Testing invalid component names
test_invalid_value(`color`, `hsl(from rebeccapurple hue s l)`);
test_invalid_value(`color`, `hsl(from rebeccapurple x s l)`);
test_invalid_value(`color`, `hsl(from rebeccapurple h g b)`);
// Testing invalid function name variation (only hsl() is valid, hsla() is invalid)
test_invalid_value(`color`, `hsla(from rebeccapurple h s l)`);
test_invalid_value(`color`, `hsla(from rgb(10%, 20%, 30%, 40%) h s l / alpha)`);
// Testing with calc().
test_invalid_value(`color`, `hsl(from rebeccapurple calc(h + 1deg) s l)`);
test_invalid_value(`color`, `hsl(from rebeccapurple calc(h + 1%) s l)`);
// hwb(from ...)
// Testing invalid values.
test_invalid_value(`color`, `hwb(from rebeccapurple 10% w b)`);
test_invalid_value(`color`, `hwb(from rgb(10%, 20%, 30%, 40%) 10% w b)`);
// Testing invalid component names
test_invalid_value(`color`, `hwb(from rebeccapurple hue w b)`);
test_invalid_value(`color`, `hwb(from rebeccapurple x w b)`);
test_invalid_value(`color`, `hwb(from rebeccapurple h g b)`);
// Testing with calc().
test_invalid_value(`color`, `hwb(from rebeccapurple calc(h + 1deg) w b)`);
test_invalid_value(`color`, `hwb(from rebeccapurple calc(h + 1%) w b)`);
for (const colorSpace of [ "lab", "oklab" ]) {
// Testing invalid values.
test_invalid_value(`color`, `${colorSpace}(from ${colorSpace}(.25 20 50) l 10deg 10)`);
test_invalid_value(`color`, `${colorSpace}(from ${colorSpace}(.25 20 50) l 10 10deg)`);
test_invalid_value(`color`, `${colorSpace}(from ${colorSpace}(.25 20 50) 10deg a b)`);
test_invalid_value(`color`, `${colorSpace}(from ${colorSpace}(.25 20 50 / 40%) l 10deg 10)`);
test_invalid_value(`color`, `${colorSpace}(from ${colorSpace}(.25 20 50 / 40%) l 10 10deg)`);
test_invalid_value(`color`, `${colorSpace}(from ${colorSpace}(.25 20 50 / 40%) 10deg a b)`);
// Testing invalid component names
test_invalid_value(`color`, `${colorSpace}(from ${colorSpace}(.25 20 50) lightness a b)`);
test_invalid_value(`color`, `${colorSpace}(from ${colorSpace}(.25 20 50) x a b)`);
test_invalid_value(`color`, `${colorSpace}(from ${colorSpace}(.25 20 50) h g b)`);
// Testing with calc().
test_invalid_value(`color`, `${colorSpace}(from ${colorSpace}(.25 20 50) l calc(a + 1%) b)`);
}
for (const colorSpace of [ "lch", "oklch" ]) {
// Testing invalid values.
test_invalid_value(`color`, `${colorSpace}(from ${colorSpace}(.70 45 30) l 10deg h)`);
test_invalid_value(`color`, `${colorSpace}(from ${colorSpace}(.70 45 30) l c 10%)`);
test_invalid_value(`color`, `${colorSpace}(from ${colorSpace}(.70 45 30) 10deg c h)`);
test_invalid_value(`color`, `${colorSpace}(from ${colorSpace}(.70 45 30 / 40%) l 10deg h)`);
test_invalid_value(`color`, `${colorSpace}(from ${colorSpace}(.70 45 30 / 40%) l c 10%)`);
test_invalid_value(`color`, `${colorSpace}(from ${colorSpace}(.70 45 30 / 40%) 10deg c h)`);
// Testing invalid component names
test_invalid_value(`color`, `${colorSpace}(from ${colorSpace}(.70 45 30) lightness c h)`);
test_invalid_value(`color`, `${colorSpace}(from ${colorSpace}(.70 45 30) x c h)`);
test_invalid_value(`color`, `${colorSpace}(from ${colorSpace}(.70 45 30) l g b)`);
// Testing with calc().
test_invalid_value(`color`, `${colorSpace}(from ${colorSpace}(.70 45 30) l c calc(h + 1%))`);
test_invalid_value(`color`, `${colorSpace}(from ${colorSpace}(.70 45 30) l c calc(h + 1deg))`);
}
for (const colorSpace of [ "srgb", "srgb-linear", "a98-rgb", "rec2020", "prophoto-rgb", "display-p3" ]) {
// Testing invalid values.
test_invalid_value(`color`, `color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} 10deg g b)`);
test_invalid_value(`color`, `color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r 10deg b)`);
test_invalid_value(`color`, `color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g 10deg)`);
test_invalid_value(`color`, `color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g b / 10deg)`);
// Testing invalid component names
test_invalid_value(`color`, `color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} red g b)`);
test_invalid_value(`color`, `color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} x g b)`);
test_invalid_value(`color`, `color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} l g b)`);
test_invalid_value(`color`, `color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} x y z)`);
// Testing with calc().
test_invalid_value(`color`, `color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} calc(r + 1%) g b)`);
}
for (const colorSpace of [ "xyz", "xyz-d50", "xyz-d65" ]) {
// Testing invalid values.
test_invalid_value(`color`, `color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} 10deg y z)`);
test_invalid_value(`color`, `color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x 10deg z)`);
test_invalid_value(`color`, `color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x y 10deg)`);
test_invalid_value(`color`, `color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x y z / 10deg)`);
// Testing invalid component names
test_invalid_value(`color`, `color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} red y)`);
test_invalid_value(`color`, `color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} r y z)`);
test_invalid_value(`color`, `color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} l y z)`);
test_invalid_value(`color`, `color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} r g b)`);
// Testing with calc().
test_invalid_value(`color`, `color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} calc(x + 1%) y z)`);
}
</script>
</body>
</html>
|
