[css-images-4] Unclear serialization for cross-fade

[sesse]

https://drafts.csswg.org/css-images-4/#serialization says: “For cross-fade(), always serialize the <percentage>.”

What does “the” percentage refer to? There can be multiple ones, and they can explicit and implicit. (In the old -webkit-cross-fade(), there used to be only one, so perhaps it is a remnant?) If a percentage is implicit, should it be serialized? (This is not always possible for the specified value, as some percentages may be unknown until computed value time, or even used value time if sign() etc. is involved—furthermore, they can be different for sizing and fading.) Perhaps “always” should be moderated somewhat.

[nt1m]

It would make sense for serialization to be consistent with color-mix() imo

[svgeesus]

Is this for serializing the specified value or the computed value?

For the former, percentages can be omitted so they won't be in the serialization.

For the latter:

If any percentages are omitted, all the specified percentages are summed together and subtracted from 100%, the result is floored at 0%, then divided equally between all images with omitted percentages at computed-value time.

but (presumably at used-value time)

While this is not reflected in the computed value, when all the arguments’ percentages sum to greater than 100%, the sizing/painting details effectively rescale them so that they sum to exactly 100%.

So I guess the serialized computed value includes those divided-equally percentages, and maybe the spec is trying to say that?

[svgeesus]

So if the stylesheet has

BackGround-Image: cRoss-fAde(50%  #0f0,   #000);

the specified value would be serialized as "cross-fade(50% rgb(0, 255, 0), rgb(0, 0, 0)" (ASCII-lowercase, single spaces, hex colors become rgb()) while the computed value would serialize as "cross-fade(50% rgb(0, 255, 0), 50% rgb(0, 0, 0)"

[sesse]

Is this for serializing the specified value or the computed value?

It doesn't say as far as I can see, so it would be good to have both specified if they are to be different.

So I guess the serialized computed value includes those divided-equally percentages, and maybe the spec is trying to say that?

The problem is that you have two different sets of the percentages. Some values can be ignored when computing the size, but not the alpha, so there are effectively two different computed values. And if you specify something like calc(50% + 1% * sign(1px - 1vw)), you won't know at computed value time whether the other value should be 49%, 50% or 51%.

[svgeesus]

All good points, so the serialization should probably talk about whether the values can be fully resolved or not as well. Another example:

cross-fade(30% red, currentColor);

as @nt1m said, following color-mix() serialization would probably be a good place to start.

@tabatkins @LeaVerou @fantasai