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

Le 2017-04-13 21:22, Gérard Talbot a écrit :
> 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

2 more tests, this time using svg image with no intrinsic ratio:

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

http://www.gtalbot.org/BrowserBugsSection/CSS3Backgrounds/draft-background-size-length-auto-no-intrinsic-0xy.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 02:55:08 UTC