mirror of
https://github.com/iconify/iconify.git
synced 2024-11-10 07:11:00 +00:00
576 lines
10 KiB
TypeScript
576 lines
10 KiB
TypeScript
/* eslint-disable @typescript-eslint/no-non-null-assertion */
|
|
import { stringToColor, compareColors, colorToString } from '../lib/colors';
|
|
|
|
describe('Colors', () => {
|
|
test('Keywords', () => {
|
|
// String to color
|
|
expect(stringToColor('red')).toEqual({
|
|
type: 'rgb',
|
|
r: 255,
|
|
g: 0,
|
|
b: 0,
|
|
alpha: 1,
|
|
});
|
|
expect(stringToColor('darkGray')).toEqual({
|
|
type: 'rgb',
|
|
r: 169,
|
|
g: 169,
|
|
b: 169,
|
|
alpha: 1,
|
|
});
|
|
expect(stringToColor('purple')).toEqual({
|
|
type: 'rgb',
|
|
r: 128,
|
|
g: 0,
|
|
b: 128,
|
|
alpha: 1,
|
|
});
|
|
|
|
// Special keywords
|
|
expect(stringToColor('None')).toEqual({
|
|
type: 'none',
|
|
});
|
|
expect(stringToColor('transparent')).toEqual({
|
|
type: 'transparent',
|
|
});
|
|
expect(stringToColor('currentColor')).toEqual({
|
|
type: 'current',
|
|
});
|
|
expect(stringToColor('inherit')).toBeNull();
|
|
|
|
// Color to string
|
|
expect(
|
|
colorToString({
|
|
type: 'rgb',
|
|
r: 255,
|
|
g: 0,
|
|
b: 0,
|
|
alpha: 1,
|
|
})
|
|
).toBe('#f00');
|
|
expect(
|
|
colorToString({
|
|
type: 'rgb',
|
|
r: 169,
|
|
g: 169,
|
|
b: 169,
|
|
alpha: 1,
|
|
})
|
|
).toBe('#a9a9a9');
|
|
expect(
|
|
colorToString({
|
|
type: 'rgb',
|
|
r: 128,
|
|
g: 0,
|
|
b: 128,
|
|
alpha: 1,
|
|
})
|
|
).toBe('#800080');
|
|
|
|
// Keywords
|
|
expect(
|
|
colorToString({
|
|
type: 'none',
|
|
})
|
|
).toBe('none');
|
|
expect(
|
|
colorToString({
|
|
type: 'current',
|
|
})
|
|
).toBe('currentColor');
|
|
|
|
expect(
|
|
colorToString({
|
|
type: 'transparent',
|
|
})
|
|
).toBe('transparent');
|
|
|
|
// Transparent
|
|
expect(
|
|
colorToString({
|
|
type: 'rgb',
|
|
r: 255,
|
|
g: 255,
|
|
b: 0,
|
|
alpha: 0,
|
|
})
|
|
).toBe('transparent');
|
|
|
|
// Function
|
|
expect(
|
|
colorToString({
|
|
type: 'function',
|
|
func: 'var',
|
|
value: '--foo',
|
|
})
|
|
).toBe('var(--foo)');
|
|
});
|
|
|
|
test('Hexadecimal', () => {
|
|
// 2 characters
|
|
expect(stringToColor('12')).toBeNull();
|
|
|
|
// 3 characters
|
|
expect(stringToColor('1a3')).toEqual({
|
|
type: 'rgb',
|
|
r: 17,
|
|
g: 170,
|
|
b: 51,
|
|
alpha: 1,
|
|
});
|
|
expect(
|
|
colorToString({
|
|
type: 'rgb',
|
|
r: 17,
|
|
g: 170,
|
|
b: 51,
|
|
alpha: 1,
|
|
})
|
|
).toBe('#1a3');
|
|
|
|
expect(stringToColor('g12')).toBeNull();
|
|
|
|
// 4 characters
|
|
expect(stringToColor('#1a3')).toEqual({
|
|
type: 'rgb',
|
|
r: 17,
|
|
g: 170,
|
|
b: 51,
|
|
alpha: 1,
|
|
});
|
|
expect(stringToColor('F123')).toEqual({
|
|
type: 'rgb',
|
|
r: 255,
|
|
g: 17,
|
|
b: 34,
|
|
alpha: 51 / 255,
|
|
});
|
|
expect(stringToColor('-123')).toBeNull();
|
|
expect(stringToColor('#zx2')).toBeNull();
|
|
|
|
// 5 characters
|
|
expect(stringToColor('12345')).toBeNull();
|
|
|
|
// 6 characters
|
|
expect(stringToColor('1234F6')).toEqual({
|
|
type: 'rgb',
|
|
r: 18,
|
|
g: 52,
|
|
b: 246,
|
|
alpha: 1,
|
|
});
|
|
expect(
|
|
colorToString({
|
|
type: 'rgb',
|
|
r: 18,
|
|
g: 52,
|
|
b: 246,
|
|
alpha: 1,
|
|
})
|
|
).toBe('#1234f6');
|
|
|
|
// 7 characters
|
|
expect(stringToColor('#11Aa33')).toEqual({
|
|
type: 'rgb',
|
|
r: 17,
|
|
g: 170,
|
|
b: 51,
|
|
alpha: 1,
|
|
});
|
|
expect(
|
|
colorToString({
|
|
type: 'rgb',
|
|
r: 17,
|
|
g: 170,
|
|
b: 51,
|
|
alpha: 1,
|
|
})
|
|
).toBe('#1a3');
|
|
|
|
expect(stringToColor('1234567')).toBeNull();
|
|
|
|
// 8 characters
|
|
expect(stringToColor('a51234f6')).toEqual({
|
|
type: 'rgb',
|
|
r: 165,
|
|
g: 18,
|
|
b: 52,
|
|
alpha: 246 / 255,
|
|
});
|
|
expect(
|
|
colorToString({
|
|
type: 'rgb',
|
|
r: 165,
|
|
g: 18,
|
|
b: 52,
|
|
alpha: 0.96,
|
|
})
|
|
).toBe('rgba(165, 18, 52, 0.96)');
|
|
|
|
// 9 characters
|
|
expect(stringToColor('#a51234f6')).toEqual({
|
|
type: 'rgb',
|
|
r: 165,
|
|
g: 18,
|
|
b: 52,
|
|
alpha: 246 / 255,
|
|
});
|
|
expect(stringToColor('123456789')).toBeNull();
|
|
|
|
// 10 characters
|
|
expect(stringToColor('1234567890')).toBeNull();
|
|
});
|
|
|
|
test('RGB', () => {
|
|
// Missing ')'
|
|
expect(stringToColor('rgb(0, 0, 0, 1')).toBeNull();
|
|
|
|
// Variable
|
|
expect(stringToColor('rgb(var(--foo), 0, 0, 1)')).toBeNull();
|
|
|
|
// Incorrect or missing '%'
|
|
expect(stringToColor('rgb(0%, 0, 0)')).toBeNull();
|
|
expect(stringToColor('rgb(0%, 0, 0%)')).toBeNull();
|
|
expect(stringToColor('rgb(0, 0%, 0%)')).toBeNull();
|
|
expect(stringToColor('rgb(0, 0, 0%)')).toBeNull();
|
|
|
|
// Simple rgb
|
|
expect(stringToColor('rgb(10, 20, 30)')).toEqual({
|
|
type: 'rgb',
|
|
r: 10,
|
|
g: 20,
|
|
b: 30,
|
|
alpha: 1,
|
|
});
|
|
expect(stringToColor('rgb(10 20 30)')).toEqual({
|
|
type: 'rgb',
|
|
r: 10,
|
|
g: 20,
|
|
b: 30,
|
|
alpha: 1,
|
|
});
|
|
expect(
|
|
colorToString({
|
|
type: 'rgb',
|
|
r: 10,
|
|
g: 20,
|
|
b: 30,
|
|
alpha: 1,
|
|
})
|
|
).toBe('#0a141e');
|
|
|
|
expect(stringToColor('rgba(12.5, 20, 30)')).toEqual({
|
|
type: 'rgb',
|
|
r: 12.5,
|
|
g: 20,
|
|
b: 30,
|
|
alpha: 1,
|
|
});
|
|
expect(
|
|
colorToString({
|
|
type: 'rgb',
|
|
r: 12.5,
|
|
g: 20,
|
|
b: 30,
|
|
alpha: 1,
|
|
})
|
|
).toBe('rgb(12.5, 20, 30)');
|
|
|
|
// Incorrect keyword, but accepted anyway
|
|
expect(stringToColor('rgb(10, 25, 30, .5)')).toEqual({
|
|
type: 'rgb',
|
|
r: 10,
|
|
g: 25,
|
|
b: 30,
|
|
alpha: 0.5,
|
|
});
|
|
expect(
|
|
colorToString({
|
|
type: 'rgb',
|
|
r: 10,
|
|
g: 25,
|
|
b: 30,
|
|
alpha: 0.5,
|
|
})
|
|
).toBe('rgba(10, 25, 30, 0.5)');
|
|
|
|
// Percentage in color
|
|
expect(stringToColor('rgba(100%, 50%, 20%)')).toEqual({
|
|
type: 'rgb',
|
|
r: 255,
|
|
g: 127.5,
|
|
b: 51,
|
|
alpha: 1,
|
|
});
|
|
|
|
// Percentage in alpha
|
|
expect(stringToColor('rgba(10, 20, 31, 50%)')).toEqual({
|
|
type: 'rgb',
|
|
r: 10,
|
|
g: 20,
|
|
b: 31,
|
|
alpha: 0.5,
|
|
});
|
|
});
|
|
|
|
test('HSL', () => {
|
|
// Too many parts
|
|
expect(stringToColor('hsl(0, 0, 0, 1, 2)')).toBeNull();
|
|
|
|
// Incorrect or missing '%'
|
|
expect(stringToColor('hsl(0%, 0%, 0%, 1)')).toBeNull();
|
|
expect(stringToColor('hsl(0%, 0, 0%, 1)')).toBeNull();
|
|
expect(stringToColor('hsl(0%, 0%, 0)')).toBeNull();
|
|
expect(stringToColor('hsl(0, 0%, 0)')).toBeNull();
|
|
expect(stringToColor('hsl(0, 0, 0%)')).toBeNull();
|
|
expect(stringToColor('hsl(0, 0, 0, 50%)')).toBeNull();
|
|
|
|
// Simple hsl
|
|
expect(stringToColor('hsl(10, 20%, 30%)')).toEqual({
|
|
type: 'hsl',
|
|
h: 10,
|
|
s: 20,
|
|
l: 30,
|
|
alpha: 1,
|
|
});
|
|
expect(stringToColor('hsl(11 22% 33%)')).toEqual({
|
|
type: 'hsl',
|
|
h: 11,
|
|
s: 22,
|
|
l: 33,
|
|
alpha: 1,
|
|
});
|
|
expect(
|
|
colorToString({
|
|
type: 'hsl',
|
|
h: 10,
|
|
s: 20,
|
|
l: 30,
|
|
alpha: 1,
|
|
})
|
|
).toBe('hsl(10, 20%, 30%)');
|
|
|
|
expect(stringToColor('hsla(90, 20%, 30%)')).toEqual({
|
|
type: 'hsl',
|
|
h: 90,
|
|
s: 20,
|
|
l: 30,
|
|
alpha: 1,
|
|
});
|
|
|
|
// Weird formatting
|
|
expect(stringToColor('HSLA ( 10 , 20% , 30% , .2 )')).toEqual({
|
|
type: 'hsl',
|
|
h: 10,
|
|
s: 20,
|
|
l: 30,
|
|
alpha: 0.2,
|
|
});
|
|
expect(
|
|
colorToString({
|
|
type: 'hsl',
|
|
h: 10,
|
|
s: 20,
|
|
l: 30,
|
|
alpha: 0.2,
|
|
})
|
|
).toBe('hsla(10, 20%, 30%, 0.2)');
|
|
|
|
// Floating numbers, percentage in alpha
|
|
expect(stringToColor('hsl(10.4, 20.7%, 30.1%, 84.5%)')).toEqual({
|
|
type: 'hsl',
|
|
h: 10.4,
|
|
s: 20.7,
|
|
l: 30.1,
|
|
alpha: 0.845,
|
|
});
|
|
expect(
|
|
colorToString({
|
|
type: 'hsl',
|
|
h: 10.4,
|
|
s: 20.7,
|
|
l: 30.1,
|
|
alpha: 0.845,
|
|
})
|
|
).toBe('hsla(10.4, 20.7%, 30.1%, 0.845)');
|
|
});
|
|
|
|
test('LAB', () => {
|
|
// Too many parts
|
|
expect(stringToColor('lab(10% 20 30 0.5)')).toBeNull();
|
|
|
|
// Incorrect or missing '%'
|
|
expect(stringToColor('lab(10%, 20%, 30%)')).toBeNull();
|
|
expect(stringToColor('lab(10%, 20, 30%)')).toBeNull();
|
|
expect(stringToColor('lab(10%, 20%, 30)')).toBeNull();
|
|
expect(stringToColor('lab(10, 20, 30)')).toBeNull();
|
|
|
|
// Simple lab
|
|
expect(stringToColor('lab(10%, 20, 30)')).toEqual({
|
|
type: 'lab',
|
|
l: 10,
|
|
a: 20,
|
|
b: 30,
|
|
alpha: 1,
|
|
});
|
|
expect(stringToColor('lab(11% 22 33 / 1)')).toEqual({
|
|
type: 'lab',
|
|
l: 11,
|
|
a: 22,
|
|
b: 33,
|
|
alpha: 1,
|
|
});
|
|
expect(
|
|
colorToString({
|
|
type: 'lab',
|
|
l: 10,
|
|
a: 20,
|
|
b: 30,
|
|
alpha: 1,
|
|
})
|
|
).toBe('lab(10% 20 30)');
|
|
|
|
// Floating numbers, percentage in alpha, commas
|
|
expect(stringToColor('lab(10.4%, 20.7, 30.1 / 84.5%)')).toEqual({
|
|
type: 'lab',
|
|
l: 10.4,
|
|
a: 20.7,
|
|
b: 30.1,
|
|
alpha: 0.845,
|
|
});
|
|
expect(
|
|
colorToString({
|
|
type: 'lab',
|
|
l: 10.4,
|
|
a: 20.7,
|
|
b: 30.1,
|
|
alpha: 0.845,
|
|
})
|
|
).toBe('lab(10.4% 20.7 30.1 / 0.845)');
|
|
});
|
|
|
|
test('LCH', () => {
|
|
// Too many parts
|
|
expect(stringToColor('lch(10% 20 30 0.5)')).toBeNull();
|
|
|
|
// Incorrect or missing '%'
|
|
expect(stringToColor('lch(10%, 20%, 30%)')).toBeNull();
|
|
expect(stringToColor('lch(10%, 20, 30%)')).toBeNull();
|
|
expect(stringToColor('lch(10%, 20%, 30)')).toBeNull();
|
|
expect(stringToColor('lch(10, 20, 30)')).toBeNull();
|
|
|
|
// Simple lch
|
|
expect(stringToColor('lch(10%, 20, 30)')).toEqual({
|
|
type: 'lch',
|
|
l: 10,
|
|
c: 20,
|
|
h: 30,
|
|
alpha: 1,
|
|
});
|
|
expect(stringToColor('lch(11% 22 33 / 1)')).toEqual({
|
|
type: 'lch',
|
|
l: 11,
|
|
c: 22,
|
|
h: 33,
|
|
alpha: 1,
|
|
});
|
|
expect(
|
|
colorToString({
|
|
type: 'lch',
|
|
l: 10,
|
|
c: 20,
|
|
h: 30,
|
|
alpha: 1,
|
|
})
|
|
).toBe('lch(10% 20 30)');
|
|
|
|
// Floating numbers, percentage in alpha, commas
|
|
expect(stringToColor('lch(10.4%, 20.7, 30.1 / 84.5%)')).toEqual({
|
|
type: 'lch',
|
|
l: 10.4,
|
|
c: 20.7,
|
|
h: 30.1,
|
|
alpha: 0.845,
|
|
});
|
|
expect(
|
|
colorToString({
|
|
type: 'lch',
|
|
l: 10.4,
|
|
c: 20.7,
|
|
h: 30.1,
|
|
alpha: 0.845,
|
|
})
|
|
).toBe('lch(10.4% 20.7 30.1 / 0.845)');
|
|
});
|
|
|
|
test('Functions', () => {
|
|
// Missing ')'
|
|
expect(stringToColor('var(--foo')).toBeNull();
|
|
|
|
// Valid functions
|
|
expect(stringToColor('var(--foo)')).toEqual({
|
|
type: 'function',
|
|
func: 'var',
|
|
value: '--foo',
|
|
});
|
|
expect(stringToColor('url(#a)')).toEqual({
|
|
type: 'function',
|
|
func: 'url',
|
|
value: '#a',
|
|
});
|
|
});
|
|
|
|
test('Compare colors', () => {
|
|
// Identical items
|
|
expect(
|
|
compareColors(
|
|
stringToColor('var(--foo)')!,
|
|
stringToColor('var(--foo)')!
|
|
)
|
|
).toBe(true);
|
|
|
|
// Black colors
|
|
expect(
|
|
compareColors(
|
|
stringToColor('rgb(0, 0, 0, 1)')!,
|
|
stringToColor('#000')!
|
|
)
|
|
).toBe(true);
|
|
|
|
expect(
|
|
compareColors(
|
|
stringToColor('rgb(0, 0, 0, 1)')!,
|
|
stringToColor('hsl(100, 0%, 0%)')!
|
|
)
|
|
).toBe(true);
|
|
|
|
// Transparent
|
|
expect(
|
|
compareColors(
|
|
stringToColor('rgb(0, 255, 0, 0)')!,
|
|
stringToColor('hsl(100, 0%, 0%, 0)')!
|
|
)
|
|
).toBe(true);
|
|
expect(
|
|
compareColors(
|
|
stringToColor('transparent')!,
|
|
stringToColor('hsl(80, 20%, 50%, 0)')!
|
|
)
|
|
).toBe(true);
|
|
expect(
|
|
compareColors(
|
|
stringToColor('transparent')!,
|
|
stringToColor('#f8a0')!
|
|
)
|
|
).toBe(true);
|
|
|
|
// Mismatch
|
|
expect(
|
|
compareColors(
|
|
stringToColor('transparent')!,
|
|
stringToColor('hsl(100, 0%, 0%, .1)')!
|
|
)
|
|
).toBe(false);
|
|
});
|
|
});
|