[css-backgrounds-3] Clarification on animation additive composite behavior for box-shadow

[stephenmcgruer]

Currently the spec for box-shadow (https://drafts.csswg.org/css-backgrounds/#box-shadow) does not appear (to my quick reading) to give any instructions for additive composition (https://drafts.csswg.org/web-animations-1/#effect-composition) when animating.

In the absence of a behavior for addition, the fallback is to use replace (https://drafts.csswg.org/css-values-4/#combining-values).

Firefox instead appears to implement box-shadow interpolation as list concatenation, as shown by https://output.jsbin.com/pikiguv. Chrome appears to do component-wise addition. Which, if either, is correct?

EDIT: Note, you will need composited modes enabled in the browsers if you test them. For Chrome, that's chrome://flags, set "experimental-web-platform-features" to enabled. For Firefox, you can test using Firefox Nightly (has it enabled by default).

[stephenmcgruer]

cc @birtles

[stephenmcgruer]

For the record, generally with list-y things, add is spec'd as list concatenation and accumulate is spec'd as component-wise addition.

Also, it's very possible this is spec'd for box-shadow and I overlooked it, so please lmk if so.

[flackr]

From a developer ergonomics point of view, I think concatenation makes more sense. It's as if you are adding another shadow. As for what is correct - it is animatable as a shadow list. The definition for how to animate a shadow list moved to web-animations-1 from css-transitions-1 https://www.w3.org/TR/web-animations-1/#animating-shadow-lists which suggests it should be component-wise.

(aside: is there an easier way to track down these things rather than digging through git histories to find where the definitions moved? I.e. where's the standard place to look for a type's interpolation / addition / accumulation behavior?)

[stephenmcgruer]

Dammit, I though we killed all the overrides in the animations specs -_-. I didn't realize they had jumped to web-animations-1 from css-transitions-1 :(.

I would quite like to kill https://www.w3.org/TR/web-animations-1/#animation-types; what is stopping us from moving the information into the relevant specs?

text-shadow has the same interop discrepancy btw, and I don't think it made it to web-animations-1