Skip to content

Commit

Permalink
chore(hsl/rgb): update space-separated color tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@bhough
bhough committed Apr 3, 2022
1 parent f35d317 commit 22b4305
Show file tree
Hide file tree
Showing 3 changed files with 80 additions and 12 deletions.
8 changes: 4 additions & 4 deletions src/color/parseToRgb.js
View file
Expand Up @@ -9,10 +9,10 @@ const hexRegex = /^#[a-fA-F0-9]{6}$/
const hexRgbaRegex = /^#[a-fA-F0-9]{8}$/
const reducedHexRegex = /^#[a-fA-F0-9]{3}$/
const reducedRgbaHexRegex = /^#[a-fA-F0-9]{4}$/
const rgbRegex = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i
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
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
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
const rgbRegex = /^rgb\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*\)$/i
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
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
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

/**
* Returns an RgbColor or RgbaColor object. This utility function is only useful
Expand Down
49 changes: 45 additions & 4 deletions src/color/test/parseToHsl.test.js
View file
Expand Up @@ -42,6 +42,18 @@ describe('parseToHsl', () => {
lightness: 0.6313725490196078,
saturation: 1,
})
expect(parseToHsl('rgba(174 67 255 / 0.6)')).toEqual({
alpha: 0.6,
hue: 274.1489361702128,
lightness: 0.6313725490196078,
saturation: 1,
})
expect(parseToHsl('rgb(174 67 255 / 0.6)')).toEqual({
alpha: 0.6,
hue: 274.1489361702128,
lightness: 0.6313725490196078,
saturation: 1,
})
})

it('should parse a rgb color representation', () => {
Expand All @@ -50,6 +62,11 @@ describe('parseToHsl', () => {
lightness: 0.6313725490196078,
saturation: 1,
})
expect(parseToHsl('rgb(174 67 255)')).toEqual({
hue: 274.1489361702128,
lightness: 0.6313725490196078,
saturation: 1,
})
})

it('should parse a hsl color representation', () => {
Expand All @@ -58,7 +75,7 @@ describe('parseToHsl', () => {
lightness: 0.0392156862745098,
saturation: 0.1,
})
expect(parseToHsl('hsl(210deg,10%,4%)')).toEqual({
expect(parseToHsl('hsl(210deg 10% 4%)')).toEqual({
hue: 210,
lightness: 0.0392156862745098,
saturation: 0.1,
Expand All @@ -71,7 +88,7 @@ describe('parseToHsl', () => {
lightness: 0.0392156862745098,
saturation: 0.1,
})
expect(parseToHsl('hsl(210.99deg,10%,4%)')).toEqual({
expect(parseToHsl('hsl(210.99deg 10% 4%)')).toEqual({
hue: 210,
lightness: 0.0392156862745098,
saturation: 0.1,
Expand Down Expand Up @@ -111,7 +128,13 @@ describe('parseToHsl', () => {
lightness: 0.4,
saturation: 0.09803921568627451,
})
expect(parseToHsl('hsla(210deg,10%,40%,0.75)')).toEqual({
expect(parseToHsl('hsla(210deg 10% 40% / 0.75)')).toEqual({
alpha: 0.75,
hue: 209.99999999999997,
lightness: 0.4,
saturation: 0.09803921568627451,
})
expect(parseToHsl('hsl(210deg 10% 40% / 0.75)')).toEqual({
alpha: 0.75,
hue: 209.99999999999997,
lightness: 0.4,
Expand All @@ -126,7 +149,13 @@ describe('parseToHsl', () => {
lightness: 0.4,
saturation: 0.09803921568627451,
})
expect(parseToHsl('hsla(210.99deg,10%,40%,0.75)')).toEqual({
expect(parseToHsl('hsla(210.99deg 10% 40% / 0.75)')).toEqual({
alpha: 0.75,
hue: 209.99999999999997,
lightness: 0.4,
saturation: 0.09803921568627451,
})
expect(parseToHsl('hsl(210.99deg 10% 40% / 0.75)')).toEqual({
alpha: 0.75,
hue: 209.99999999999997,
lightness: 0.4,
Expand All @@ -147,6 +176,12 @@ describe('parseToHsl', () => {
lightness: 0.4,
saturation: 0.09803921568627451,
})
expect(parseToHsl('hsl(210deg 10% 40% / 0.75)')).toEqual({
alpha: 0.75,
hue: 209.99999999999997,
lightness: 0.4,
saturation: 0.09803921568627451,
})
})

it('should parse a hsla 4 space-separated color representation with a float', () => {
Expand All @@ -162,6 +197,12 @@ describe('parseToHsl', () => {
lightness: 0.4,
saturation: 0.09803921568627451,
})
expect(parseToHsl('hsl(210.99deg 10% 40% / 0.75)')).toEqual({
alpha: 0.75,
hue: 209.99999999999997,
lightness: 0.4,
saturation: 0.09803921568627451,
})
})

it('should throw an error if an invalid color string is provided', () => {
Expand Down
35 changes: 31 additions & 4 deletions src/color/test/parseToRgb.test.js
View file
Expand Up @@ -42,13 +42,13 @@ describe('parseToRgb', () => {
green: 67,
red: 174,
})
expect(parseToRgb('rgba(174, 67, 255 / 0.6)')).toEqual({
expect(parseToRgb('rgba(174 67 255 / 0.6)')).toEqual({
alpha: 0.6,
blue: 255,
green: 67,
red: 174,
})
expect(parseToRgb('rgb(174,67,255 / 0.6)')).toEqual({
expect(parseToRgb('rgb(174 67 255 / 0.6)')).toEqual({
alpha: 0.6,
blue: 255,
green: 67,
Expand All @@ -62,6 +62,11 @@ describe('parseToRgb', () => {
green: 67,
red: 174,
})
expect(parseToRgb('rgb(174 67 255)')).toEqual({
blue: 255,
green: 67,
red: 174,
})
})

it('should parse a hsl color representation', () => {
Expand All @@ -70,6 +75,11 @@ describe('parseToRgb', () => {
green: 10,
red: 9,
})
expect(parseToRgb('hsl(210 10% 4%)')).toEqual({
blue: 11,
green: 10,
red: 9,
})
})

it('should parse a hsl color representation with decimal values', () => {
Expand All @@ -78,6 +88,11 @@ describe('parseToRgb', () => {
green: 33,
red: 28,
})
expect(parseToRgb('hsl(210 16.4% 13.2%)')).toEqual({
blue: 38,
green: 33,
red: 28,
})
})

it('should parse a hsla color representation', () => {
Expand All @@ -87,7 +102,13 @@ describe('parseToRgb', () => {
green: 102,
red: 92,
})
expect(parseToRgb('hsla(210, 10%, 40% / 0.75)')).toEqual({
expect(parseToRgb('hsla(210 10% 40% / 0.75)')).toEqual({
alpha: 0.75,
blue: 112,
green: 102,
red: 92,
})
expect(parseToRgb('hsl(210 10% 40% / 0.75)')).toEqual({
alpha: 0.75,
blue: 112,
green: 102,
Expand All @@ -102,7 +123,13 @@ describe('parseToRgb', () => {
green: 0,
red: 0,
})
expect(parseToRgb('hsla(210, 0.5%, 0.5% / 1.0)')).toEqual({
expect(parseToRgb('hsla(210 0.5% 0.5% / 1.0)')).toEqual({
alpha: 1,
blue: 0,
green: 0,
red: 0,
})
expect(parseToRgb('hsl(210 0.5% 0.5% / 1.0)')).toEqual({
alpha: 1,
blue: 0,
green: 0,
Expand Down

0 comments on commit 22b4305

Please sign in to comment.