Skip to content

Commit e409a92

Browse files
nex3nex3
authored
[Color 4] Add tests for missing channels in legacy color spaces (#1948)
This also adds tests for the global hwb() function.
1 parent 081ffe5 commit e409a92

File tree

6 files changed

+393
-0
lines changed

6 files changed

+393
-0
lines changed

‎spec/core_functions/color/hsl/one_arg/alpha.hrx

+21
Original file line numberDiff line numberDiff line change
@@ -97,3 +97,24 @@ a {b: hsl(list.slash(180 60% 50%, 0))}
9797
a {
9898
b: hsla(180, 60%, 50%, 0);
9999
}
100+
101+
<===>
102+
================================================================================
103+
<===> missing/slash/input.scss
104+
a {b: hsl(180 60% 50% / none)}
105+
106+
<===> missing/slash/output.css
107+
a {
108+
b: hsl(180deg 60% 50% / none);
109+
}
110+
111+
<===>
112+
================================================================================
113+
<===> missing/slash_list/input.scss
114+
@use 'sass:list';
115+
a {b: hsl(list.slash(180 60% 50%, none))}
116+
117+
<===> missing/slash_list/output.css
118+
a {
119+
b: hsl(180deg 60% 50% / none);
120+
}

‎spec/core_functions/color/hsl/one_arg/no_alpha.hrx

+30
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,36 @@ More info: https://sass-lang.com/d/function-units
122122
'
123123
input.scss 1:7 root stylesheet
124124

125+
<===>
126+
================================================================================
127+
<===> missing/hue/input.scss
128+
a {b: hsl(none 100% 50%)}
129+
130+
<===> missing/hue/output.css
131+
a {
132+
b: hsl(none 100% 50%);
133+
}
134+
135+
<===>
136+
================================================================================
137+
<===> missing/saturation/input.scss
138+
a {b: hsl(0 none 50%)}
139+
140+
<===> missing/saturation/output.css
141+
a {
142+
b: hsl(0deg none 50%);
143+
}
144+
145+
<===>
146+
================================================================================
147+
<===> missing/lightness/input.scss
148+
a {b: hsl(0 100% none)}
149+
150+
<===> missing/lightness/output.css
151+
a {
152+
b: hsl(0deg 100% none);
153+
}
154+
125155
<===>
126156
================================================================================
127157
<===> named/input.scss

‎spec/core_functions/color/hwb/global.hrx

+289
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,289 @@
1+
<===> alpha/in_gamut/transparent/input.scss
2+
a {b: hwb(180 30% 40% / 0)}
3+
4+
<===> alpha/in_gamut/transparent/output.css
5+
a {
6+
b: hsla(180, 33.3333333333%, 45%, 0);
7+
}
8+
9+
<===>
10+
================================================================================
11+
<===> alpha/in_gamut/opaque/input.scss
12+
a {b: hwb(180 30% 40% / 1)}
13+
14+
<===> alpha/in_gamut/opaque/output.css
15+
a {
16+
b: hsl(180, 33.3333333333%, 45%);
17+
}
18+
19+
<===>
20+
================================================================================
21+
<===> alpha/in_gamut/partial/input.scss
22+
a {b: hwb(180 30% 40% / 0.5)}
23+
24+
<===> alpha/in_gamut/partial/output.css
25+
a {
26+
b: hsla(180, 33.3333333333%, 45%, 0.5);
27+
}
28+
29+
<===>
30+
================================================================================
31+
<===> alpha/in_gamut/named/input.scss
32+
a {b: hwb($channels: 180 30% 40% / 0.4)}
33+
34+
<===> alpha/in_gamut/named/output.css
35+
a {
36+
b: hsla(180, 33.3333333333%, 45%, 0.4);
37+
}
38+
39+
<===>
40+
================================================================================
41+
<===> alpha/in_gamut/parenthesized/input.scss
42+
// Extra parens shouldn't cause the slash to be forced into division.
43+
a {b: (hwb(180 30% 40% / 0.4))}
44+
45+
<===> alpha/in_gamut/parenthesized/output.css
46+
a {
47+
b: hsla(180, 33.3333333333%, 45%, 0.4);
48+
}
49+
50+
<===>
51+
================================================================================
52+
<===> alpha/clamped/above/input.scss
53+
a {b: hwb(0 30% 40% / 1.1)}
54+
55+
<===> alpha/clamped/above/output.css
56+
a {
57+
b: hsl(0, 33.3333333333%, 45%);
58+
}
59+
60+
<===>
61+
================================================================================
62+
<===> alpha/clamped/below/input.scss
63+
a {b: hwb(0 30% 40% / -0.1)}
64+
65+
<===> alpha/clamped/below/output.css
66+
a {
67+
b: hsla(0, 33.3333333333%, 45%, 0);
68+
}
69+
70+
<===>
71+
================================================================================
72+
<===> alpha/missing/slash/input.scss
73+
a {b: hwb(0 30% 40% / none)}
74+
75+
<===> alpha/missing/slash/output.css
76+
a {
77+
b: hwb(0deg 30% 40% / none);
78+
}
79+
80+
<===>
81+
================================================================================
82+
<===> alpha/missing/slash_list/input.scss
83+
@use 'sass:list';
84+
a {b: hwb(list.slash(0 30% 40%, none))}
85+
86+
<===> alpha/missing/slash_list/output.css
87+
a {
88+
b: hwb(0deg 30% 40% / none);
89+
}
90+
91+
<===>
92+
================================================================================
93+
<===> no_alpha/input.scss
94+
a {b: hwb(180 30% 40%)}
95+
96+
<===> no_alpha/output.css
97+
a {
98+
b: hsl(180, 33.3333333333%, 45%);
99+
}
100+
101+
<===>
102+
================================================================================
103+
<===> named/input.scss
104+
a {b: hwb($channels: 180 30% 40% / 0.4)}
105+
106+
<===> named/output.css
107+
a {
108+
b: hsla(180, 33.3333333333%, 45%, 0.4);
109+
}
110+
111+
<===>
112+
================================================================================
113+
<===> missing/hue/input.scss
114+
a {b: hwb(none 30% 40%)}
115+
116+
<===> missing/hue/output.css
117+
a {
118+
b: hwb(none 30% 40%);
119+
}
120+
121+
<===>
122+
================================================================================
123+
<===> missing/whiteness/input.scss
124+
a {b: hwb(0 none 40%)}
125+
126+
<===> missing/whiteness/output.css
127+
a {
128+
b: hwb(0deg none 40%);
129+
}
130+
131+
<===>
132+
================================================================================
133+
<===> missing/blackness/input.scss
134+
a {b: hwb(0 30% none)}
135+
136+
<===> missing/blackness/output.css
137+
a {
138+
b: hwb(0deg 30% none);
139+
}
140+
141+
<===>
142+
================================================================================
143+
<===> relative_color/static/alpha/input.scss
144+
a {b: hwb(from #aaa h w b / 25%)}
145+
146+
<===> relative_color/static/alpha/output.css
147+
a {
148+
b: hwb(from #aaa h w b/25%);
149+
}
150+
151+
<===>
152+
================================================================================
153+
<===> relative_color/static/no_alpha/input.scss
154+
a {b: hwb(from #aaa h w b)}
155+
156+
<===> relative_color/static/no_alpha/output.css
157+
a {
158+
b: hwb(from #aaa h w b);
159+
}
160+
161+
<===>
162+
================================================================================
163+
<===> relative_color/calc/alpha/input.scss
164+
a {b: hwb(from #aaa calc(h + 180deg) w b / 25%)}
165+
166+
<===> relative_color/calc/alpha/output.css
167+
a {
168+
b: hwb(from #aaa calc(h + 180deg) w b/25%);
169+
}
170+
171+
<===>
172+
================================================================================
173+
<===> relative_color/calc/no_alpha/input.scss
174+
a {b: hwb(from #aaa calc(h + 180deg) w b)}
175+
176+
<===> relative_color/calc/no_alpha/output.css
177+
a {
178+
b: hwb(from #aaa calc(h + 180deg) w b);
179+
}
180+
181+
<===>
182+
================================================================================
183+
<===> relative_color/var/alpha/input.scss
184+
a {b: hwb(from var(--c) h w b / 25%)}
185+
186+
<===> relative_color/var/alpha/output.css
187+
a {
188+
b: hwb(from var(--c) h w b/25%);
189+
}
190+
191+
<===>
192+
================================================================================
193+
<===> relative_color/var/no_alpha/input.scss
194+
a {b: hwb(from var(--c) h w b)}
195+
<===> relative_color/var/no_alpha/output.css
196+
a {
197+
b: hwb(from var(--c) h w b);
198+
}
199+
200+
<===>
201+
================================================================================
202+
<===> relative_color/different_case/alpha/input.scss
203+
a {b: hwb(From #aaa h w b / 25%)}
204+
205+
<===> relative_color/different_case/alpha/output.css
206+
a {
207+
b: hwb(From #aaa h w b/25%);
208+
}
209+
210+
<===>
211+
================================================================================
212+
<===> relative_color/different_case/no_alpha/input.scss
213+
a {b: hwb(From #aaa h w b)}
214+
215+
<===> relative_color/different_case/no_alpha/output.css
216+
a {
217+
b: hwb(From #aaa h w b);
218+
}
219+
220+
<===>
221+
================================================================================
222+
<===> relative_color/slash_list_alpha/input.scss
223+
@use "sass:list";
224+
a {b: hwb(list.slash(from #aaa h w b, 25%))}
225+
226+
<===> relative_color/slash_list_alpha/output.css
227+
a {
228+
b: hwb(from #aaa h w b / 25%);
229+
}
230+
231+
<===>
232+
================================================================================
233+
<===> relative_color/error/options.yml
234+
:todo:
235+
- dart-sass
236+
237+
<===>
238+
================================================================================
239+
<===> relative_color/error/quoted/alpha/input.scss
240+
a {b: hwb("from" #aaa h w b / 25%)}
241+
242+
<===> relative_color/error/quoted/alpha/error
243+
Error: Only 3 elements allowed, but 5 were passed.
244+
,
245+
1 | a {b: hwb("from" #aaa h w b / 25%)}
246+
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
247+
'
248+
input.scss 1:7 root stylesheet
249+
250+
<===>
251+
================================================================================
252+
<===> relative_color/error/quoted/no_alpha/input.scss
253+
a {b: hwb("from" #aaa h w b)}
254+
255+
<===> relative_color/error/quoted/no_alpha/error
256+
Error: Only 3 elements allowed, but 5 were passed.
257+
,
258+
1 | a {b: hwb("from" #aaa h w b)}
259+
| ^^^^^^^^^^^^^^^^^^^^^^
260+
'
261+
input.scss 1:7 root stylesheet
262+
263+
<===>
264+
================================================================================
265+
<===> relative_color/error/wrong_keyword/alpha/input.scss
266+
a {b: hwb(c #aaa h w b / 25%)}
267+
268+
<===> relative_color/error/wrong_keyword/alpha/error
269+
Error: Only 3 elements allowed, but 5 were passed.
270+
,
271+
1 | a {b: hwb(c #aaa h w b / 25%)}
272+
| ^^^^^^^^^^^^^^^^^^^^^^^
273+
'
274+
input.scss 1:7 root stylesheet
275+
276+
<===>
277+
================================================================================
278+
<===> relative_color/error/wrong_keyword/no_alpha/input.scss
279+
a {b: hwb(c #aaa h w b)}
280+
281+
<===> relative_color/error/wrong_keyword/no_alpha/error
282+
Error: Only 3 elements allowed, but 5 were passed.
283+
,
284+
1 | a {b: hwb(c #aaa h w b)}
285+
| ^^^^^^^^^^^^^^^^^
286+
'
287+
input.scss 1:7 root stylesheet
288+
289+

‎spec/core_functions/color/hwb/one_arg.hrx

+2
Original file line numberDiff line numberDiff line change
@@ -244,3 +244,5 @@ Error: Only 3 elements allowed, but 5 were passed.
244244
| ^^^^^^^^^^^^^^^^^
245245
'
246246
input.scss 1:7 root stylesheet
247+
248+

‎spec/core_functions/color/rgb/one_arg/alpha.hrx

+21
Original file line numberDiff line numberDiff line change
@@ -154,3 +154,24 @@ a {b: rgb(list.slash(0 255 127, 0))}
154154
a {
155155
b: rgba(0, 255, 127, 0);
156156
}
157+
158+
<===>
159+
================================================================================
160+
<===> missing/slash/input.scss
161+
a {b: rgb(0 255 127 / none)}
162+
163+
<===> missing/slash/output.css
164+
a {
165+
b: rgb(0 255 127 / none);
166+
}
167+
168+
<===>
169+
================================================================================
170+
<===> missing/slash_list/input.scss
171+
@use 'sass:list';
172+
a {b: rgb(list.slash(0 255 127, none))}
173+
174+
<===> missing/slash_list/output.css
175+
a {
176+
b: rgb(0 255 127 / none);
177+
}

0 commit comments

Comments
 (0)