Bug 70871 – REGRESSION: Border-image shows all but center portion of image (if unprefixed property present)

• Status: RESOLVED
• Resolution: INVALID
• Component: Layout and Rendering

[Ryosuke Niwa]

What steps will reproduce the problem?
1. Pull up http://assortedgarbage.com ... Look at the main blog post area. In Chromium and Canary, the central portion of the border-image is invisible. 

2. Inspect the article element. Turn OFF the regular border-image property (leaving only the -webkit- prefixed property). The center reappears. 

3. Turn off the -webkit prefixed property & the entire image disappears. 

What is the expected result?
The background of the main blog post area should look like the "paper" the rest of the site is made of.

What happens instead?
Central area of the blog post (using border-image) is missing. In the current stable version of Chrome, it's perfect.

Please provide any additional information below. Attach a screenshot if
possible.
It appears Canary is attempting to use the unprefixed border-image property and is rendering it incorrectly (though it still renders properly with the -webkit prefix).

http://chromium.googlecode.com/issues/attachment?aid=1013110000000&name=border-image-canary.jpg&token=b778969057aee8d9e7080cf85845023d&inline=1

[Ryosuke Niwa]

http://crbug.com/101311

[David Barr]

The issue is that WebKit now honors the spec with regard to the initial value for border image slice.
http://www.w3.org/TR/css3-background/#border-image-slice-fill

So to get the intended result, the style rules need to be updated to include the 'fill' keyword just after the slice values. Note that FF rejects the 'fill' keyword on the -moz-border-image property and WebKit ignores it on -webkit-border-image.

.post {
	margin: 0 0 40px 0;
	-webkit-border-image: url(images/article-background-stretch.png) 29 50 55 32 round round;
	-moz-border-image: url(images/article-background-stretch.png) 29 50 55 32 round round;
	border-image: url(images/article-background-stretch.png) 29 50 55 32 fill round round;
	border-width: 29px 50px 55px 32px;
	
}

[Theresa O'Connor]

<rdar://problem/11765883>

[Theresa O'Connor]

WebKit's unprefixed border-image behaves as specified.