[css-transitions] Define interpolation of the currentcolor keyword

@Manishearth

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

@dbaron

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

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.

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.

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.

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.

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.

@frivoal

@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.)

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.

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?

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

Depends on #5392

[css-color-5] interpolation from/to currentColor, helps #445

@frivoal

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?

@fantasai

@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.

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.

[css-color-5] port #445 here

(Removing css-color4 tag, therefore)

[css-color-4] Remove old issue #445 which was untagged from color-4 a…

Navigation Menu

Repository navigation

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

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Activity

upsuper commented on Sep 6, 2016

upsuper commented on Sep 6, 2016

upsuper commented on Sep 6, 2016

svgeesus commented on Sep 6, 2016

upsuper commented on Jan 10, 2017

frivoal commented on Jan 10, 2017

fantasai commented on Sep 24, 2018

upsuper commented on Sep 26, 2018

svgeesus commented on May 11, 2020

birtles commented on May 11, 2020

svgeesus commented on Sep 16, 2020

svgeesus commented on Sep 18, 2020

svgeesus commented on Sep 18, 2020

svgeesus commented on Nov 13, 2020

svgeesus commented on Nov 13, 2020

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions