CSS selectors with elements and/or classes outside and inside a <use>

Hello world,

I do have an issue with selectors which are made of several selectors 
(especially class selectors) referring to outside and inside some 
re-<use>d SVG <g>roup.
Just as an example, assume the following CSS selectors:

circle.fgobj { stroke: blue; }
circle.bgobj { stroke: green; }
..fggrp circle.fgobj { fill: white; }
..fggrp circle.bgobj { fill: grey; }
..bggrp use { fill: yellow; }
..bggrp circle.bgobj { fill: red; }
..bggrp rect.fgobj { fill: red; }

and the following SVG code:

<g class="fggrp">
<g id="theobj1">
<circle cx="-25" cy="0" r="20" class="fgobj" />
<circle cx="25" cy="0" r="20" class="bgobj" />
</g>
</g>

<g class="bggrp" transform="translate(-100 0)">
<g id="theobj2">
<circle cx="-25" cy="0" r="20" class="fgobj" />
<circle cx="25" cy="0" r="20" class="bgobj" />
</g>
</g>

<g class="bggrp" transform="translate(100 0)">
<use id="theuse" xlink:href="#theobj1" x="0" y="0" />
</g>

You might get this example (with a few additional components) online on
   http://www.ladenkirche-senfkorn.de/test.svg

According to the spec, SVG 1.1, especially "5.6 The ‘use’ element" on
   http://www.w3.org/TR/SVG11/struct.html#UseElement
we read
> For user agents that support Styling with CSS, the conceptual deep cloning of the referenced element into a non-exposed DOM tree also copies any property values resulting from the CSS cascade ([CSS2], chapter 6) on the referenced element and its contents. CSS2 selectors can be applied to the original (i.e., referenced) elements because they are part of the formal document structure. CSS2 selectors cannot be applied to the (conceptually) cloned DOM tree because its contents are not part of the formal document structure.

Am I right that for the <use> element in the above example (making the 
two circles at the right side in the above example), the value of the 
property "fill" should be "yellow" for both circles, and nothing else? 
Neither a selector of ".fggrp circle.fgobj" nor ".fggrp circle.bgobj" 
nor ".bggrp circle.bgobj" should fire in that case - only the selector 
".bggrp use" matches. So the color of the six circles should be (from 
left to right): Black - red - white - grey - yellow - yellow. But the 
result on various browsers is different (we will mention just the two 
critical circles at the right side):

Firefox (rather old "Iceweasel" 3.0.6 on rather old Debian, as well as 
actual 2x.0 on Windows, MacOSX, Android 4.0) combines the classes from 
outside the use and inside the g, making the right circle "red" which is 
wrong. The left circle of the two is "yellow", which is correct. The bug 
with the wrong inheritance of classes outside the <use> object had been 
reported several times, before.

Opera (rather old 12.02 on a rather old Debian, as well as actual 12.16 
on Windows, and 12.15 on MacOSX, as well as Opera mobile 12.10 on 
Android 4.0.3) makes the two circles similar to the two original circles 
in the middle from which it is a reuse of, making them "white" and 
"grey". The same for IE 9 (9.0.8112.16421 on Windows, to be exact). So, 
the browser inherits class information from outside the original <g> 
which is then re<use>d elsewhere, and this is also a bug, according to 
the spec. But I did not find information about this, so far. And lots of 
browsers do it like that.

Chrome 12.0.742.124 on a rather old Debian shows both circles "yellow", 
thus behaving correct - hooray! But an actual Chrome 28.0.1500.72 m on 
Windows, as well as Chrome 27.0.1453.116 on MacOSX, as well as Chrome on 
Android 4.0.3, behave like the above group of Opera, IE9, and several 
versions of other browsers ...

Safari 5.1.7 on Windows behaves correct - hooray, again! But well, 
Safari 6.0.5 on MacOSX as well as Safari on Ipad (iOS 6.1.3) has again 
the "usual" wrong behaviour of Opera, IE9, and several versions of other 
browsers ...

And finally, another browser with correct behaviour - the built-in 
browser of Android 4.0.3.

That's all browsers I have hands on to check ... anyone else? And more 
important: Is my understanding of "what should be correct" according to 
the standard, correct at all?

Opinions? Thoughts? Or even links to other sources with reference to 
this problem?

Best regards,

Juergen Roethig

P.S.: Hopefully I did not mention any circle or browser in a wrong way 
.... to many circles are flickering in front of my eyes, now ;-)

Received on Thursday, 25 July 2013 10:44:16 UTC