319779 - Data url's in CSS are not rendered

Status: RESOLVED INVALID

(Core :: CSS Parsing and Computation, defect)

Description

[Farrel Lifson]

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.7.12) Gecko/20051028 Firefox/1.0.7
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.7.12) Gecko/20051028 Firefox/1.0.7

Using the following example from Wikipedia's page on data urls (http://en.wikipedia.org/wiki/Data:_URL) which I put in a stylesheet:

ul.checklist > li.complete { margin-left: 20px; background:
  url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAA
    ABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeN
    Ge4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC) top left no-repeat; }

with the following HTML:
<ul class="checklist">
	<li class="complete">Complete</li>
	<li>Not complete</li>
</ul>

however the checkbox (the data in the data url) is not rendered. I get the plain old rounded list bullet.

The Wikipedia page says Mozilla supports data urls and I definitely know it supports them when they are embedded in HTML, but does not say whether Mozilla supports data urls in CSS. So this may be less of a bug and more of a feature request if it doesn't yet exist.


Reproducible: Always

Steps to Reproduce:
1. Put data url in CSS
2. Use CSS in HTML


Actual Results:  
No image is rendered

Expected Results:  
Rendered a black and white checkbox

I'm on Gentoo Linux using FF 1.0.7.

If this is not a bug change it to a feature request.

Comment 1

[Farrel Lifson]

When I say "embedded in HTML" I'm referring to it being used in the src attribute of img tags with no probs.

Comment 2

[Richard Brodie]

Attachment: Testcase

Comment 3

[Richard Brodie]

It works if you drop a few blackslash escapes in: the original CSS as posted does not validate. Feel free to fix Wikipedia ;)

Comment 4

[Brian Lalonde]

According to the spec at http://www.w3.org/TR/CSS21/syndata.html#uri , only the comma needs to be escaped (although the original code works fine for me--in Win FF 3.0.1).

Quotes around the URL would also be compliant.