css background-image from inline svg using pattern does not render

RESOLVED INVALID

Status

()

Core
SVG
RESOLVED INVALID
5 years ago
5 years ago

People

(Reporter: jgingerich, Unassigned)

Tracking

16 Branch
x86
Windows XP
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(2 attachments)

(Reporter)

Description

5 years ago
Created attachment 673033 [details]
ffbug.html

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

Steps to reproduce:

Have a simple html file.  Table cell is given a css class with a background-image based on an inline svg file using a simple pattern. 



Actual results:

The contents of the cell are displayed, but the background image is not evident.


Expected results:

The background shows as yellow in Chrome.

The background shows as yellow if I place the svg into its own file.
Attachment #673033 - Attachment mime type: text/plain → text/html
Component: Untriaged → SVG
Product: Firefox → Core

Comment 1

5 years ago
Created attachment 673173 [details]
Correct testcase

Comment 2

5 years ago
Data uri's need to be url encoded to be valid, so.. invalid.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 5 years ago
Resolution: --- → INVALID
(Reporter)

Comment 3

5 years ago
I think it is worthwhile pursuing this as an enhancement, because the url-encoding requirement is generally eschewed by browsers, and full encoding makes the svg essentially unreadable.  However, thanks to your answer, I have discovered it is only the # that needs encoding, and this also explains why I was having difficulties with hex code colors versus rgb()'s.
You need to log in before you can comment on or make changes to this bug.