1196748 - Bug with SVG and classes

Status: RESOLVED DUPLICATE of bug 265894

(Firefox :: Untriaged, defect)

Description

[kud]

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

Steps to reproduce:

http://jsbin.com/piriqequvo/1/edit?html,output



Expected results:

It should display the SVG. It works on Chrome.

Comment 1

[kud]

Attachment: macosx-2015-08-20-at-16.39.02.png

Comment 2

[kud]

As you can see in the attachment, my selectors work but it doesn't render well. Plus, if you tick the display:none off, it works.

Comment 3

[Robert Longson [:longsonr]]

The svg within the pmd-Thumbnail-action is display none per 

      .pmd-Thumbnail-action svg {
        display: none;
      }

So nothing should be rendered, which is what Firefox does. Why do you think it should be otherwise?

Comment 4

[kud]

Did you see my attachment? Plus it's not the "action" which is display:none but its svg.

Comment 5

[kud]

Sorry I misread your comment but still. See my attachment. And it works on chrome.

Comment 6

[kud]

The weight of the selector I use to display: block is higher.

Comment 7

[Robert Longson [:longsonr]]

Ahh, you're expecting data-type to work on SVG. Only html elements support data-type attributes, SVG elements do not. Chrome is not currently compliant with any specification in this regard although I understand it's developers would like the specifications changed so they become right, this has not happened yet.

Comment 8

[kud]

Okay. Indeed, the thing is to use "> svg". Cheers.

Comment 9

[arni2033]

(In reply to Robert Longson from comment #3)
> The svg within the pmd-Thumbnail-action is display none per 
> 
>       .pmd-Thumbnail-action svg {
>         display: none;
>       }
> 
> So nothing should be rendered, which is what Firefox does. Why do you think
> it should be otherwise?

Because there's more specific selector over there. I figured out that it's inner SVG in anonymous content what's causing it. So inner SVG gets "display:none" due to the selector.
Fixing the selector to ".pmd-Thumbnail-action > svg" (adding ">") fixes it.
Robert, do you think it should work like that? http://ss.ssmaker.ru/d4ffc531.png

Comment 10

[arni2033]

Here's example without [data-type] http://jsbin.com/tuximilala/1/edit?html,output

Comment 11

[kud]

In fact, it's probably that. In the inspector, you do not see that "use" uses another svg, so you think there's only one svg tag but nope.

Comment 12

[Robert Longson [:longsonr]]

Ahh, I see what's going on now. The data-type was a red-herring, sorry about that.

When we clone the <use> svg into the document it basically becomes another <svg> within that document and we then erroneously keep it as display: none as the other selector (the one in comment 1) matches it.

So it is a valid bug after all, although we do know about it.

Comment 13

[kud]

Thank you very much. ;)