All users were logged out of Bugzilla on October 13th, 2018

Javascript style.backgroundImage adds &quotes around url

RESOLVED INVALID

Status

()

RESOLVED INVALID
7 years ago
7 years ago

People

(Reporter: orbite, Unassigned)

Tracking

7 Branch
x86_64
Windows 7
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(2 attachments)

(Reporter)

Description

7 years ago
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.
(Reporter)

Comment 1

7 years ago
Created attachment 572467 [details]
Javascript that displays the behavior
(Reporter)

Updated

7 years ago
Attachment #572467 - Attachment mime type: text/plain → text/html
(Reporter)

Comment 2

7 years ago
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>

Comment 3

7 years ago
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
Last Resolved: 7 years ago
Resolution: --- → INVALID
(Reporter)

Comment 5

7 years ago
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;
(Reporter)

Updated

7 years ago
Status: RESOLVED → UNCONFIRMED
Resolution: INVALID → ---

Comment 6

7 years ago
> 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
Last Resolved: 7 years ago7 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?

Comment 8

7 years ago
Created attachment 572487 [details]
testcase with working URL

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.

Comment 10

7 years ago
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.
(Reporter)

Comment 11

7 years ago
(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.
(Reporter)

Comment 13

7 years ago
(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.