Re: [css-shapes] Animating <basic-shape>s updated

On 1/14/14, 3:36 PM, "Tab Atkins Jr." <jackalmage@gmail.com> wrote:

>On Mon, Jan 13, 2014 at 4:40 PM, Alan Stearns <stearns@adobe.com> wrote:
>> Here’s a bit more detail and some examples on this topic. I’m writing
>>out
>> what I’ve gleaned from the discussion of computed values and
>>serialization
>> to see whether I’ve got things right (or if it sparks more debate). I
>> think designing complex, multi-valued properties like shape-outside and
>> border-position may be helped by using some guidelines.
>
>Yes, everything you write here is great and completely correct, as far
>as I can tell!
>
>I've added it to the wiki at
><http://wiki.csswg.org/spec/computed-values> for now to record it for
>posterity.

OK - so now let's look at these example:

Declared value: right 10px
Computed value: (100% - 10px), (50% + 0px)
getComputedValue result: right 10px

Declared value: bottom 50px top 10%
Computed value: (10% + 0px), (100% - 50px)
getComputedValue result: 10% bottom 50px

And talk about what happens during interpolation. You can call
getComputedStyle in an intermediate state, so how does the value get
serialized then? If we animate between the two declared values above, and
sample the value half-way through, the computed value is:

(55% - 5px), (75% - 25px)

In this case, I think the getComputedValue result is:

calc(55% - 5px) calc(75% - 25px)

I'm assuming that if the percentages in computed value are 0%, 50% or
100%, then the serialization uses the keywords. But if the percentage is
any other value, the serialization needs to use calc().


Is this correct? Does this need to be spelled out in the definition of
background-position?

Thanks,

Alan

Received on Wednesday, 15 January 2014 18:29:22 UTC