[cssom] Computing & Serializing functional notation values with optional parameters

Hi All,

I was recently wondering about how best to compute and serialize basic css shapes [1], which take a functional notation form which has optional parameters. This is similar in some ways to transform functions like translate, which take an optional second parameter [2]. Dirk Schulze suggested that both the computed and serialized values be resolved "as specified" [3], but we were having trouble pin-pointing exactly where such behavior was defined. A functional value serializing "as specified" would mean that it prints out the function with the same arguments specified by the author, while cleaning up whitespace and comments.

For example:
var div = document.createElement('div');
div.style.transform = 'translate(/* I am a comment */    1em    )'
console.log(div.style.transform)

Would log 'translate(1em)' rather than echoing the css text, or adding a value for the optional second parameter.

The transforms property also has a computed value "as specified" [4], which implies that the computed value will have the same number of arguments as the author style, but some of those values may be computed. If you continued the above example to:
document.body.appendChild(div);
console.log(getComputedStyle(div).transform);

You would log 'translate(16px)' rather than 'translate(16px, 0px)'.

Does anyone know where such behavior is defined, and if it make sense for Basic CSS Shapes [5]?

-Bear



[1] http://lists.w3.org/Archives/Public/www-style/2013Sep/0811.html
[2] http://www.w3.org/TR/css3-transforms/#two-d-transform-functions
[3] http://lists.w3.org/Archives/Public/www-style/2013Sep/0859.html
[4] http://www.w3.org/TR/css3-transforms/#effects
[5] http://dev.w3.org/csswg/css-shapes/#basic-shapes-from-svg-syntax

Received on Monday, 30 September 2013 21:03:00 UTC