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.

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

Mix doesn't respect hue angle specification #57

Closed
facelessuser opened this issue Oct 8, 2020 · 6 comments
Closed

Mix doesn't respect hue angle specification #57

facelessuser opened this issue Oct 8, 2020 · 6 comments
Labels
bug Something isn't working

Comments

@facelessuser
Copy link
Collaborator

Problem

I was trying to recreate some of the examples from the CSS 5 mixing drafts, as this project seems to be a playground for expressing those ideas, and I realized I could not get mix to recognize the specified angle adjuster to use:

new Color('lch(52% 58.1 22.7)').mix('lch(NaN NaN 257.1)', 1 - 0.7523, {hue: "shorter", space: "lch"});
// lch(52% 58.1 351.6)
new Color('lch(52% 58.1 22.7)').mix('lch(NaN NaN 257.1)', 1 - 0.7523, {hue: "longer", space: "lch"});
// lch(52% 58.1 351.6)

Expectation

In the above examples, I would expect that when longer was used, the return would be:

new Color('lch(52% 58.1 22.7)').mix('lch(NaN NaN 257.1)', 1 - 0.7523, {hue: "longer", space: "lch"});
// lch(52% 58.1 80.761)

I suspect this is unintentional and should be able to replicate such examples in the color 5 spec.

@svgeesus svgeesus added the bug Something isn't working label Oct 16, 2020
@svgeesus
Copy link
Member

Yes, this project is indeed being used as a playground for CSS Color 4, CSS Color 5,CSS Color HDR and CSS Typed Object Model.

By the way why are you setting L and C to NaN? As far as I recall, we only have special handling for NaN on hue (for achromatic colors). However, yes you should be getting a different angle there; this is a bug.

new Color('lch(52% 58.1 22.7)').mix('lch(52% 58.1 257.1)', 1 - 0.7523, {hue: "longer", space: "lch"});

@svgeesus
Copy link
Member

In fact it would be nice if people could type examples straight from CSS Color 5 and they worked, instead of having to transform the syntax as you did. But that should be a separate issue.

@svgeesus
Copy link
Member

@facelessuser
Copy link
Collaborator Author

By the way why are you setting L and C to NaN?

Because it works and it is unclear that this wasn't supposed to be allowed. The code will return the other channel (for any channel) if the other is NaN.

The official docs actually do this, just not directly through the string.

// Two kinds of fade out to transparent
lime.range(new Color("transparent"));
lime.range(new Color(lime.space, [NaN, NaN, NaN], 0), {space: lime.space});

@svgeesus
Copy link
Member

svgeesus commented Nov 4, 2020

Related, the API documentation for the options object for color.range() does not mention the hue option, although the interpolation docs use it in examples. And when it is not used, the default does not seem to be shorter.

@facelessuser
Copy link
Collaborator Author

This issue was resolved by #338

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants