1245461 - Inline-SVG having an hexadecimal color fails to "load"

Status: RESOLVED INVALID

(Firefox :: Untriaged, defect)

Description

[neovov]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.97 Safari/537.36

Steps to reproduce:

1. Set a background-image with an inline SVG, for example: background-image: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 7'><path fill='#FF0000' d='M0 0h13L6.5 7 0 0z'/></svg>");
2. Using rgb, rgba() or a named color works
3. Loading the data-URI in a tab show a parsing problem with the hash mark

Some tests on Codepen : http://codepen.io/anon/pen/pgZMKj


Actual results:

The image doesn't work, firebug says the image could not be loaded


Expected results:

The image should be displayed :)

Comment 1

[Robert Longson [:longsonr]]

# is a reserved character for the start of a fragment identifier. The url is invalid and firefox should not and does not display it for that reason. You must URL encode your data if you want it to work.

Comment 2

[Anthony Ricaud (:rik)]

Reopening because I think this is a compatibility issue since Safari and Chrome both display this fine.

Comment 3

[Robert Longson [:longsonr]]

Chrome and Firefox are aware of their bug, their URL parsing is severely broken, feel free to talk to bzbarsky if you want more information.

The specification is clear and we implement it. https://tools.ietf.org/html/rfc3986#section-3.5

Comment 4

[Anthony Ricaud (:rik)]

Thanks.

So the workaround is to replace #F00 by %23F00.

Comment 5

[Robert Longson [:longsonr]]

yes, but it's not so much a workaround as the right thing to do. Still works in Chrome and Safari.

Comment 6

[neovov]

Thanks for the clarifications.
I should have thought about URL encoding.