801238 - border-image property does not work in firefox 16

Status: RESOLVED INVALID

(Core :: CSS Parsing and Computation, defect)

Description

[NICKS]

Attachment: bug-border-image.html

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:16.0) Gecko/20100101 Firefox/16.0
Build ID: 20121010144125

Steps to reproduce:

The border-image css property does not seem to be working in firefox 16 or 16.0.1 which was working well previously in firefox 15.0.1

I tried the same code in firefox 15, opera 12.02 and chrome 22. Worked well in all of them.

Comment 1

[Boris Zbarsky [:bzbarsky]]

The border-image spec draft got updated, and Firefox 16 was updated to the changes in the draft.  The relevant ones for your example are:

1)  Simple using border-image no longer overrides the border-style.  Your page has the default border-style ("none") on all the elements, so there are no borders visible.  You want to use "border-style: solid", presumably.  See http://www.w3.org/TR/2012/CR-css3-background-20120724/#border-images first paragraph last sentence.

2)  If you want the image to cover the padding area, not just the border, you need to make sure your border-image-slice value includes "fill".  See http://www.w3.org/TR/2012/CR-css3-background-20120724/#border-image-slice first paragraph after the table describing the property.

See http://dbaron.org/log/20120612-border-image for more details.

Note, though, that these changes shipped in Firefox 15, so I'm not sure why you say it works in Firefox 15 for you.  Certainly your attached testcase doesn't "work" (as in, behave like it did in Firefox 14) in Firefox 15.