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:37:54 -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>, Thierry MICHEL <tmichel@w3.org>
Message-ID: <4c8c64bb9aebade13a2121771eb061ce@gtalbot.org>
Le 2017-04-13 17:24, Gérard Talbot a écrit :
> 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


It appears that MS-Edge 13 also fails these 2 tests.

I checked the background and borders test suite on background-position

http://test.csswg.org/suites/css-backgrounds-3_dev/nightly-unstable/html4/chapter-3.htm#s3.9

and none of the 8 tests we have on one single background-position value 
fails in Chrome. So, we definitely can improve the coverage of the test 
suite here.

+CC: Thierry Michel

Gérard
Received on Thursday, 13 April 2017 21:38:31 UTC

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