diff --git a/src/lib/constants.ts b/src/lib/constants.ts index 36d94e1..638b8d7 100644 --- a/src/lib/constants.ts +++ b/src/lib/constants.ts @@ -26,7 +26,8 @@ export const FORMATS: ColorFormatId[] = [ export type ColorGamutId = 'srgb' | 'p3' | 'rec2020'; -export const GAMUTS: { name: string; format: ColorGamutId }[] = [ +export const GAMUTS: { name: string; format: ColorGamutId | null }[] = [ + { name: 'None', format: null }, { name: 'sRGB', format: 'srgb' }, { name: 'P3', format: 'p3' }, { name: 'Rec2020', format: 'rec2020' }, diff --git a/src/lib/utils.ts b/src/lib/utils.ts index e1f77d5..43fb2c7 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -47,7 +47,7 @@ export const sliderGradient = ({ const inGamutSteps: string[] = []; const stepWidth = 100 / (gradientSteps.length - 1); - if (channel === 'alpha') { + if (channel === 'alpha' || gamut === null) { return gradientSteps.map((c) => display(c)).join(', '); } diff --git a/test/lib/components/GamutSelect.spec.ts b/test/lib/components/GamutSelect.spec.ts new file mode 100644 index 0000000..eadaeb6 --- /dev/null +++ b/test/lib/components/GamutSelect.spec.ts @@ -0,0 +1,22 @@ +import { fireEvent, render } from '@testing-library/svelte'; +import { get } from 'svelte/store'; + +import Gamut from '$lib/components/GamutSelect.svelte'; +import { gamut, INITIAL_VALUES, reset } from '$lib/stores'; + +describe('Space', () => { + afterEach(() => { + reset(); + }); + + it('renders editable gamut select', async () => { + const { getByLabelText } = render(Gamut); + + expect(get(gamut)).toBe(INITIAL_VALUES.gamut); + + const select = getByLabelText('Gamut'); + await fireEvent.change(select, { target: { value: 'rec2020' } }); + + expect(get(gamut)).toBe('rec2020'); + }); +}); diff --git a/test/lib/components/SpaceSelect.spec.ts b/test/lib/components/SpaceSelect.spec.ts index 8979bc3..4697278 100644 --- a/test/lib/components/SpaceSelect.spec.ts +++ b/test/lib/components/SpaceSelect.spec.ts @@ -15,7 +15,7 @@ describe('Space', () => { expect(get(bg).space.id).toBe(INITIAL_VALUES.format); expect(get(fg).space.id).toBe(INITIAL_VALUES.format); - const select = getByLabelText('Color Format'); + const select = getByLabelText('Format'); await fireEvent.change(select, { target: { value: 'hsl' } }); expect(get(bg).space.id).toBe('hsl');