Skip to content

Commit 22b4305

Browse files
bhoughbhough
committed
chore(hsl/rgb): update space-separated color tests
1 parent f35d317 commit 22b4305

File tree

3 files changed

+80
-12
lines changed

3 files changed

+80
-12
lines changed

‎src/color/parseToRgb.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@ const hexRegex = /^#[a-fA-F0-9]{6}$/
99
const hexRgbaRegex = /^#[a-fA-F0-9]{8}$/
1010
const reducedHexRegex = /^#[a-fA-F0-9]{3}$/
1111
const reducedRgbaHexRegex = /^#[a-fA-F0-9]{4}$/
12-
const rgbRegex = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i
13-
const rgbaRegex = /^rgb(?:a)?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,|\/)\s*([-+]?[0-9]*[.]?[0-9]+)\s*\)$/i
14-
const hslRegex = /^hsl\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*[,]?\s*(\d{1,3}[.]?[0-9]?)%\s*[,]?\s*(\d{1,3}[.]?[0-9]?)%\s*\)$/i
15-
const hslaRegex = /^hsl(?:a)\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*[,]?\s*(\d{1,3}[.]?[0-9]?)%\s*[,]?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,|\/)\s*([-+]?[0-9]*[.]?[0-9]+)\s*\)$/i
12+
const rgbRegex = /^rgb\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*\)$/i
13+
const rgbaRegex = /^rgb(?:a)?\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,|\/)\s*([-+]?[0-9]*[.]?[0-9]+)\s*\)$/i
14+
const hslRegex = /^hsl\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*\)$/i
15+
const hslaRegex = /^hsl(?:a)?\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*[,]?\s*(\d{1,3}[.]?[0-9]?)%\s*[,]?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,|\/)\s*([-+]?[0-9]*[.]?[0-9]+)\s*\)$/i
1616

1717
/**
1818
* Returns an RgbColor or RgbaColor object. This utility function is only useful

‎src/color/test/parseToHsl.test.js

+45-4
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,18 @@ describe('parseToHsl', () => {
4242
lightness: 0.6313725490196078,
4343
saturation: 1,
4444
})
45+
expect(parseToHsl('rgba(174 67 255 / 0.6)')).toEqual({
46+
alpha: 0.6,
47+
hue: 274.1489361702128,
48+
lightness: 0.6313725490196078,
49+
saturation: 1,
50+
})
51+
expect(parseToHsl('rgb(174 67 255 / 0.6)')).toEqual({
52+
alpha: 0.6,
53+
hue: 274.1489361702128,
54+
lightness: 0.6313725490196078,
55+
saturation: 1,
56+
})
4557
})
4658

4759
it('should parse a rgb color representation', () => {
@@ -50,6 +62,11 @@ describe('parseToHsl', () => {
5062
lightness: 0.6313725490196078,
5163
saturation: 1,
5264
})
65+
expect(parseToHsl('rgb(174 67 255)')).toEqual({
66+
hue: 274.1489361702128,
67+
lightness: 0.6313725490196078,
68+
saturation: 1,
69+
})
5370
})
5471

5572
it('should parse a hsl color representation', () => {
@@ -58,7 +75,7 @@ describe('parseToHsl', () => {
5875
lightness: 0.0392156862745098,
5976
saturation: 0.1,
6077
})
61-
expect(parseToHsl('hsl(210deg,10%,4%)')).toEqual({
78+
expect(parseToHsl('hsl(210deg 10% 4%)')).toEqual({
6279
hue: 210,
6380
lightness: 0.0392156862745098,
6481
saturation: 0.1,
@@ -71,7 +88,7 @@ describe('parseToHsl', () => {
7188
lightness: 0.0392156862745098,
7289
saturation: 0.1,
7390
})
74-
expect(parseToHsl('hsl(210.99deg,10%,4%)')).toEqual({
91+
expect(parseToHsl('hsl(210.99deg 10% 4%)')).toEqual({
7592
hue: 210,
7693
lightness: 0.0392156862745098,
7794
saturation: 0.1,
@@ -111,7 +128,13 @@ describe('parseToHsl', () => {
111128
lightness: 0.4,
112129
saturation: 0.09803921568627451,
113130
})
114-
expect(parseToHsl('hsla(210deg,10%,40%,0.75)')).toEqual({
131+
expect(parseToHsl('hsla(210deg 10% 40% / 0.75)')).toEqual({
132+
alpha: 0.75,
133+
hue: 209.99999999999997,
134+
lightness: 0.4,
135+
saturation: 0.09803921568627451,
136+
})
137+
expect(parseToHsl('hsl(210deg 10% 40% / 0.75)')).toEqual({
115138
alpha: 0.75,
116139
hue: 209.99999999999997,
117140
lightness: 0.4,
@@ -126,7 +149,13 @@ describe('parseToHsl', () => {
126149
lightness: 0.4,
127150
saturation: 0.09803921568627451,
128151
})
129-
expect(parseToHsl('hsla(210.99deg,10%,40%,0.75)')).toEqual({
152+
expect(parseToHsl('hsla(210.99deg 10% 40% / 0.75)')).toEqual({
153+
alpha: 0.75,
154+
hue: 209.99999999999997,
155+
lightness: 0.4,
156+
saturation: 0.09803921568627451,
157+
})
158+
expect(parseToHsl('hsl(210.99deg 10% 40% / 0.75)')).toEqual({
130159
alpha: 0.75,
131160
hue: 209.99999999999997,
132161
lightness: 0.4,
@@ -147,6 +176,12 @@ describe('parseToHsl', () => {
147176
lightness: 0.4,
148177
saturation: 0.09803921568627451,
149178
})
179+
expect(parseToHsl('hsl(210deg 10% 40% / 0.75)')).toEqual({
180+
alpha: 0.75,
181+
hue: 209.99999999999997,
182+
lightness: 0.4,
183+
saturation: 0.09803921568627451,
184+
})
150185
})
151186

152187
it('should parse a hsla 4 space-separated color representation with a float', () => {
@@ -162,6 +197,12 @@ describe('parseToHsl', () => {
162197
lightness: 0.4,
163198
saturation: 0.09803921568627451,
164199
})
200+
expect(parseToHsl('hsl(210.99deg 10% 40% / 0.75)')).toEqual({
201+
alpha: 0.75,
202+
hue: 209.99999999999997,
203+
lightness: 0.4,
204+
saturation: 0.09803921568627451,
205+
})
165206
})
166207

167208
it('should throw an error if an invalid color string is provided', () => {

‎src/color/test/parseToRgb.test.js

+31-4
Original file line numberDiff line numberDiff line change
@@ -42,13 +42,13 @@ describe('parseToRgb', () => {
4242
green: 67,
4343
red: 174,
4444
})
45-
expect(parseToRgb('rgba(174, 67, 255 / 0.6)')).toEqual({
45+
expect(parseToRgb('rgba(174 67 255 / 0.6)')).toEqual({
4646
alpha: 0.6,
4747
blue: 255,
4848
green: 67,
4949
red: 174,
5050
})
51-
expect(parseToRgb('rgb(174,67,255 / 0.6)')).toEqual({
51+
expect(parseToRgb('rgb(174 67 255 / 0.6)')).toEqual({
5252
alpha: 0.6,
5353
blue: 255,
5454
green: 67,
@@ -62,6 +62,11 @@ describe('parseToRgb', () => {
6262
green: 67,
6363
red: 174,
6464
})
65+
expect(parseToRgb('rgb(174 67 255)')).toEqual({
66+
blue: 255,
67+
green: 67,
68+
red: 174,
69+
})
6570
})
6671

6772
it('should parse a hsl color representation', () => {
@@ -70,6 +75,11 @@ describe('parseToRgb', () => {
7075
green: 10,
7176
red: 9,
7277
})
78+
expect(parseToRgb('hsl(210 10% 4%)')).toEqual({
79+
blue: 11,
80+
green: 10,
81+
red: 9,
82+
})
7383
})
7484

7585
it('should parse a hsl color representation with decimal values', () => {
@@ -78,6 +88,11 @@ describe('parseToRgb', () => {
7888
green: 33,
7989
red: 28,
8090
})
91+
expect(parseToRgb('hsl(210 16.4% 13.2%)')).toEqual({
92+
blue: 38,
93+
green: 33,
94+
red: 28,
95+
})
8196
})
8297

8398
it('should parse a hsla color representation', () => {
@@ -87,7 +102,13 @@ describe('parseToRgb', () => {
87102
green: 102,
88103
red: 92,
89104
})
90-
expect(parseToRgb('hsla(210, 10%, 40% / 0.75)')).toEqual({
105+
expect(parseToRgb('hsla(210 10% 40% / 0.75)')).toEqual({
106+
alpha: 0.75,
107+
blue: 112,
108+
green: 102,
109+
red: 92,
110+
})
111+
expect(parseToRgb('hsl(210 10% 40% / 0.75)')).toEqual({
91112
alpha: 0.75,
92113
blue: 112,
93114
green: 102,
@@ -102,7 +123,13 @@ describe('parseToRgb', () => {
102123
green: 0,
103124
red: 0,
104125
})
105-
expect(parseToRgb('hsla(210, 0.5%, 0.5% / 1.0)')).toEqual({
126+
expect(parseToRgb('hsla(210 0.5% 0.5% / 1.0)')).toEqual({
127+
alpha: 1,
128+
blue: 0,
129+
green: 0,
130+
red: 0,
131+
})
132+
expect(parseToRgb('hsl(210 0.5% 0.5% / 1.0)')).toEqual({
106133
alpha: 1,
107134
blue: 0,
108135
green: 0,

0 commit comments

Comments
 (0)