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-transitions] Define interpolation of the currentcolor keyword #445

Open
SimonSapin opened this issue Sep 6, 2016 · 15 comments
Open

[css-transitions] Define interpolation of the currentcolor keyword #445

SimonSapin opened this issue Sep 6, 2016 · 15 comments

Comments

@SimonSapin
Copy link
Contributor

@SimonSapin SimonSapin commented Sep 6, 2016

Interpolation happens on computed values:

https://drafts.csswg.org/css-transitions/#transitions

The computed value of a property transitions over time from the old value to the new value.

The computed value for <color> is either a RGBA color or currentcolor:

https://drafts.csswg.org/css-color/#currentcolor-color

The keyword currentcolor takes its value from the value of the color property on the same element. This happens at used-value time,

When defining how to interpolate <color>, css-transitions seems to assume it can only be an RGBA color:

https://drafts.csswg.org/css-transitions/#interpolated-types

color: interpolated via red, green, blue and alpha components (treating each as a number, see below). The interpolation is done between premultiplied colors (that is, colors for which the red, green, and blue components specified have been multiplied by the alpha).

The section in this last quote should define how currentcolor interpolates. Is it not interpolate, or should it be substituted by the value of color (which itself might be animated or transitioning) for the purpose of interpolation?

CC @Manishearth, @upsuper

@upsuper
Copy link
Member

@upsuper upsuper commented Sep 6, 2016

Note there was some discussion in the mailing list in this thread: https://lists.w3.org/Archives/Public/www-style/2016Apr/0281.html

cc @dbaron @tabatkins

@upsuper
Copy link
Member

@upsuper upsuper commented Sep 6, 2016

Currently, different engines have different behavior for different properties.

In Gecko, on some properties like -webkit-text-fill-color, text-emphasis-color, currentcolor and numeric color are not interpolatible; for some properties we interpolate currentcolor as the static value of color property; for other properties we haven't handled currentcolor as a keyword yet.

In Blink, as far as I can see, background-color property uses the ideal way which interpolate the numeric color and currentcolor in a ratio, while for -webkit-text-fill-color, currentcolor is not interpolatible.

I'm trying to implement the ideal interpolation way (the way how Blink handles background-color) for all properties in Gecko so that we can unify the handling of currentcolor in our codebase.

@upsuper
Copy link
Member

@upsuper upsuper commented Sep 6, 2016

FWIW, the way we are implementing does not match how blenda() function is defined in the current draft of CSS Color 4.

The issue with blenda() function is that, CSS Transitions spec currently specifies linear interpolation for color values, while blenda()'s formula is different from that, which means we would have inconsistent behavior for some cases.

@svgeesus
Copy link
Contributor

@svgeesus svgeesus commented Sep 6, 2016

Linear interpolation is a reasonable assumption for all transitions, including for color. The issue is what color space to perform the linear interpolation in.
We have talked about adding a document-wide working colorspace property. The initial value would be sRGB. That property seems like the best candidate here, so currently any wide-gamut colors would be converted to sRGB before being interpolated. Other values of working colorspace would avoid that initial color change from gamut mapping.

@upsuper
Copy link
Member

@upsuper upsuper commented Jan 10, 2017

FWIW, Gecko has implemented interpolation between "currentcolor" and numeric color for majority of CSS color properties (if not all). It does so via interpolating colors linearly in a way like "x% of rgba + (1-x%) of currentcolor". As far as I can see, this also matches how Blink interpolates them.

@frivoal
Copy link
Collaborator

@frivoal frivoal commented Jan 10, 2017

Given the approximative interop we already have, this could probably be solved by adding the following sentence to the definition of color interpolation.

Interpolating to or from currentcolor is possible. The numerical value used for this purpose is the used value.

@fantasai
Copy link
Collaborator

@fantasai fantasai commented Sep 24, 2018

@frivoal That wouldn't be sufficient to handle, e.g.

div { text-emphasis: circle; transition: all 2s; }
div:hover { text-emphasis-color: lime; }
em { color: red; }

We need to handle currentColor as a separate component, so that e.g. you have some percentage of currentColor plus an rgba component. (We could serialize this out using an interpolate() function so there's no new syntax to add, but the computed value needs to be defined to make this work.)

@upsuper
Copy link
Member

@upsuper upsuper commented Sep 26, 2018

Note that gCS returns used value for color properties, so syntax wouldn't be a problem for that case. But if we want to take Typed OM into account, maybe we need to resolve on a syntax.

@svgeesus
Copy link
Contributor

@svgeesus svgeesus commented May 11, 2020

this could probably be solved by adding the following sentence to the definition of color interpolation.

That link has gone cold; it looks like neither Transitions 1 nor Transitions 2 defines color interpolation. Where did it get moved to?

@birtles
Copy link
Contributor

@birtles birtles commented May 11, 2020

this could probably be solved by adding the following sentence to the definition of color interpolation.

That link has gone cold; it looks like neither Transitions 1 nor Transitions 2 defines color interpolation. Where did it get moved to?

Values and Units: https://drafts.csswg.org/css-values-4/#combine-colors

@svgeesus
Copy link
Contributor

@svgeesus svgeesus commented Sep 16, 2020

Depends on #5392

@svgeesus
Copy link
Contributor

@svgeesus svgeesus commented Sep 18, 2020

Well, for now, I added the text suggested by @frivoal to the Interpolation section in CSS Color 5. Unlike the antique text in V&U it doesn't assume all colors are sRGB. Also, color interpolation is better being in a color spec.

Is there anything useful from V&U combine colors that should be salvaged?

@svgeesus
Copy link
Contributor

@svgeesus svgeesus commented Sep 18, 2020

@fantasai I do understand the issue you raise about keeping the currentColor contribution separate so that it can be re-evaluated. But that isn't what is currently implemented, so for now at least documenting what we have is one step closed.

@svgeesus
Copy link
Contributor

@svgeesus svgeesus commented Nov 13, 2020

The Interpolation section in CSS Color 5 now also includes interpolation with alpha; but still assumes that currentColor resolves to a used value rather than a percentage of real color and percentage of currentColor.

Unlike what is in V&U, there is no assumption of sRGB. display-p3, lab, lch are all handled.

If there is only one special keyword, handling it isn't too bad. If we also need to consider the percentage of system colors, or add new functionality like currentBackground then this becomes rather more complex.

svgeesus added a commit that referenced this issue Nov 13, 2020
@svgeesus
Copy link
Contributor

@svgeesus svgeesus commented Nov 13, 2020

(Removing css-color4 tag, therefore)

@svgeesus svgeesus removed the css-color-4 label Nov 13, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
7 participants
You can’t perform that action at this time.