780514 - Border images as SVGs (-moz-border-image)

Status: RESOLVED DUPLICATE of bug 619500

(Core :: Layout: Images, Video, and HTML Frames, defect)

Description

[Andras]

Attachment: border-image.zip

User Agent: Mozilla/5.0 (Windows NT 6.0; WOW64) AppleWebKit/537.1 (KHTML, like Gecko) Chrome/21.0.1180.60 Safari/537.1

Steps to reproduce:

Hi,


I have just played around with the border-image CSS property and I've found some strange behaviour, please look at it.

I have Firefox 14.0.1.

I used the following CSS to implement a repeating border around my article area:

width: 880px;
-webkit-border-image: url('frame160x160.svg') 25% 25% 25% 25% round;
border-image: url('frame160x160.svg') 25% 25% 25% 25% round;
border-width: 40px;

I tested the function both with SVG and PNG.

I've attached the HTML+CSS, PNGs and SVG file. You can also find some screenshots included.

#1
Firefox_01.png: when I first load (with default png settings), Firefox renders the PNG with improper colors (blue instead of brown). You can also see 

that Chrome renders is correctly (check Chrome_02.png). Interestingly enough if we save the PNG file with different settings in Photoshop (untick 

convert to sRGB in Save for Web dialog) Firefox renders the PNG correcly. You can check this by changing the URL in the CSS from 'frame160x160.png' to 

'frame160x160nc.png'.

To repro:
(1) open the attached html (with CSS configured to use frame160x160nc.png for the border)
(2) check the border color

#2
Firefox_02.png: After changing the CSS to use the SVG file instead of PNG, I would expect to see the same page with the same borders around the 

article area. Unfortunatelly Firefox renders the border incorrecty.

To repro:
(1) open the attached html (with CSS configured to use .svg for the border)
(2) check the border, it renders incorrectly

#3
Firefox_03.png: After loading the previous case and then zooming in and back out, you can tell that the SVG file (wich has a predefined width and 

height) changes size. This should not happen, the SVG sould be displayed just as before.

To repro:
(1) open the attached html (with CSS configured to use .svg for the border)
(2) zoom in and back out
(3) check the size of the SVG image

#4
Firefox_04.png: after zooming in to the top-left corner, it is obvious that the borders are rendered incorrecly, and the corner picture is the whole 

svg define as the border file. It should be just a small segment of the border file.

(1) open the attached html (with CSS configured to use .svg for the border)
(2) zoom in to the top-left corner

#5
Firefox_05.png: if you switch you focus from the Firefox window to any other window and then switch back, the border renders differently. 

(1) open the attached html (with CSS configured to use .svg for the border)
(2) zoom in to the top-left corner
(3) switch focus to another application
(4) switch back to Firefox


Regards,
Andras


Actual results:

Please read above.


Expected results:

Please read above.

Comment 1

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

Is this a duplicate of bug 619500?

Comment 2

[Alice0775 White]

Problem #1 :
This is not related to border-image. 
This problem is color management of the PNG.

Last Good:
Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.1b1pre) Gecko/20080911105329 Shiretoko/3.1b1pre ID:20080911105329
First Bad:
Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.1b1pre) Gecko/20080912031847 Shiretoko/3.1b1pre ID:20080912031847

Triggered by
Bug 418538 -Enable color management support by default 

It works if I set gfx.color_management.mode to 0

Comment 3

[Matthias Versen [:Matti]]

This bug report is not useable with multiple different issues in one bug.

>Firefox_01.png: when I first load (with default png settings), Firefox renders the 
>PNG with improper colors (blue instead of brown).

Blue seems to be the correct color for that attached image "frame160x160.png".
I see it in blue with the Windows preview and Photo viewer and it's brown in all browser without color management support (Opera, chrome).
#1 is therefore no bug

The other points look like bug 619500

Comment 4

[Alice0775 White]

(In reply to Matthias Versen (Matti) from comment #3)
> This bug report is not useable with multiple different issues in one bug.
> 
> >Firefox_01.png: when I first load (with default png settings), Firefox renders the 
> >PNG with improper colors (blue instead of brown).
> 
> Blue seems to be the correct color for that attached image
> "frame160x160.png".
> I see it in blue with the Windows preview and Photo viewer and it's brown in
> all browser without color management support (Opera, chrome).
> #1 is therefore no bug

I filed Bug 780525 about comment#2 (Problem #1 ) because Safari 5 for Windows shows as blown color.

Comment 5

[brajagopal.bhar]

I am also facing the same problem while using an svg image as border image in Firefox 16.0.2, while it is working perfectly in Chrome 23.0.1271.64 m. This should be regarded as bug and be fixed urgently.