[css-variables] Custom properties should *not* serialize "exactly as specified"

[Loirooriol]

Consider this code:

var s = document.body.style;
s.setProperty("--a", "a(");
s.setProperty("--b", "b");

The spec says "Specified values of custom properties must be serialized exactly as specified by the author". That's what Blink does, but it's bad!

s.getPropertyValue("--a"); // "a("
s.getPropertyValue("--b"); // "b"
s.cssText; // "--a:a(; --b:b;"

s.cssText = s.cssText;

s.getPropertyValue("--a"); // "a(; --b:b;"
s.getPropertyValue("--b"); // ""
s.cssText; // "--a:a(; --b:b;;"

s.cssText = s.cssText;

s.getPropertyValue("--a"); // "a(; --b:b;;"
s.getPropertyValue("--b"); // ""
s.cssText; // "--a:a(; --b:b;;;"

s.cssText = s.cssText;

s.getPropertyValue("--a"); // "a(; --b:b;;;"
s.getPropertyValue("--b"); // ""
s.cssText; // "--a:a(; --b:b;;;;"

I think Firefox is better, since it round-trips:

s.getPropertyValue("--a"); // "a()"
s.getPropertyValue("--b"); // "b"
s.cssText; // "--a: a(); --b: b;"

s.cssText = s.cssText;

s.getPropertyValue("--a"); // "a()"
s.getPropertyValue("--b"); // "b"
s.cssText; // "--a: a(); --b: b;" 

[andruud]

Good one. I've never liked that behavior. It's the only thing that behaves like that, and what actually happens when things are substituted isn't clear either.

exactly as specified by the author". That's what Blink does

Sidenote: No, Blink serializes tokens. So it has both the problem in this issue, and also it does the normalization stuff 4.1. Serializing Custom Properties wants to avoid. (Yay.)

[tabatkins]

Yeah, we should close open constructs, since the parser doesn't see that the construct isn't properly ended in that case anyway.

The problem is that we do need to exactly preserve things like long strings of digits.

and what actually happens when things are substituted isn't clear either.

That actually is clear if you're following the spec - the substitution is done with tokens, not characters, and in this example the --a property contains a single <function-token>, so it'll substitute that. When you later serialize the substituted result you should get a(), since you can't tell whether or not the ending token was supplied to a function token.

(To what extent browsers exactly follow the spec here is, uh, up for discussion.)