[css-transitions] Interpolation of side-relative <position> values

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

[css-transitions] Interpolation of side-relative <position> values

Simon Fraser-4
There is some trickiness with interpolation of side-relative <position> values. Consider:

@keyframes shifty {
from { background-position: 20px; }
to { background-position: right 20px; }
}

Should that work? To make it work you’d have to know the box size when doing interpolation, or I suppose the UA could turn it into a calc() expression?

This works in Firefox, but not in Chrome or Safari. I didn’t test Edge.

Simon


Reply | Threaded
Open this post in threaded view
|

Re: [css-transitions] Interpolation of side-relative <position> values

L. David Baron
On Friday 2016-02-19 18:28 -0800, Simon Fraser wrote:
> There is some trickiness with interpolation of side-relative <position> values. Consider:
>
> @keyframes shifty {
> from { background-position: 20px; }
> to { background-position: right 20px; }
> }
>
> Should that work? To make it work you’d have to know the box size when doing interpolation, or I suppose the UA could turn it into a calc() expression?

In Gecko it works because we internally represent computed values of
background-position as calc() of a length and a percent, since the
three-value and four-value variants can all be reduced to that.

This is consistent with the "Computed value:" line in
https://drafts.csswg.org/css-backgrounds/#the-background-position ,
so I believe it's correct, and that because of that "Computed
value:" line, this should work per spec.

(That said, I suspect I may have written that "Computed value:"
line, so I'm certainly willing to discuss if you think it should
change.)

-David

--
𝄞   L. David Baron                         http://dbaron.org/   𝄂
𝄢   Mozilla                          https://www.mozilla.org/   𝄂
             Before I built a wall I'd ask to know
             What I was walling in or walling out,
             And to whom I was like to give offense.
               - Robert Frost, Mending Wall (1914)

signature.asc (836 bytes) Download Attachment
Reply | Threaded
Open this post in threaded view
|

Re: [css-transitions] Interpolation of side-relative <position> values

Simon Fraser-4

> On Feb 19, 2016, at 6:39 pm, L. David Baron <[hidden email]> wrote:
>
> On Friday 2016-02-19 18:28 -0800, Simon Fraser wrote:
>> There is some trickiness with interpolation of side-relative <position> values. Consider:
>>
>> @keyframes shifty {
>> from { background-position: 20px; }
>> to { background-position: right 20px; }
>> }
>>
>> Should that work? To make it work you’d have to know the box size when doing interpolation, or I suppose the UA could turn it into a calc() expression?
>
> In Gecko it works because we internally represent computed values of
> background-position as calc() of a length and a percent, since the
> three-value and four-value variants can all be reduced to that.
>
> This is consistent with the "Computed value:" line in
> https://drafts.csswg.org/css-backgrounds/#the-background-position ,
> so I believe it's correct, and that because of that "Computed
> value:" line, this should work per spec.

It’s not clear to me that the spec allows that calc() to leak out in computed style, yet in Firefox and Chrome, for object-position which also uses a <position>, it does:

"object-position: bottom 10px right 20px;" turns into "calc(-20px + 100%) calc(-10px + 100%)” in computed style.

Is this expected?

Simon


Reply | Threaded
Open this post in threaded view
|

Re: [css-transitions] Interpolation of side-relative <position> values

Shane Stephens-2
In reply to this post by Simon Fraser-4
On Sat, Feb 20, 2016 at 1:32 PM Simon Fraser <[hidden email]> wrote:
There is some trickiness with interpolation of side-relative <position> values. Consider:

@keyframes shifty {
from { background-position: 20px; }
to { background-position: right 20px; }
}

Should that work? To make it work you’d have to know the box size when doing interpolation, or I suppose the UA could turn it into a calc() expression?

This works in Firefox, but not in Chrome or Safari. I didn’t test Edge.

Minor correction: Chrome's behavior matches Firefox's.

Cheers,
    -Shane
 

Simon


Reply | Threaded
Open this post in threaded view
|

Re: [css-transitions] Interpolation of side-relative <position> values

fantasai
In reply to this post by Simon Fraser-4
On 02/21/2016 04:01 PM, Simon Fraser wrote:

>
>> On Feb 19, 2016, at 6:39 pm, L. David Baron <[hidden email]> wrote:
>>
>> On Friday 2016-02-19 18:28 -0800, Simon Fraser wrote:
>>> There is some trickiness with interpolation of side-relative <position> values. Consider:
>>>
>>> @keyframes shifty {
>>> from { background-position: 20px; }
>>> to { background-position: right 20px; }
>>> }
>>>
>>> Should that work? To make it work you’d have to know the box size when doing interpolation, or I suppose the UA could turn it into a calc() expression?
>>
>> In Gecko it works because we internally represent computed values of
>> background-position as calc() of a length and a percent, since the
>> three-value and four-value variants can all be reduced to that.
>>
>> This is consistent with the "Computed value:" line in
>> https://drafts.csswg.org/css-backgrounds/#the-background-position ,
>> so I believe it's correct, and that because of that "Computed
>> value:" line, this should work per spec.
>
> It’s not clear to me that the spec allows that calc() to leak out in computed style, yet in Firefox and Chrome, for object-position which also uses a <position>, it does:
>
> "object-position: bottom 10px right 20px;" turns into "calc(-20px + 100%) calc(-10px + 100%)” in computed style.
>
> Is this expected?

Yes. See
   https://www.w3.org/TR/css3-background/#changes-2012-07 (2nd to last bullet)
   https://hg.csswg.org/drafts/annotate/baa444d9c296/css-backgrounds/Overview.src.html
   https://lists.w3.org/Archives/Public/www-style/2013Dec/0023.html
   https://lists.w3.org/Archives/Public/www-style/2013Dec/0403.html

~fantasai