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

Mike Sherov
Chief Technologist
SNAP Interactive, Inc. | Ticker: STVI
http://snap-interactive.com | http://ayi.com

> On Sep 28, 2013, at 1:21 AM, Dirk Schulze <dschulze@adobe.com> wrote:
>
>
>> 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.

I agree. That sounds more like a "used value" rather than a computed value.

>
> 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 19:59:07 UTC