Re: [css-shapes][cssom] Serializing Shape Values

On Sep 28, 2013, at 3:03 AM, Bear Travis <betravis@adobe.com> wrote:

> 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?

The specification says "computed lengths for <basic-shape>, the image with its URI made absolute, otherwise as specified". A often used pattern is:

"as specified, but with URIs made absolute".

The thing that  bothers me on "computed lengths for <basic-shape>" is that it requires transforming <percentage> to <length>. This seems not to be correct at the point.

To answer your question. "as specified" for your examples means:

'rectangle(1px, 2px, 3px, 4px, 0, 0)' to 'rectangle(1px, 2px, 3px, 4px, 0px, 0px)'
(but 'rectangle(1px, 2px, 3px, 4px)' to 'rectangle(1px, 2px, 3px, 4px)')
'rectangle(1px, 2px, 3px, 4px, 5px, 5px)' to 'rectangle(1px, 2px, 3px, 4px, 5px, 5px)'
'polygon(nonzero, 1px 2px)' to 'polygon(nonzero, 1px 2px)'

Because that is what the user specified.

Greetings,
Dirk


> 
> -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 05:20:01 UTC