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

Le 2017-04-13 19:02, Gérard Talbot a écrit :
> Le 2017-04-13 17:37, Gérard Talbot a écrit :
>> 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

Tests still fail if

background-size: 10% auto;

or

background-size: 10px auto;

are declared. So, the failure (bug) is really about when image has no 
intrinsic ration or has no intrinsic size, then 100% should be used 
instead.

2 additional tests:

http://www.gtalbot.org/BrowserBugsSection/CSS3Backgrounds/draft-background-size-percent-auto-no-intrinsic-0xx.xht

http://www.gtalbot.org/BrowserBugsSection/CSS3Backgrounds/draft-background-size-length-auto-no-intrinsic-0xx.xht

Gérard

>>> 
>>> 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
> 
> 
> I filed this bug report:
> 
> Issue 711489: background-position with only one [ <length | <percent>
> ] value with gradient incorrectly rendered
> https://bugs.chromium.org/p/chromium/issues/detail?id=711489
> 
> Gérard

Received on Friday, 14 April 2017 01:23:01 UTC