[csswg-drafts] [css-color-4][css-values-4][web-animations-1] Behavior of additive animations of color properties is unclear (#7793)

weinig has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-color-4][css-values-4][web-animations-1] Behavior of additive animations of color properties is unclear ==
While going to fix the following WPT tests in WebKit:

    - web-animations/animation-model/animation-types/accumulation-per-property-001.html
    - web-animations/animation-model/animation-types/accumulation-per-property-002.html
    - web-animations/animation-model/animation-types/addition-per-property-001.html
    - web-animations/animation-model/animation-types/addition-per-property-002.html

which had failing test cases for additive and accumulative animations of color properties, I can across a few underspecified areas that could use some clarification:

1. How should color addition work in general? [CSS Value 4](https://drafts.csswg.org/css-values-4/#combine-colors) says:

> [Addition](https://drafts.csswg.org/css-values-4/#addition) of [`<color>`](https://www.w3.org/TR/css-color-4/#typedef-color) is likewise defined as the independent addition of each component as a [`<number>`](https://drafts.csswg.org/css-values-4/#number-value) in premultiplied space.

This works for the rectangular color types, but how should the hue component of the cylindrical color types be added? Should it differ based on what hue interpolation mode is in effect? (this is not currently a problem, as there is no syntax to ask an animation to use a cylindrical interpolation method, but that seems like it is only a manner time).

Also, how does addition of the alpha channel work? Should it overflow if the two values add up to more than 1?

2. How should color component overflow and gamut mapping work?

The model for additive animation of colors as assumed by the tests noted above assume that overflow of the sRGB gamut will clip, rather than do gamut mapping. For example, this subtest:

```
    test(t => {
      const idlName = propertyToIDL(property);
      const target = createTestElement(t, setup);
      target.style[idlName] = 'rgb(128, 128, 128)';
      const animation = target.animate(
        {
          [idlName]: ['rgb(255, 0, 0)', 'rgb(0, 0, 255)'],
        },
        { duration: 1000, composite }
      );
      testAnimationSamples(animation, idlName,
                           [{ time: 0,   expected: 'rgb(255, 128, 128)' },
                            // The value at 50% is interpolated
                            // from 'rgb(128+255, 128, 128)'
                            // to   'rgb(128,     128, 128+255)'.
                            { time: 500, expected: 'rgb(255, 128, 255)' }]);
    }, `${property} supports animating as color of rgb() with overflowed `
       + ' from and to values');
```

assumes that the overflow of one component (for instance from's red component, which ends up being 128+255) is just clamped. This is a bit out of line with the current status quo, which would likely have this gamut mapped.

3. What criteria should be used to determine if the legacy gamma-encode sRGB interpolation should be used? For gradient, it seemed relatively clear that one could just check if any color stop used a non-legacy color syntax, and switch to OKLab. But there are numerous ways to specify keyframe values for animations, and it is unclear whether we would want all of them to use legacy syntax or just the two we are actively interpolating between. 

I know the use of legacy interpolation is a `may` condition in the CSS Color 4 spec, so perhaps this is not something the editors want to clarify. If that is the case, we should make sure that WPT tests are appropriately relaxed for multiple implementations.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7793 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Sunday, 25 September 2022 17:03:38 UTC