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

[css-color-5] How should missing (none) components work with calc() on named components in the relative color syntax #6920

Closed
weinig opened this issue Dec 29, 2021 · 4 comments
Labels
css-color-4 Current Work css-color-5 Color modification

Comments

@weinig
Copy link
Contributor

weinig commented Dec 29, 2021

With the addition of missing components to colors, it would be good to clarify what the behavior is when a missing component is used in a relative color when combined with calc(). For instance:

lab(from lab(none none none) l a calc(b / 2))

It would make sense to me that l and a remain none here, but I am less clear on what the specified behavior of b should be. Conversion to 0 like done at rendering? Conversion to NaN? Remain none and be invalid?

@svgeesus
Copy link
Contributor

I think this is already explicit:

If a color with a missing component is interpolated with another color, the missing component is treated as having the other color’s component value. If both colors are missing the given component, the interpolated color will also be missing that component.

For all other purposes, a missing component behaves as a zero value, in the appropriate unit for that component: 0, 0%, or 0deg. This includes rendering the color directly, converting it to another color space, etc.

There is no "other color" here so we have lab(0% 0 0) and 0 / 2 = 0

However, in your example the color starts as Lab and remains as Lab so "converting it to another color space" does not apply. Bur "etc" could usefully change to "performing computations on the color component values, etc"

@svgeesus
Copy link
Contributor

svgeesus commented Dec 29, 2021

Also you raise a good point about whether we have lab(none none 0 or lab(0 0 0) and the spec should be clarified. I think it makes sense to preserve the none as far as possible.

@svgeesus svgeesus added css-color-4 Current Work css-color-5 Color modification Needs Edits labels Dec 29, 2021
@weinig
Copy link
Contributor Author

weinig commented Dec 31, 2021

There is no "other color" here so we have lab(0% 0 0) and 0 / 2 = 0

There is a small argument for having some way to preserve the "missing" concept into calc() so that users could match the interpolation rules the engine uses in a custom interpolation they might implement using the relative color syntax:

lab(from var(--my-color) 
            calc((1 - var(--progress-l)) * l + (var(--progress-l) * var(--other-color-l))
            calc((1 - var(--progress-a)) * a + (var(--progress-a) * var(--other-color-a))
            calc((1 - var(--progress-b)) * b + (var(--progress-b) * var(--other-color-b)) );

In the above, if one of the components was 'none', what the user probably really wanted was to just the other component, but if they always lose that information they are out of luck.

Admittedly, this example seems a bit far fetched and would probably require some new functionality in calc to conditionally do the behavior wanted, but I thought I would call it out in case you had any interesting ideas here. (Unrelated, should calc() have a lerp() builtin :) ?)

@svgeesus
Copy link
Contributor

For all other purposes, a [=missing component=] behaves as a zero value,
in the appropriate unit for that component: ''0'', ''0%'', or ''0deg''.
This includes rendering the color directly,
converting it to another color space,
performing computations on the color component values,
etc.

If a color with a [=missing component=] is serialized
or otherwise presented directly to an author,
then for legacy color syntax
it represents that component as a zero value;
otherwise,

it represents that component as being the ''none'' keyword.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css-color-4 Current Work css-color-5 Color modification
Projects
None yet
Development

No branches or pull requests

2 participants