[webkit-dev] Adding CSS3 background-position offsets.

Alexis Menard alexis at webkit.org
Mon Dec 3 08:26:18 PST 2012


On Mon, Dec 3, 2012 at 12:08 PM, Dirk Schulze <dschulze at adobe.com> wrote:
>
> On Dec 3, 2012, at 6:12 AM, "Alexis Menard" <alexis at webkit.org> wrote:
>
>> On Mon, Dec 3, 2012 at 10:42 AM, Dirk Schulze <dschulze at adobe.com> wrote:
>>>
>>> On Dec 3, 2012, at 5:31 AM, Alexis Menard <alexis at webkit.org> wrote:
>>>
>>>> On Mon, Dec 3, 2012 at 10:19 AM, Dirk Schulze <dschulze at adobe.com> wrote:
>>>>>
>>>>> On Dec 3, 2012, at 4:51 AM, Alexis Menard <alexis at webkit.org> wrote:
>>>>>
>>>>>> Hi everyone,
>>>>>>
>>>>>> I wanted to let you know that I have added the new CSS3
>>>>>> background-position offsets support to WebKit.
>>>>>>
>>>>>> This support is behind the ENABLE_CSS3_BACKGROUND feature define and
>>>>>> it's disabled by default on all ports. I took the conservative
>>>>>> approach despite it's a cool feature.
>>>>>>
>>>>>> Long story short, it allows you to specify three or four values to
>>>>>> background-position. It's a nice addition as you can now position the
>>>>>> images using length or values in relation to any of the four corners
>>>>>> of elements, not just the top left corner.
>>>>>>
>>>>>> Opera, IE10 and Firefox implements this feature already (though the
>>>>>> latter returns weird results using getComputedStyle).
>>>>>>
>>>>>> It is tracked by https://bugs.webkit.org/show_bug.cgi?id=37514 and the
>>>>>> two patches landed (parsing and rendering) are
>>>>>> http://trac.webkit.org/changeset/135632 and
>>>>>> http://trac.webkit.org/changeset/136378.
>>>>>>
>>>>>> I believe the <position> type (3-4 values) could be/or is used in
>>>>>> other cases so we can reuse the parsing code for four/three values if
>>>>>> needed. I will investigate this afterwards and make appropriate
>>>>>> patches.
>>>>>
>>>>> I really hope that we don't use it any where else again (with the exception of -webkit-mask-position which should have same behavior as background-position). This is the use case for the calc() function. Sadly the calc() function came to late for CSS3 Backgrounds.
>>>>
>>>> -webkit-mask-position should behave the same way as
>>>> background-position? Even if I add feature to the latter? Why so?
>>>
>>> Because -webkit-mask and background share the same properties and syntax. Why should it be different on -webkit-mask-position? (Btw. CSS Masking already adapted the background-position syntax for mask-position[1])
>>
>> Ok sure. Then I will make -webkit-mask-position to behave the same per
>> http://dvcs.w3.org/hg/FXTF/raw-file/tip/masking/index.html#the-mask-position
>> . I did know they share the code but I didn't know how far. Thanks for
>> pointing it out.
>>
>>>
>>>>
>>>> it seems like transform-origin supports something similar. I need to look at it.
>>>>
>>>> http://www.w3.org/TR/css3-transforms/#transform-origin-property
>>>
>>> It definitely does not :)
>>
>> Sorry about that I read super quickly and based my thought of one of
>> the test of css3test.com which expect "right 10px bottom 20px" and
>> https://bugs.webkit.org/show_bug.cgi?id=37514#c8 . I'm not sure what
>> is valid or not. Maybe Simon could tell us.
>
> Simon and I discussed it with the CSS WG and we came to the conclusion that we should not introduce the background-position syntax somewhere else in favor for calc(). -webkit-mask is so similar to background, that people have the expectations to behave the same. This is why -webkit-mask-position is an exception.

Cool then I will make it behave the same.

>
> Greetings
> Dirk
>
>>
>>>
>>> Greetings,
>>> Dirk
>>>
>>> [1] http://dvcs.w3.org/hg/FXTF/raw-file/tip/masking/index.html#the-mask-position
>>>
>>>>
>>>>>
>>>>> That said, great work regarding the interoperability with other browsers.
>>>>>
>>>>> Greetings,
>>>>> Dirk
>>>>>
>>>>>
>>>>>>
>>>>>> I plan to enable it by default on Qt and EFL ports this week. If
>>>>>> somebody wants me to enable it on their ports please tell me, I'll be
>>>>>> happy to do it.
>>>>>>
>>>>>> Looking forward to your comments.
>>>>>>
>>>>>> Spec : http://www.w3.org/TR/css3-background/#the-background-position
>>>>>>
>>>>>> --
>>>>>> Software Engineer @
>>>>>> Intel Open Source Technology Center
>>>>>> _______________________________________________
>>>>>> webkit-dev mailing list
>>>>>> webkit-dev at lists.webkit.org
>>>>>> http://lists.webkit.org/mailman/listinfo/webkit-dev
>>>>
>>>>
>>>>
>>>> --
>>>> Software Engineer @
>>>> Intel Open Source Technology Center
>>>> _______________________________________________
>>>> webkit-dev mailing list
>>>> webkit-dev at lists.webkit.org
>>>> http://lists.webkit.org/mailman/listinfo/webkit-dev
>>
>>
>>
>> --
>> Software Engineer @
>> Intel Open Source Technology Center



-- 
Software Engineer @
Intel Open Source Technology Center


More information about the webkit-dev mailing list