[cssom-1][css-values-4][css-cascade-5] When should calc() be maintained in specified value serialization?

[weinig]

I am trying to determine if there is there a universal rule for when calc() should be maintained when serializing specified values?

For example, consider the following:

    let test = document.createElement("div")
    test.style.width = "calc(100px)"

    console.log(test.style.width)

In both Safari and Firefox (I have not tested anything else so far), this logs "calc(100px)". (If you were to go and add the element to the DOM and query the computed style, you would get "100px"). So for this property / value at least, calc() seems to be maintained in the specified value serialization.

However, if you take:

    let test = document.createElement("div")
    test.style.color = "rgb(calc(100), 255, 255)"

    console.log(test.style.color)

this logs "rgb(100, 255, 255)", seemingly resolving the calc().

It's possible this is clearly defined somewhere, or perhaps it is up to each individual property and/or value to define, but I have been having trouble finding it.

https://drafts.csswg.org/cssom/#serialize-a-css-component-value makes mention of differentiating between specified and computed / resolved values (calling it out as an issue), but its not clear that CSSOM would be the right spec for defining rules for calc() (though perhaps it would).

(See https://bug-250325-attachments.webkit.org/attachment.cgi?id=464424 for a live testcase)

[Loirooriol]

Basically it's in https://drafts.csswg.org/css-values/#calc-serialize
#4399 has a good summary.

[tabatkins]

Yeah, the simplification and serialization algorithms define how this works. The basic answer is "simplify as much as you can at each stage (specified, computed, used) and then serialize what you've got", with the caveat that if the tree simplifies down to a plain numeric value it's serialized with a calc() around it if it's a specified value (to maintain clamping behavior).

So the interoperable behavior you observe for 'width' is correct. The behavior you observe for colors is somewhat incorrect - they're clamping too early. Observe what happens if you use calc(300), for example - you'll immediately see it replaced by a naked 255.

[weinig]

@tabatkins thanks for the clarification.

[svgeesus]

There was more discussion (and a resolution to spec early simplification) here

• [css-color-4] Specified value for color when calc() is used #8318 (comment)