Bug 170834

Summary: background-size with 2nd value is 'auto' and the image has no intrinsic size and no intrinsic ratio incorrectly rendered
Product: WebKit Reporter: Philippe Wittenbergh <phiw2>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: ahmad.saleem792, browserbugs2, simon.fraser, tobi, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar, WPTImpact
Version: Safari 10   
Hardware: Unspecified   
OS: Unspecified   
See Also: https://bugs.webkit.org/show_bug.cgi?id=243773

Description Philippe Wittenbergh 2017-04-13 16:47:06 PDT
Example URL:
http://www.gtalbot.org/BrowserBugsSection/CSS3Backgrounds/draft-background-size-one-value-percent-0xx.xht

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 the example), the “image” has no intrinsic size, thus 100% should be used. That is what Firefox / Gecko does.

Chrome and Safari are wrong.

one <percent> value

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

or

one <length> value

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

What is the expected behavior?
Filled green square and no red

What went wrong?
sliver of green and large area of red


(related discussion on the CSS WG list: https://lists.w3.org/Archives/Public/www-style/2017Apr/thread.html#msg29
Comment 1 Philippe Wittenbergh 2017-04-13 16:49:14 PDT
Equivalent Blink bug:
https://bugs.chromium.org/p/chromium/issues/detail?id=711489
Comment 2 Gérard Talbot 2017-04-13 20:01:32 PDT
2 additional tests with identical actual results (incorrect behaviors):

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


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



2 additional tests with identical actual results (incorrect behaviors) *_using SVG image_* with no intrinsic ratio:

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

background-size: 10px auto;
http://www.gtalbot.org/BrowserBugsSection/CSS3Backgrounds/draft-background-size-length-auto-no-intrinsic-0xy.xht
Comment 3 Radar WebKit Bug Importer 2017-04-15 17:41:35 PDT
<rdar://problem/31646443>
Comment 4 Simon Fraser (smfr) 2017-04-26 07:28:52 PDT
Need to fix RenderBoxModelObject::calculateFillTileSize) which calls RenderBoxModelObject::calculateImageIntrinsicDimensions() which has this:

    // A generated image without a fixed size, will always return the container size as intrinsic size.
    if (image->isGeneratedImage() && image->usesImageContainerSize())
Comment 5 Gérard Talbot 2017-05-05 14:13:29 PDT
The summary (title) of this bug report should say *_background-size_* and not background-position! All 6 tests mentioned in this bug report are testing and were indeed testing *_background-size_* and not background-position. So, I tuned accordingly the text in the 6 tests and I updated the summary text of this bug report.
Comment 6 Tobi Reif 2018-05-14 01:20:20 PDT
It would be great if this could get fixed