Closed Bug 1016316 Opened 10 years ago Closed 10 years ago

CSSStyleSheet.insertRule() escaping inline SVG

Categories

(Core :: DOM: CSS Object Model, defect)

29 Branch
x86_64
Linux
defect
Not set
normal

Tracking

()

RESOLVED INVALID

People

(Reporter: aklp08, Unassigned)

Details

User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.114 Safari/537.36 Steps to reproduce: 1) assign a CSSStyleSheet to the variable named `sheet` 2) create a variable named `svg` which will holds the svg string (the quotation marks used in the SVG string are doublequotes `"`). 3) create 2 more variable, one of them holds the CSS selector and the other one holds the index which insertRule() requires 4) execute sheet.insertRule(selector +'{+ 'background-image: url(\'data:image/svg+xml;utf8,' + svg + '\')', index); Sorry if any information are missing, this is the first time submitting a bug in the Core product. Actual results: Firefox took the css property's value and escaped all the doublequotes inside the SVG which broke the universe. The devtools showed the SVG styling properties filled inside the CSSDOM (for example fill and stroke of the SVG). So for example this svg part: <ellipse xmlns="http://www.w3.org/2000/svg" stroke="#e1d85d" rx="6" ry="44" transform="rotate(-66)"/> would turn into this (notice the backslashes before every doublequote): <ellipse xmlns=\"http://www.w3.org/2000/svg\" stroke=\"#e1d85d\" rx=\"6\" ry=\"44\" transform=\"rotate(-66)\"/> Expected results: It should render the inlined svg as the background image of the selector... Notice that this worked just fine in Webkit based browsers.
Note that the svg above is not the actual svg used, due to work-related restrictions.
The escaping is not a problem; that's how strings are serialized in CSS, and doesn't represent what's actually stored in the parsed string. Your real problem is that your SVG is invalid, for two reasons: 1) There is no <svg> element. 2) You're putting it in a data: URI, but leaving the '#' unescaped, which is probably not what you want. You want encodeURIComponent(svg) in that string concatenation. If I fix both of those issues, this works just fine.
Status: UNCONFIRMED → RESOLVED
Closed: 10 years ago
Resolution: --- → INVALID
I'm not familiar with how I will be able to encode the unescaped '#' (since my JS knowledge is quite limited) but it seems like if I convert the hex values to rgb, it will work just fine. Thank you for your time Boris.
> I'm not familiar with how I will be able to encode the unescaped '#' Just call the encodeURIComponent() function on the string. That's a built-in function in JS, and will do the right escaping.
You need to log in before you can comment on or make changes to this bug.