997362 - SVG defs tag stops the CSS selectors

Status: RESOLVED INVALID

(Core :: SVG, defect)

Description

[Vincent MONIER]

Attachment: css-defs-selector.svg

User Agent: Mozilla/5.0 (Windows NT 5.1; rv:28.0) Gecko/20100101 Firefox/28.0 (Beta/Release)
Build ID: 20140314220517

Steps to reproduce:

Try to use the following CSS selector:

defs rect


Actual results:

The CSS rules won't apply.

Note that the Javascript document.querySelector('defs rect') works.


Expected results:

The CSS "defs rect" selector should apply rules to all "rect" in "defs" tag.

Okay, one may access the "defs" child using class and id, but one should also be able to access then using node's name.

Comment 1

[Vincent MONIER]

It may be similar to Bug 603043

Comment 3

[Robert Longson [:longsonr]]

defs is a red herring. It's <use> that doesn't work properly.

Comment 4

[Daniel Holbert [:dholbert]]

Attachment: testcase with <g> instead of <defs>

(To illustrate Robert's point, here's a simplified version of your testcase with "defs" replaced with "g". The rule matches the version inside of the <g>, making it blue, but it doesn't match its <use>-generated clone.)

Comment 5

[u459114]

https://www.w3.org/TR/SVG2/struct.html#UseStyleInheritance

spec said:
In most cases, the element instance in the shadow tree will match the same style rules as its corresponding element in the original document. However, if a CSS rule uses a complex selector to match an element based on its ancestors or siblings, and those ancestors or siblings are not cloned as part of the shadow tree, then that rule would no longer match the element instance. Similarly, child-indexed pseudo-classes such as nth-of-type and nth-child may apply to one element but not the other. This represents a change from how style cloning was defined in previous versions of SVG. 

In the test case:
  <style>
    g rect
    {
      fill:      blue;
    }
  </style>
  <g>
    <rect id="rectangle" x="1" y="1" width="3" height="3" fill="red"/>
  </g>

  <use xlink:href="#rectangle"  transform="translate(0,10)"/>

We clone only <rect id="rectangle">, its parent(<g>) is not cloned into use-element shadow tree. so "g rect" selector should not match rect element instance in the shadow tree. I think our current behavioir should be correct.

Comment 6

[Vincent MONIER]

So you're meaning that when <use xlink:href="#x"> is used, then spec says "just copy/paste the used node (#x) inside the <use>'s shadow DOM"? And so, a "defs *" will only match what's in the defs node (which is not displayed) but never match what's in <use>'s shadow tree?

If so, I now get it and yes, then it seems that current Firefox's behavior is the right one.

Comment 7

[u459114]

(In reply to Vincent MONIER from comment #6)
> So you're meaning that when <use xlink:href="#x"> is used, then spec says
> "just copy/paste the used node (#x) inside the <use>'s shadow DOM"? And so,
> a "defs *" will only match what's in the defs node (which is not displayed)
> but never match what's in <use>'s shadow tree?
Yes.

You can aslo refer to a sample[1] in spec[2]. 
  <style type="text/css">
    circle          { stroke-opacity: 0.7; }
    .special circle { stroke: green; }
    use             { stroke: purple;
                      fill: orange; }
  </style>
  <g class="special" style="fill: blue">
     <circle id="c" cy="50" cx="50" r="40" 
             stroke-width="20" />
  </g>
  <use xlink:href="#c" x="100" />

You may view this sample on different browsers. FF does not match ".special circle" for the cloned element instance(#c) in the shadow tree.
".special circle" is very like "defs rect" selector defined in your sample(or "g rect" defined in dholbert's sample)

[1] https://www.w3.org/TR/SVG2/images/struct/Use-changed-styles.svg
[2] https://www.w3.org/TR/SVG2/struct.html#UseLayout

Comment 8

[Vincent MONIER]

OK, I was confused because Opera (so I guess webkit) does apply the blue styling to the 2nd square. So I guess it means Webkit is wrong here? Fine for me then.