Bug 75970 – background-size:100% 100%; Webkit doesn't spread background image

• Status: NEW
• Component: CSS

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.

[Tony Chang]

This was also reported in the Chromium bug tracker: http://code.google.com/p/chromium/issues/detail?id=110195

As of  (7534.53.10, r107802) this appears to have been resolved.

[Tony Chang]

(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.

(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?

[Tony Chang]

(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

[Bear Travis]

Created attachment 182237 [details]
SVG File with two squares

[Bear Travis]

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).

[Bear Travis]

Appears to be working properly in r142638. Will add a test case.

[Michał Gołębiowski-Owczarek]

It still doesn't work, a test case from the Chromium report (compare with Firefox): http://jsfiddle.net/DXT8b/3/

[Fredrik Söderquist]

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.

[Brent Fulgham]

It doesn't look like we render this test the same was as Firefox and Chrome.

[Radar WebKit Bug Importer]

<rdar://problem/96916928>