847003 - -moz-border-image does not work any more

Status: RESOLVED INVALID

(Core :: CSS Parsing and Computation, defect)

Description

[in-Tanz]

User Agent: Mozilla/5.0 (Windows NT 5.1; rv:20.0) Gecko/20100101 Firefox/20.0
Build ID: 20130227063501

Steps to reproduce:

-moz-border-image (and corresponding border-image) in css-file


Actual results:

It does not work with version 20 of Firefox any more.


Expected results:

It worked with earlier versions (till Firefox 19) and still works with all other browsers.
Examples:
http://www.in-tanz.de/tanzen.html
http://klepperle.de/

Comment 1

[Loic]

Provide a minimal testcase (html file) showing the issue with border-image, please.

Comment 2

[in-Tanz]

Dear Loic,
two test cases can be found on the already mentioned sites
http://www.in-tanz.de/tanzen.html
http://klepperle.de/
Simply view both pages with Firefox v20 and e.g. Chrome or Opera or an older Firefox browser.
You will easily realize that there is a border-image around one div in both pages.

Comment 3

[:Ms2ger (he/him; ⌚ UTC+1/+2)]

The declaration seems to apply...

On <http://www.in-tanz.de/tanzen.html>, the following block applies to the p that says "Erklärungen, Zeichnungen, Animationen, Filme".

#verlauf p { 
font-size:1.8em; text-align:center; color: white;
letter-spacing:0.1em;line-height:150%; vertical-align:middle;
width: 80%;  padding-top: 0.5em; padding-bottom: 0.5em; margin-top:0.5em; margin-bottom: 1em; 
text-shadow:3px 3px 0px #000000, -3px 3px 3px #000000, -3px -3px 3px #000000, 3px -3px 3px #000000,
 0px -3px 3px #000000, 0px +3px 3px #000000, -3px 0px 3px #000000, +3px 0px 3px #000000;
background: #cc0000; /* Old browsers */
background: -moz-linear-gradient(left, #cc0000 0%, #6fde6f 28%, #ffffcc 54%, #80c3ff 83%, #0000cc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#cc0000), color-stop(28%,#6fde6f), color-stop(54%,#ffffcc), color-stop(83%,#80c3ff), color-stop(100%,#0000cc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #cc0000 0%,#6fde6f 28%,#ffffcc 54%,#80c3ff 83%,#0000cc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #cc0000 0%,#6fde6f 28%,#ffffcc 54%,#80c3ff 83%,#0000cc 100%); /* Opera11.10+ */
background: -ms-linear-gradient(left, #cc0000 0%,#6fde6f 28%,#ffffcc 54%,#80c3ff 83%,#0000cc 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc0000', endColorstr='#0000cc',GradientType=1 ); /* IE6-9 */
background: linear-gradient(left, #cc0000 0%,#6fde6f 28%,#ffffcc 54%,#80c3ff 83%,#0000cc 100%); /* W3C */
border-width: 30px; 
-webkit-border-image: url(b/rahmen-2.png) 30 30 30 30 round;
-o-border-image: url(b/rahmen-2.png) 30 30 30 30 round;
border-image: url(b/rahmen-2.png) 30 30 30 30 round;
}

Comment 4

[Alice0775 White]

border-style should be specified to the element. http://www.w3.org/TR/css3-background/#border-images

This is a site bug.

Comment 5

[Boris Zbarsky [:bzbarsky]]

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