Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 6 commits into from
Apr 19, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9f5d18e
Update gamut-mapping specs to use the new method parameter
nex3 Apr 18, 2024
de5231d
Reformat
nex3 Apr 18, 2024
2861008
Fix HSL/HWB gamut maps
nex3 Apr 18, 2024
3417646
Fix nonparameterizable tests
nex3 Apr 18, 2024
a5511c4
Remove fit
nex3 Apr 18, 2024
65afd8f
Fix hasOutOfGamut for HSL and HWB
nex3 Apr 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 18 additions & 6 deletions js-api-spec/value/color/color-4-conversions.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
import {SassColor} from 'sass';
import type {
ColorSpaceXyz,
GamutMapMethod,
HueInterpolationMethod,
KnownColorSpace,
} from 'sass';
Expand Down Expand Up @@ -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));
});
});
}
}
});
});
});
Expand Down
75 changes: 49 additions & 26 deletions js-api-spec/value/color/color-4-nonparametizable.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down
56 changes: 25 additions & 31 deletions js-api-spec/value/color/spaces.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import type {
ChannelNameLch,
ChannelNameRgb,
ChannelNameXyz,
GamutMapMethod,
KnownColorSpace,
} from 'sass';

Expand All @@ -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: {
Expand Down Expand Up @@ -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': {
Expand All @@ -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': {
Expand All @@ -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': {
Expand All @@ -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': {
Expand All @@ -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: {
Expand All @@ -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: {
Expand Down Expand Up @@ -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],
},
],
],
},
Expand All @@ -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]},
],
],
},
Expand Down
Loading