W3C home > Mailing lists > Public > www-style@w3.org > April 2017

Re: [css-backgrounds] [css-images] Interop for sizing gradients with only width

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Thu, 13 Apr 2017 13:38:39 -0700
Message-ID: <CAAWBYDDXXweT3kFfNLbs9dzOV==v+KUn77rfObeEPzAU9QYLYQ@mail.gmail.com>
To: Philippe Wittenbergh <ph.wittenbergh@l-c-n.com>
Cc: www-style list <www-style@w3.org>, Henrik Andersson <henke@henke37.cjb.net>
On Thu, Apr 13, 2017 at 5:51 AM, Philippe Wittenbergh
<ph.wittenbergh@l-c-n.com> wrote:
>
>> On Apr 13, 2017, at 7:30 PM, Henrik Andersson <henke@henke37.cjb.net> wrote:
>>
>> This following code acts differently in Chrome and SeaMonkey(Gecko).
>> Which is correct?
>>
>> Chrome gives the same result as if the background-size specified 33% for
>> the height. SeaMonkey thinks it should have a height of 100%.
>>
>> div {
>>    width: 160px;
>>    background-repeat: repeat-x;
>>    background-size: 33%;
>>    height: 400px;
>>    background-image: linear-gradient(red, red);
>>    border: black solid 1px;
>> }
>
> Per CSS3 - backgrounds:
> https://drafts.csswg.org/css-backgrounds/#the-background-size
>
> For background-size:
>
>> [ <length-percentage> | auto ]{1,2}
>> The first value gives the width of the corresponding image, the second value its height. If only one value is given the second is assumed to be ‘auto’.
>
> further, for auto, the text notes:
>
>> An ‘auto’ value for one dimension is resolved by using the image's intrinsic ratio and the size of the other dimension, or failing that, using the image's intrinsic size, or failing that, treating it as 100%.
>
> For a gradient (as in your example), the “image” has no intrinsic size, thus 100% should be used. That is what Firefox / Gecko does. Chrome and Safari are wrong.

This is correct. Chrome/Safari are buggy here.  Mind filing bugs?

~TJ
Received on Thursday, 13 April 2017 20:39:32 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:09:07 UTC