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

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

From: Philippe Wittenbergh <ph.wittenbergh@l-c-n.com>
Date: Thu, 13 Apr 2017 21:51:38 +0900
Cc: Henrik Andersson <henke@henke37.cjb.net>
Message-Id: <C5E4634B-943B-4C34-BB0C-BC3DD2F73A76@l-c-n.com>
To: www-style list <www-style@w3.org>

> 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.

Philippe
--
Philippe Wittenbergh
https://l-c-n.com/
Received on Thursday, 13 April 2017 12:52:14 UTC

This archive was generated by hypermail 2.3.1 : Thursday, 13 April 2017 12:52:15 UTC