Bug 70871

Summary: REGRESSION: Border-image shows all but center portion of image (if unprefixed property present)
Product: WebKit Reporter: Ryosuke Niwa <rniwa>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: RESOLVED INVALID    
Severity: Normal CC: davidbarr, eoconnor, hyatt, paulirish
Priority: P1 Keywords: InRadar
Version: 528+ (Nightly build)   
Hardware: Unspecified   
OS: Unspecified   

Description Ryosuke Niwa 2011-10-25 22:59:18 PDT
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
Comment 1 Ryosuke Niwa 2011-10-25 23:00:40 PDT
http://crbug.com/101311
Comment 2 David Barr 2011-11-15 19:46:02 PST
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;
	
}
Comment 3 Theresa O'Connor 2012-07-12 14:43:14 PDT
<rdar://problem/11765883>
Comment 4 Theresa O'Connor 2012-07-12 14:43:49 PDT
WebKit's unprefixed border-image behaves as specified.