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

[Color 4] Add tests for color.to-space() #1950

Closed
wants to merge 21 commits into from
Closed

[Color 4] Add tests for color.to-space() #1950

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
911dfcd
Unify the color.inspect function
nex3 Oct 10, 2023
6dc0063
Include color space in utils.inspect() output
nex3 Oct 10, 2023
6b131cb
Don't gamut-map when converting from out-of-gamut sRGB
nex3 Oct 10, 2023
464011f
[Color 4] Add tests for color.to-space()
nex3 Oct 10, 2023
b586e64
[Color 4] Update existing specs per sass/sass#3819
nex3 Mar 27, 2024
d9170bf
Merge branch 'feature.color-4' of github.com:sass/sass-spec into to-s…
nex3 Mar 28, 2024
1ac6314
Fix some color JS tests
nex3 Mar 28, 2024
864cfc8
Fix more color JS tests
nex3 Mar 29, 2024
57da5b4
Poke CI
nex3 Mar 29, 2024
d66d637
[Color 4] Update existing specs
nex3 Mar 29, 2024
0b3727b
Merge branch 'update-color-specs' into to-space
nex3 Mar 29, 2024
cec35e7
Poke CI
nex3 Mar 29, 2024
70397f6
Test negative lightness of lab/oklab
nex3 Mar 29, 2024
136b3d8
Add specs for HSL
nex3 Mar 29, 2024
4f92ba1
Add specs for HWB
nex3 Mar 30, 2024
1325ed3
Don't clamp HSL lightness
nex3 Mar 30, 2024
83257fb
Merge branch 'update-color-specs' into to-space
nex3 Mar 30, 2024
0942ad5
Add specs for LCH
nex3 Mar 30, 2024
1afe4a4
Add specs for OKLCH
nex3 Apr 1, 2024
c9fdc6f
Update specs for out-of-bounds {ok,}l{ab,ch}
nex3 Apr 1, 2024
2c55495
Update specs for clamped rgb()
nex3 Apr 9, 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
292 changes: 157 additions & 135 deletions js-api-spec/value/color/color-4-channels.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import {List} from 'immutable';

import {spaces} from './spaces';
import {channelCases, channelNames} from './utils';
import {skipForImpl} from '../../utils';

const spaceNames = Object.keys(spaces) as KnownColorSpace[];

Expand Down Expand Up @@ -161,148 +160,171 @@ describe('Color 4 SassColor Channels', () => {
});
});

// TODO(sass#3654) Failing in dart-sass pending:
// https://github.com/sass/sass/issues/3654
skipForImpl('dart-sass', () => {
if (!['hsl', 'hwb', 'lch', 'oklch'].includes(spaceId)) {
describe('isChannelPowerless', () => {
function checkPowerless(
_color: SassColor,
powerless = [false, false, false]
) {
it(`channels ${_color.channels.toArray()} is ${powerless}`, () => {
expect(_color.isChannelPowerless(space.channels[0])).toBe(
powerless[0]
);
expect(_color.isChannelPowerless(space.channels[1])).toBe(
powerless[1]
);
expect(_color.isChannelPowerless(space.channels[2])).toBe(
powerless[2]
);
});
}
const [ch1, ch2, ch3] = space.ranges;
if (space.hasPowerless) {
// test powerless channels
switch (space.name) {
case 'hwb':
// If the combined `whiteness` and `blackness` values (after
// normalization) are equal to `100%`, then the `hue` channel is
// powerless.
checkPowerless(space.constructor(ch1[0], 0, 100), [
true,
false,
false,
]);
checkPowerless(space.constructor(ch1[0], 100, 0), [
true,
false,
false,
]);
checkPowerless(space.constructor(ch1[0], 50, 50), [
true,
false,
false,
]);
checkPowerless(space.constructor(ch1[1], 0, 100), [
true,
false,
false,
]);
checkPowerless(space.constructor(ch1[1], 100, 0), [
true,
false,
false,
]);
checkPowerless(space.constructor(ch1[1], 50, 50), [
true,
false,
false,
]);
const [range1, range2, range3] = space.ranges;
checkPowerless(space.constructor(range1[0], range2[0], range3[0]));
checkPowerless(space.constructor(range1[1], range2[0], range3[0]));
checkPowerless(space.constructor(range1[1], range2[1], range3[0]));
checkPowerless(space.constructor(range1[1], range2[1], range3[1]));
checkPowerless(space.constructor(range1[0], range2[1], range3[1]));
checkPowerless(space.constructor(range1[0], range2[0], range3[1]));
checkPowerless(space.constructor(range1[1], range2[0], range3[1]));
checkPowerless(space.constructor(range1[0], range2[1], range3[0]));
});
}
});
});

checkPowerless(space.constructor(ch1[0], ch2[1], ch3[1]));
checkPowerless(space.constructor(ch1[0], ch2[0], ch3[0]));
checkPowerless(space.constructor(ch1[1], ch2[1], ch3[1]));
checkPowerless(space.constructor(ch1[1], ch2[0], ch3[0]));
describe('isChannelPowerless', () => {
describe('for HWB', () => {
// If the combined `whiteness + blackness` is great than or equal to
// `100%`, then the `hue` channel is powerless.
checkPowerless(
new SassColor({hue: 0, whiteness: 0, blackness: 100, space: 'hwb'}),
[true, false, false]
);
checkPowerless(
new SassColor({hue: 0, whiteness: 100, blackness: 0, space: 'hwb'}),
[true, false, false]
);
checkPowerless(
new SassColor({hue: 0, whiteness: 50, blackness: 50, space: 'hwb'}),
[true, false, false]
);
checkPowerless(
new SassColor({hue: 0, whiteness: 60, blackness: 60, space: 'hwb'}),
[true, false, false]
);
checkPowerless(
new SassColor({hue: 0, whiteness: -100, blackness: 200, space: 'hwb'}),
[true, false, false]
);
checkPowerless(
new SassColor({hue: 0, whiteness: 200, blackness: -100, space: 'hwb'}),
[true, false, false]
);
checkPowerless(
new SassColor({hue: 100, whiteness: 0, blackness: 100, space: 'hwb'}),
[true, false, false]
);

break;
checkPowerless(
new SassColor({hue: 0, whiteness: 0, blackness: 0, space: 'hwb'})
);
checkPowerless(
new SassColor({hue: 0, whiteness: 49, blackness: 50, space: 'hwb'})
);
checkPowerless(
new SassColor({hue: 0, whiteness: -1, blackness: 100, space: 'hwb'})
);
checkPowerless(
new SassColor({hue: 100, whiteness: 0, blackness: 0, space: 'hwb'})
);
});

case 'hsl':
// hsl- If the saturation of an HSL color is 0%, then the hue component is powerless.
checkPowerless(space.constructor(ch1[0], 0, ch3[0]), [
true,
false,
false,
]);
checkPowerless(space.constructor(ch1[0], 0, ch3[1]), [
true,
false,
false,
]);
checkPowerless(space.constructor(ch1[1], 0, ch3[1]), [
true,
false,
false,
]);
checkPowerless(space.constructor(ch1[1], 0, ch3[0]), [
true,
false,
false,
]);
describe('for HSL', () => {
// If the saturation of an HSL color is 0%, then the hue component is
// powerless.
checkPowerless(
new SassColor({hue: 0, saturation: 0, lightness: 0, space: 'hsl'}),
[true, false, false]
);
checkPowerless(
new SassColor({hue: 0, saturation: 0, lightness: 100, space: 'hsl'}),
[true, false, false]
);
checkPowerless(
new SassColor({hue: 100, saturation: 0, lightness: 0, space: 'hsl'}),
[true, false, false]
);

checkPowerless(space.constructor(ch1[0], ch2[1], ch3[0]));
checkPowerless(space.constructor(ch1[0], ch2[1], ch3[1]));
checkPowerless(space.constructor(ch1[1], ch2[1], ch3[1]));
checkPowerless(space.constructor(ch1[1], ch2[1], ch3[0]));
break;
checkPowerless(
new SassColor({hue: 0, saturation: 100, lightness: 0, space: 'hsl'})
);
checkPowerless(
new SassColor({hue: 0, saturation: 100, lightness: 100, space: 'hsl'})
);
checkPowerless(
new SassColor({hue: 100, saturation: 100, lightness: 100, space: 'hsl'})
);
checkPowerless(
new SassColor({hue: 100, saturation: 100, lightness: 0, space: 'hsl'})
);
});

case 'lch':
case 'oklch':
// (ok)lch- If the `chroma` value is 0%, then the `hue` channel is powerless.
checkPowerless(space.constructor(ch1[0], 0, ch3[0]), [
false,
false,
true,
]);
checkPowerless(space.constructor(ch1[0], 0, ch3[1]), [
false,
false,
true,
]);
checkPowerless(space.constructor(ch1[1], 0, ch3[1]), [
false,
false,
true,
]);
checkPowerless(space.constructor(ch1[1], 0, ch3[0]), [
false,
false,
true,
]);
describe('for LCH', () => {
// If the `chroma` value is 0%, then the `hue` channel is powerless.
checkPowerless(
new SassColor({lightness: 0, chroma: 0, hue: 0, space: 'lch'}),
[false, false, true]
);
checkPowerless(
new SassColor({lightness: 0, chroma: 0, hue: 100, space: 'lch'}),
[false, false, true]
);
checkPowerless(
new SassColor({lightness: 100, chroma: 0, hue: 0, space: 'lch'}),
[false, false, true]
);

checkPowerless(space.constructor(ch1[0], ch2[1], ch3[0]));
checkPowerless(space.constructor(ch1[0], ch2[1], ch3[1]));
checkPowerless(space.constructor(ch1[1], ch2[1], ch3[1]));
checkPowerless(space.constructor(ch1[1], ch2[1], ch3[0]));
break;
checkPowerless(
new SassColor({lightness: 0, chroma: 100, hue: 0, space: 'lch'})
);
checkPowerless(
new SassColor({lightness: 0, chroma: 100, hue: 100, space: 'lch'})
);
checkPowerless(
new SassColor({lightness: 100, chroma: 100, hue: 100, space: 'lch'})
);
checkPowerless(
new SassColor({lightness: 100, chroma: 100, hue: 0, space: 'lch'})
);
});

default:
throw new Error(
`Unimplemented isPowerless check for ${space.name}`
);
}
} else {
checkPowerless(space.constructor(ch1[0], ch2[0], ch3[0]));
checkPowerless(space.constructor(ch1[1], ch2[0], ch3[0]));
checkPowerless(space.constructor(ch1[1], ch2[1], ch3[0]));
checkPowerless(space.constructor(ch1[1], ch2[1], ch3[1]));
checkPowerless(space.constructor(ch1[0], ch2[1], ch3[1]));
checkPowerless(space.constructor(ch1[0], ch2[0], ch3[1]));
checkPowerless(space.constructor(ch1[1], ch2[0], ch3[1]));
checkPowerless(space.constructor(ch1[0], ch2[1], ch3[0]));
}
});
});
describe('for OKLCH', () => {
// If the `chroma` value is 0%, then the `hue` channel is powerless.
checkPowerless(
new SassColor({lightness: 0, chroma: 0, hue: 0, space: 'oklch'}),
[false, false, true]
);
checkPowerless(
new SassColor({lightness: 0, chroma: 0, hue: 100, space: 'oklch'}),
[false, false, true]
);
checkPowerless(
new SassColor({lightness: 100, chroma: 0, hue: 0, space: 'oklch'}),
[false, false, true]
);

checkPowerless(
new SassColor({lightness: 0, chroma: 100, hue: 0, space: 'oklch'})
);
checkPowerless(
new SassColor({lightness: 0, chroma: 100, hue: 100, space: 'oklch'})
);
checkPowerless(
new SassColor({lightness: 100, chroma: 100, hue: 100, space: 'oklch'})
);
checkPowerless(
new SassColor({lightness: 100, chroma: 100, hue: 0, space: 'oklch'})
);
});
});
});

/**
* Creates a test that checks that the powerless channels in `color` match the
* expectation in `powerless`.
*/
function checkPowerless(
color: SassColor,
powerless = [false, false, false]
): void {
it(`${color}: ${powerless}`, () => {
const space = spaces[color.space]!;
expect(color.isChannelPowerless(space.channels[0])).toBe(powerless[0]);
expect(color.isChannelPowerless(space.channels[1])).toBe(powerless[1]);
expect(color.isChannelPowerless(space.channels[2])).toBe(powerless[2]);
});
}
Loading
Loading