Bug 75970 - background-size:100% 100%; Webkit doesn't spread background image
Summary: background-size:100% 100%; Webkit doesn't spread background image
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: Macintosh Intel OS X 10.7
: P2 Minor
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2012-01-10 10:36 PST by albo
Modified: 2016-09-01 10:36 PDT (History)
8 users (show)

See Also:


Attachments
SVG File with two squares (220 bytes, image/svg+xml)
2013-01-10 18:28 PST, Bear Travis
no flags Details
Failing test file (277 bytes, text/html)
2013-01-10 18:36 PST, Bear Travis
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description albo 2012-01-10 10:36:50 PST
Background: the described operation *succeeds* on:
Box: 13" MBP 2.66GHz Intel Core 2 Duo browsers built-in Safari, Chrome 16.0.912.75, Firefox 10.0, Opera 11.60, Camino 2.1 (1.9.2.24 20111113195207)
Box: iPad2 iOS5 built-in Safari

The operation *fails* on Webkit nightly 5.1.2 (7534.52.7, r104486) [and has failed on several nightlies up until now]

The operation is as follows. The web page is described in CSS with 

html { 

background: #bdafa2 url("../gradient.svg") fixed repeat-x;

background-size: 100% 100%;

color: #000;

height: 100%;
 
...

}

"gradient.svg" describes a rectangle 640 wide by 480 high, with a linear gradient containing color stops at top, midway, and bottom.

To repeat, all browsers except Webkit nightly spread the background with "background-size:100% 100%". Webkit displays a background of width 640[px].

When the "background-size" is removed from the CSS, Webkit displays the SVG, repeated-x (and not spread-y) with the fall-back background-color filling any remaining space.
Comment 1 Tony Chang 2012-01-17 11:59:53 PST
This was also reported in the Chromium bug tracker: http://code.google.com/p/chromium/issues/detail?id=110195
Comment 2 albo 2012-02-15 10:04:12 PST
As of  (7534.53.10, r107802) this appears to have been resolved.
Comment 3 Tony Chang 2012-02-15 10:52:13 PST
(In reply to comment #2)
> As of  (7534.53.10, r107802) this appears to have been resolved.

We should add a layout test to make sure this doesn't regress in the future.
Comment 4 albo 2012-02-15 11:02:03 PST
(In reply to comment #3)
> (In reply to comment #2)
> > As of  (7534.53.10, r107802) this appears to have been resolved.
> 
> We should add a layout test to make sure this doesn't regress in the future.

Of what would a "layout test" consist? Sample HTML plus CSS plus SVG?
Comment 5 Tony Chang 2012-02-15 11:26:26 PST
(In reply to comment #4)
> (In reply to comment #3)
> > (In reply to comment #2)
> > > As of  (7534.53.10, r107802) this appears to have been resolved.
> > 
> > We should add a layout test to make sure this doesn't regress in the future.
> 
> Of what would a "layout test" consist? Sample HTML plus CSS plus SVG?

Yes, that's basically all they are.

http://trac.webkit.org/wiki/Writing%20Layout%20Tests%20for%20DumpRenderTree
http://trac.webkit.org/wiki/Writing%20Reftests

Other links about contributing to webkit on the wiki:
http://trac.webkit.org/wiki/Writing%20Reftests
Comment 6 Bear Travis 2013-01-10 18:28:45 PST
Created attachment 182237 [details]
SVG File with two squares
Comment 7 Bear Travis 2013-01-10 18:36:15 PST
Created attachment 182239 [details]
Failing test file

In the test file, I would expect svg image to resize (as it does in Firefox & Opera).
The behavior seems to be slightly different between Chrome (no scaling), Chrome Canary (no scaling, repeats), and Safari (no scaling, rendering artifacts as window resizes).
Comment 8 Bear Travis 2013-02-12 14:09:56 PST
Appears to be working properly in r142638. Will add a test case.
Comment 9 Michał Gołębiowski-Owczarek 2013-05-20 08:29:14 PDT
It still doesn't work, a test case from the Chromium report (compare with Firefox): http://jsfiddle.net/DXT8b/3/
Comment 10 Fredrik Söderquist 2016-09-01 10:36:17 PDT
We're about to land a fix for this in Blink (https://codereview.chromium.org/2290173005/), don't know how similar this code is still, but hopefully it hasn't diverged too much.