Update gamut-mapping specs to use the new method parameter (#1977)

sass · Apr 19, 2024 · 1760404 · 1760404
1 parent 5cc6620
commit 1760404
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 63 deletions.
diff --git a/js-api-spec/value/color/color-4-conversions.test.ts b/js-api-spec/value/color/color-4-conversions.test.ts
@@ -7,6 +7,7 @@
 import {SassColor} from 'sass';
 import type {
   ColorSpaceXyz,
+  GamutMapMethod,
   HueInterpolationMethod,
   KnownColorSpace,
 } from 'sass';
@@ -207,12 +208,23 @@ describe('Color 4 SassColors Conversions', () => {
       });
 
       describe('toGamut', () => {
-        space.gamutExamples.forEach(([input, output]) => {
-          it(`in own space, ${input} -> ${output}`, () => {
-            const res = space.constructor(...input).toGamut();
-            expect(res).toLooselyEqualColor(space.constructor(...output));
-          });
-        });
+        for (const [input, outputs] of space.gamutExamples) {
+          const outputsObj =
+            outputs instanceof Array
+              ? {clip: outputs, 'local-minde': outputs}
+              : outputs;
+
+          for (const [method, output] of Object.entries(outputsObj)) {
+            describe(method, () => {
+              it(`in own space, ${input} -> ${output}`, () => {
+                const res = space
+                  .constructor(...input)
+                  .toGamut({method: method as GamutMapMethod});
+                expect(res).toLooselyEqualColor(space.constructor(...output));
+              });
+            });
+          }
+        }
       });
     });
   });

diff --git a/js-api-spec/value/color/color-4-nonparametizable.test.ts b/js-api-spec/value/color/color-4-nonparametizable.test.ts
@@ -9,41 +9,64 @@ import type {
   ChannelName,
   ChannelNameXyz,
   ColorSpaceXyz,
+  GamutMapMethod,
   KnownColorSpace,
 } from 'sass';
 
-import {skipForImpl} from '../../utils';
 import * as constructors from './constructors';
 
 describe('Color 4 SassColors Non-parametizable', () => {
-  // TODO: Waiting on new ColorJS release to fix `toGamut` mapping:
-  // https://github.com/LeaVerou/color.js/pull/344
-  skipForImpl('sass-embedded', () => {
-    it('toGamut with space', () => {
-      const cases: [SassColor, KnownColorSpace, SassColor][] = [
-        [
-          constructors.oklch(0.8, 2, 150),
-          'display-p3',
-          constructors.oklch(
-            0.8011972524233195,
-            0.31025433677129627,
-            149.69615588210382
+  describe('toGamut', () => {
+    const cases: [
+      SassColor,
+      KnownColorSpace,
+      Record<GamutMapMethod, SassColor>
+    ][] = [
+      [
+        constructors.oklch(0.8, 2, 150),
+        'display-p3',
+        {
+          'local-minde': constructors.oklch(
+            0.80777568417,
+            0.3262439045,
+            148.1202740275
           ),
-        ],
-        [
-          constructors.oklch(0.8, 2, 150),
-          'srgb',
-          constructors.oklch(
-            0.8086628549532134,
-            0.23694508940439973,
-            147.5313920153958
+          clip: constructors.oklch(
+            0.848829286984,
+            0.3685278106,
+            145.6449503702
           ),
-        ],
-      ];
-      cases.forEach(([input, space, output]) => {
-        expect(input.toGamut(space)).toLooselyEqualColor(output);
+        },
+      ],
+      [
+        constructors.oklch(0.8, 2, 150),
+        'srgb',
+        {
+          'local-minde': constructors.oklch(
+            0.809152570179,
+            0.2379027576,
+            147.4021477687
+          ),
+          clip: constructors.oklch(
+            0.866439611536,
+            0.2948272403,
+            142.4953388878
+          ),
+        },
+      ],
+    ];
+
+    for (const [input, space, outputs] of cases) {
+      describe(`with space ${space}`, () => {
+        for (const [method, output] of Object.entries(outputs)) {
+          it(`with method ${method}`, () => {
+            expect(
+              input.toGamut({space, method: method as GamutMapMethod})
+            ).toLooselyEqualColor(output);
+          });
+        }
       });
-    });
+    }
   });
 
   it('channel with space specified, missing returns 0', () => {

diff --git a/js-api-spec/value/color/spaces.ts b/js-api-spec/value/color/spaces.ts
@@ -12,6 +12,7 @@ import type {
   ChannelNameLch,
   ChannelNameRgb,
   ChannelNameXyz,
+  GamutMapMethod,
   KnownColorSpace,
 } from 'sass';
 
@@ -31,7 +32,15 @@ export const spaces: {
     hasPowerless?: boolean;
     hasOutOfGamut: boolean;
     // input, output in own space, output in p3
-    gamutExamples: [[number, number, number], [number, number, number]][];
+    gamutExamples: Array<
+      [
+        [number, number, number],
+        (
+          | [number, number, number]
+          | Record<GamutMapMethod, [number, number, number]>
+        )
+      ]
+    >;
   };
 } = {
   lab: {
@@ -135,10 +144,7 @@ export const spaces: {
     ],
     hasOutOfGamut: true,
     gamutExamples: [
-      [
-        [0.5, 2, 2],
-        [1, 1, 1],
-      ],
+      [[0.5, 2, 2], {clip: [0.5, 1, 1], 'local-minde': [1, 1, 1]}],
     ],
   },
   'srgb-linear': {
@@ -156,10 +162,7 @@ export const spaces: {
     ],
     hasOutOfGamut: true,
     gamutExamples: [
-      [
-        [0.5, 2, 2],
-        [1, 1, 1],
-      ],
+      [[0.5, 2, 2], {clip: [0.5, 1, 1], 'local-minde': [1, 1, 1]}],
     ],
   },
   'display-p3': {
@@ -177,10 +180,7 @@ export const spaces: {
     ],
     hasOutOfGamut: true,
     gamutExamples: [
-      [
-        [0.5, 2, 2],
-        [1, 1, 1],
-      ],
+      [[0.5, 2, 2], {clip: [0.5, 1, 1], 'local-minde': [1, 1, 1]}],
     ],
   },
   'a98-rgb': {
@@ -198,10 +198,7 @@ export const spaces: {
     ],
     hasOutOfGamut: true,
     gamutExamples: [
-      [
-        [0.5, 2, 2],
-        [1, 1, 1],
-      ],
+      [[0.5, 2, 2], {clip: [0.5, 1, 1], 'local-minde': [1, 1, 1]}],
     ],
   },
   'prophoto-rgb': {
@@ -219,10 +216,7 @@ export const spaces: {
     ],
     hasOutOfGamut: true,
     gamutExamples: [
-      [
-        [0.5, 2, 2],
-        [1, 1, 1],
-      ],
+      [[0.5, 2, 2], {clip: [0.5, 1, 1], 'local-minde': [1, 1, 1]}],
     ],
   },
   rec2020: {
@@ -240,10 +234,7 @@ export const spaces: {
     ],
     hasOutOfGamut: true,
     gamutExamples: [
-      [
-        [0.5, 2, 2],
-        [1, 1, 1],
-      ],
+      [[0.5, 2, 2], {clip: [0.5, 1, 1], 'local-minde': [1, 1, 1]}],
     ],
   },
   xyz: {
@@ -344,11 +335,14 @@ export const spaces: {
       [0, 100],
       [0, 100],
     ],
-    hasOutOfGamut: false,
+    hasOutOfGamut: true,
     gamutExamples: [
       [
-        [0.5, 100, 50],
-        [0.5, 100, 50],
+        [0.5, 110, 50],
+        {
+          clip: [0.5, 100, 50],
+          'local-minde': [2.9140262667, 100, 52.0514687465],
+        },
       ],
     ],
   },
@@ -366,11 +360,11 @@ export const spaces: {
       [0, 100],
       [0, 100],
     ],
-    hasOutOfGamut: false,
+    hasOutOfGamut: true,
     gamutExamples: [
       [
-        [0.5, 100, 50],
-        [0.5, 100, 50],
+        [0.5, -3, -7],
+        {clip: [0.5, 0, 0], 'local-minde': [3.4921217446, 11.2665189221, 0]},
       ],
     ],
   },