Add no gamut map, tests

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' },

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(', ');
   }
 

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');
+  });
+});

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');