Bug 170834 - background-size with 2nd value is 'auto' and the image has no intrinsic size and no intrinsic ratio incorrectly rendered
Summary: background-size with 2nd value is 'auto' and the image has no intrinsic size ...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 10
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
Keywords: InRadar
Depends on:
Reported: 2017-04-13 16:47 PDT by Philippe Wittenbergh
Modified: 2018-05-14 01:20 PDT (History)
5 users (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
Description Philippe Wittenbergh 2017-04-13 16:47:06 PDT
Example URL:

Per CSS3 - backgrounds:

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



one <length> value


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:
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;

background-size: 10px auto;

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

background-size: 10% auto;

background-size: 10px auto;
Comment 3 Radar WebKit Bug Importer 2017-04-15 17:41:35 PDT
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