[css-shapes][cssom] Serializing Shape Values

Hi All,

I had a couple questions about how shapes [1] should be serialized when using getPropertyValue on a CSSStyleDeclaration. The question is, when running:
var div = document.getElementById('div');
div.style.setProperty('shape-outside', 'rectangle(1px, 2px, 3px, 4px)');
console.log(div.style.getPropertyValue('shape-outside');
console.log(getComputedStyle(div).getPropertyValue('shape-outside'));

What should be logged to the console? Rectangle has two optional arguments, rx and ry. rx defaults to 0, and ry defaults to rx. I did not see how to serialize a functional-notation value with optional arguments in the CSSOM spec [2]. The problem seemed most similar to a shorthand, however, where some values in the shorthand may be superfluous, in which case they are left out of the serialization.

This would imply that 'rectangle(1px, 2px, 3px, 4px)' would be logged to the console in both of the above cases.

It would also imply that the following results:
'rectangle(1px, 2px, 3px, 4px, 0, 0)' serializes as 'rectangle(1px, 2px, 3px, 4px)'
'rectangle(1px, 2px, 3px, 4px, 5px, 5px)' serializes as 'rectangle(1px, 2px, 3px, 4px, 5px)'
'polygon(nonzero, 1px 2px)' serializes as 'polygon(1px 2px)'

Does this seem correct?

-Bear

[1] http://dev.w3.org/csswg/css-shapes/#basic-shapes-from-svg-syntax
[2] http://dev.w3.org/csswg/cssom/#serialize-a-css-value

Received on Saturday, 28 September 2013 01:04:00 UTC