[css-values] Calc serialization algorithm is not web compatible

[emilio]

In https://drafts.csswg.org/css-values/#calc-serialize, section 3 says:

Otherwise, serialize as a calc() containing the summation, with the units ordered ASCII case-insensitive alphabetically, the number (if present) coming before all units, and the percentage (if present) coming after all units.

Servo implements this, and when testing it on Firefox, we've come across web compat bugs, in particular: https://bugzilla.mozilla.org/show_bug.cgi?id=1390496

That's a case where something has calc(100% - 2px).

Blink and Gecko serialize it as written. Servo serializes it as calc(-2px + 100%), following that section of the spec, and the page tries to parse that and messes it up, causing flickering. Not sure about what's Edge's behavior.

Needs like we need another algorithm for serializing calc() values?

[tabatkins]

Hmm, I wonder if we can hack around this and just swap % to the front? The relative ordering is completely unimportant to me, it just sounded nice when I wrote it.

[emilio]

We could try, I guess, though if we find any other issue we'll have to go with the more conservative approach of what other browsers do. cc @canaltinova

[canova]

Well, this workaround seems simple enough but are we sure about not doing what other major browsers do? I can't think of an issue about that but may cause problems in the future?

[emilio]

Let's try that. We also need to fix other similar calc serialization issues, so if changing that brings other issues we'll fall back to preserve the order of expressions as other browsers.

It'd be good to file bugs for other browsers too...

[tabatkins]

The "what other browsers do" is just relaying back the precise value the author entered, right? I think we just need to capture that in general, maybe; it seems like browsers do it for most specified values.

[emilio]

Not really, Gecko does this to some extent, Blink simplifies, but only adjacent expressions... It's quite a mess :)

[tabatkins]

Ah, then I think the best approach is indeed to try and do something simple that just happens to be web-compatible. ^_^