- From: Alan Stearns <stearns@adobe.com>
- Date: Wed, 15 Jan 2014 19:23:08 +0000
- To: Alan Stearns <stearns@adobe.com>, Tab Atkins Jr. <jackalmage@gmail.com>
- CC: www-style list <www-style@w3.org>
On 1/15/14, 10:28 AM, "Alan Stearns" <stearns@adobe.com> wrote: >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? Fantasai pointed out that my example used an incorrect interpretation of the two-value <position> syntax. The first value should be: Declared value: right 10px center Computed value: (100% - 10px), (50% + 0px) getComputedValue result: right 10px center Thanks, Alan
Received on Wednesday, 15 January 2014 19:23:38 UTC