Closed
Bug 1016316
Opened 10 years ago
Closed 10 years ago
CSSStyleSheet.insertRule() escaping inline SVG
Categories
(Core :: DOM: CSS Object Model, defect)
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.
Comment 2•10 years ago
|
||
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.
Comment 4•10 years ago
|
||
> 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.
Description
•