[css-values] Calc serialization of subtractions

[ewilligers]

In #1731 we decided to serialize percentages before dimensioned values.

Existing browsers have varied behavior when there are negatives in a computed value: Safari uses -20px - 10%. Blink previously used -20px + -10% and now uses -10% + -20px. Legacy Firefox code uses -20px - 10% and more recent (Servo) code uses -10% - 20px. Edge often reduces a <length-percentage> to a <length>.

A subtraction often occurs in the context of a computed value arising from a <position>, e.g. right 200px bottom 200px.

Should calc(100% - 200px) serialize as-is, or should this be calc(100% + -200px)?

Various WPTs expect the former, but a literal reading of the spec requires the latter:

Serialize all the terms, then join them into a single string, with " + " between each term.

If the former is preferred, we might want to add a sentence:

Replace any resulting " + -" with " - ".

This would leave a specified value like calc(100% + max(-10%, -200px)) unchanged.

The spec could also use an example or text showing how to simplify/serialize a specified value like calc(100% - max(10%, 200px))

[BorisChiou]

cc @emilio

[emilio]

This would leave a specified value like calc(100% + max(-10%, -200px)) unchanged.

I think that'd be fine, the simplification you proposed below would not be correct. With a percentage resolution size of 3000px, max(-10%, -200px) returns -200px (since -10% is -300px, and -200px is greater than that), but - max(10%, 200px) would return -300px.

[ewilligers]

What is the serialization of calc(70% - min(10%, 200px) + 30%) ?

We can't combine 100% and the min(10%, 200px) with " + ".

[BorisChiou]

I'm ok with this suggestion (if most various WPTs expect the former).
i.e. calc(100% - 200px) and leave a specified value like calc(100% + max(-10%, -200px)) unchanged

Just notice there are some WPTs using something likecalc(100% + -200px) and others using calc(100% - 200px). These two inconsistent formats should be fixed. ;(

[ewilligers]

We have percentages, then units in alphabetical order, then functions (min/max/clamp) in the order they were seen (with their arguments simplified using the same logic).

there are some WPTs using something likecalc(100% + -200px) and others using calc(100% - 200px). These two inconsistent formats should be fixed. ;(

These should be calc(100% - 200px)

The serialization of calc(70% - min(10%, 200px) + 30%) should be calc(100% - min(10%, 200px)).

calc(calc(1px + min(2em, 3ex)) - calc(max(5px, 6mm) - 7%) + 8px) becomes
calc(7% + 9px + min(2em, 3ex) - max(5px, 6mm)).

This covers everything other than multiplication and division.

[tabatkins]

I agree that a negative number in a sum should be serialized as a subtraction, not an addition of a negative number. I'll edit accordingly.

I agree with Eric's most recent examples.