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
Equivalent Blink bug: https://bugs.chromium.org/p/chromium/issues/detail?id=711489
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
<rdar://problem/31646443>
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())
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.
It would be great if this could get fixed
Related links - - - - - - - Added 4 background-size (with no intrinsic and no ratio) tests https://github.com/web-platform-tests/wpt/pull/26599 http://wpt.live/css/css-backgrounds/background-size-041.html https://wpt.fyi/results/css/css-backgrounds/background-size-041.html?label=experimental&label=master&aligned http://wpt.live/css/css-backgrounds/background-size-042.html https://wpt.fyi/results/css/css-backgrounds/background-size-042.html?label=experimental&label=master&aligned http://wpt.live/css/css-backgrounds/background-size-043.html https://wpt.fyi/results/css/css-backgrounds/background-size-043.html?label=experimental&label=master&aligned http://wpt.live/css/css-backgrounds/background-size-044.html https://wpt.fyi/results/css/css-backgrounds/background-size-044.html?label=experimental&label=master&aligned