[csswg-drafts] [cssom-1] How to serialize specified value of properties with a var()? (#6484)

tabatkins has just created a new issue for https://github.com/w3c/csswg-drafts:

== [cssom-1] How to serialize specified value of properties with a var()? ==
(continuing topic from <https://github.com/w3c/csswg-drafts/issues/5685>)

It's not currently well-specified how serialization for specified values of non-custom properties should behave when they have a var() reference.

That's a lot of words! I'm referring to [this example](http://software.hixie.ch/utilities/js/live-dom-viewer/saved/9522):

```html
<!DOCTYPE html>
<body style="color: /* foo */ var(--foo); --foo: blue;">
<script>
document.body.textContent = document.body.style.getPropertyValue("color");
</script>
```

Currently, Chrome serializes this as `var(--bar)`, while Firefox serializes it as `/* foo */ var(--bar)`. (I'm not sure what WebKit does.)

All browser, when given a property *without* a variable reference, like `color: /* foo */ red;`, serialize the specified value as just the keyword, without the comments.

In the f2f earlier today, @emilio argued that Firefox's behavior is because it holds onto the original string for properties with variable references, and serializing using it is simplest. I *think* that Chrome's behavior is because it stores props with var() references as a token stream (throwing away comments), and just reserializes from the token stream.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6484 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 29 July 2021 23:20:20 UTC