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

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

From: Gérard Talbot <www-style@gtalbot.org>
Date: Thu, 13 Apr 2017 17:24:22 -0400
To: Philippe Wittenbergh <ph.wittenbergh@l-c-n.com>, Henrik Andersson <henke@henke37.cjb.net>
Cc: "Tab Atkins Jr." <jackalmage@gmail.com>, W3C www-style mailing list <www-style@w3.org>
Message-ID: <f62d43033500e338507abcb264a31e73@gtalbot.org>
Le 2017-04-13 16:38, Tab Atkins Jr. a écrit :
> 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

Philippe or Henrik,

If you file a bug report on this, you can include a link to these 2 
draft tests:

http://www.gtalbot.org/BrowserBugsSection/CSS3Backgrounds/draft-background-size-one-value-percent-0xx.xht

http://www.gtalbot.org/BrowserBugsSection/CSS3Backgrounds/draft-background-size-one-value-0xx.xht

I will submit eventually those tests (under different filenames) to the 
CSS3 backgrounds and borders test suite to improve test coverage. Those 
tests are quick draft for now (many text improvements needed and (not 
sure) possible test reduction) but they demonstrate clearly and cleanly 
an implementation failure of Chrome/Safari browsers.

Gérard
Received on Thursday, 13 April 2017 21:24:57 UTC

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