1098352 - Inspector doesn't set namespaced xlink attributes correctly on SVG elements

Status: NEW

(DevTools :: Inspector, defect, P3)

Description

[Erwann Mest :kud]

Attachment: svg-symbols.svg

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:35.0) Gecko/20100101 Firefox/35.0
Build ID: 20141113004001

Steps to reproduce:

- Use svg-symbols (https://github.com/Hiswe/gulp-svg-symbols) (result of svg-symbols attached in the issue)
- Add the result in the begin of the DOM (just after the body)
- Use:
```
<svg role="img" class="play">
  <use xlink:href="#play"></use>
</svg>
```
- Change it (via inspector or javascript) to:
```
<svg role="img" class="stop">
  <use xlink:href="#stop"></use>
</svg>
```


Actual results:

The svg will be empty/blank/transparent.


Expected results:

It should display "stop" svg.

It works correctly on chrome canary, firefox nightly. Not on dev edition.

Comment 1

[Erwann Mest :kud]

Attachment: When it works.

Comment 2

[Erwann Mest :kud]

Attachment: When it doesn't work.

Comment 3

[Erwann Mest :kud]

( Note to myself: first bug filed for dev edition 

Comment 4

[Erwann Mest :kud]

(oh noes emojis don't work)

Comment 5

[:Gijs (he/him)]

(In reply to Erwann Mest from comment #0)
> Created attachment 8522239 [details]
> svg-symbols.svg
> 
> User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:35.0)
> Gecko/20100101 Firefox/35.0
> Build ID: 20141113004001
> 
> Steps to reproduce:
> 
> - Use svg-symbols (https://github.com/Hiswe/gulp-svg-symbols) (result of
> svg-symbols attached in the issue)
> - Add the result in the begin of the DOM (just after the body)

Which DOM? Can you attach a working testcase?

Comment 6

[Erwann Mest :kud]

Attachment: Test it by changing #play to #stop via inspector.

Comment 7

[Erwann Mest :kud]

You can change it with javascript too but didn't have to make a button for it, mostly that it's the same problem if you change it via js or inspector.

Comment 8

[:Gijs (he/him)]

(In reply to Erwann Mest from comment #7)
> You can change it with javascript too but didn't have to make a button for
> it, mostly that it's the same problem if you change it via js or inspector.

No, I'm afraid not.

This is an inspector bug. It's because initially, the attribute gets parsed as having a namespaceURI of

"http://www.w3.org/1999/xlink"

And afterwards, it has no namespace and its localName is "xlink:href", which breaks all the things.

So instead of editing in the inspector, if you execute this in the console after a reload:

document.querySelector(".play").children[0].setAttributeNS(document.querySelector(".play").children[0].attributes[0].namespaceURI, "href", "#stop")

it works fine.

This is broken on beta and 33 as well, so I'm removing the dev edition references.

CC'ing pbrosset and hsivonen because there was some recent work to improve the situation here. I don't know if/how that's related.

Comment 9

[Erwann Mest :kud]

I've exactly the same problem with react.js though. :(

Comment 10

[Robert Longson [:longsonr]]

Sounds awfully like bug 1008584 which would explain why trunk works.

Comment 11

[:Gijs (he/him)]

(In reply to Robert Longson from comment #10)
> Sounds awfully like bug 1008584 which would explain why trunk works.

Hmm, yes, except trunk doesn't WFM...

Comment 12

[:Gijs (he/him)]

(In reply to Erwann Mest from comment #9)
> I've exactly the same problem with react.js though. :(

(we discussed this out-of-band - the react.js problem was bug 886390, which is indeed fixed on trunk - but this isn't)

Comment 13

[Nicolas Chevobbe [:nchevobbe][PTO back September 7]]

filter on CLIMBING SHOES