Closed Bug 700299 Opened 13 years ago Closed 13 years ago

Javascript style.backgroundImage adds &quotes around url

Categories

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

7 Branch
x86_64
Windows 7
defect
Not set
normal

Tracking

()

RESOLVED INVALID

People

(Reporter: orbite, Unassigned)

Details

Attachments

(2 files)

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:7.0.1) Gecko/20100101 Firefox/7.0.1
Build ID: 20110928134238

Steps to reproduce:

document.body.style.backgroundImage = 'url(file.jpg)';


Actual results:

background-image is set to url("file.jpg")


Expected results:

background-image should be set to url(file.jpg) without the escaped quotes.
Attachment #572467 - Attachment mime type: text/plain → text/html
OUTPUT :

<html><head>
        <title>
            Test case 1
        </title>
    </head>
    <body>
		Select and view excuted source code between here
        <script type="text/javascript">
			var elem=document.createElement('div');
			
			elem.id = 'test';
			elem.style.backgroundImage = 'url(file.jpg)';
			
			document.body.appendChild(elem);
        </script><div style="background-image: url(&quot;file.jpg&quot;);" id="test"></div>
		and here
		
    
</body></html>
Does it cause any problems? Does the background not work?
It seems that the quotes are legal, according to the example here:
http://www.w3.org/TR/css3-background/#the-background-image
Component: General → DOM: CSS Object Model
Product: Firefox → Core
QA Contact: general → style-system
Parsing and then serializing CSS values canonicalizes them in various ways.  This is one of those canonicalizations.  

The current proposed standard for serializing a url() value is at http://dev.w3.org/csswg/cssom/#serialize-a-url and http://dev.w3.org/csswg/cssom/#serialize-a-string is what we follow.
Status: UNCONFIRMED → RESOLVED
Closed: 13 years ago
Resolution: --- → INVALID
Yes, it causes problems down further.

And yes, it's normal to have quotes around the url, but NOT ESCAPED.

The computed style should be : url(escaped_url) or url('escaped_url')
Not : url(&quot;escaped_url&quot;)

Note the superfluous escaped quotes : &quot;
Status: RESOLVED → UNCONFIRMED
Resolution: INVALID → ---
> The computed style should be
... what the specification requires, no? 
If the spec was wrong (what's most likely not the case) this would be a spec bug.
Boris was kind enough to refer links to the spec drafts, you can give feedback there (but I don't think it's useful without deep insight in this matter)
Status: UNCONFIRMED → RESOLVED
Closed: 13 years ago13 years ago
Resolution: --- → INVALID
> And yes, it's normal to have quotes around the url, but NOT ESCAPED.

For the CSS value, yes,  but you're not looking at just the CSS value.  You're looking at how it needs to be embedded as a literal in an HTML attribute (via .innerHTML or something? You never actually said, in the bug or in the testcase, which string you're examining).  And this:

  <div style="background-image: url("file.jpg");">

would most certainly do the wrong thing as HTML, yes?
In my code, the quotes work fine.

I do not get them escaped - converted to &quot; entities.
> I do not get them escaped - converted to &quot; entities.

When doing what?  I expect that reporter is selecting the content and doing "view selection source" or something like that.  Is that what you're doing?

Seriously, steps to reproduce are _really_ important.  Otherwise you end up with people talking past each other because they're doing totally different things so of course getting different results.
I looked into DOM Inspector. Still the background image is working so the declaration can't be broken with any entities. At least I think.

But yes, in View selection source, the &quot; entities are there.
(In reply to :aceman from comment #10)
> But yes, in View selection source, the &quot; entities are there.

That's it. That's the reported bug.

(In reply to j.j. from comment #6)
> > The computed style should be
> ... what the specification requires, no? 
> If the spec was wrong (what's most likely not the case) this would be a spec
> bug.

The specs are not in cause. The spec requires the url inside the "url()" to be escaped and without quotes. For instance, url(http://somewhere.com/filename%20with%20space.exe). What Firefox does is adding quotes around the url and then escaping the result. This gives url(&quot;http://somewhere.com/filename%20with%20space.exe&quot;) in View Selection.
> That's it. That's the reported bug.

Thank you for confirming that.  In that case the bug is invalid.  The key part is that once the CSS string with '"' is created per the CSSOM spec it is then being placed inside an HTML attribute value which is itself delimited with '"'.  So the inner pair of '"' has to be HTML-escaped; otherwise they would prematurely end the attribute value.  See comment 7.
(In reply to Boris Zbarsky (:bz) from comment #12)
> > That's it. That's the reported bug.
> 
> Thank you for confirming that.  In that case the bug is invalid.  The key
> part is that once the CSS string with '"' is created per the CSSOM spec it
> is then being placed inside an HTML attribute value which is itself
> delimited with '"'.  So the inner pair of '"' has to be HTML-escaped;
> otherwise they would prematurely end the attribute value.  See comment 7.

The CSS string isn't created with '"'. Firefox adds it superfluously. That's the bug. There is no way to set style.backgroundImage without getting "url(&quot;" at the other end.
> The CSS string isn't created with '"'.

It is per the spec cited in comment 4.

> There is no way to set style.backgroundImage without getting "url(&quot;" at the other
> end.

In the serialization of the HTML, sure.  Why is that a problem?
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: