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

Sorry, but in my original posting, I forgot to mention a very important 
sentence from the standard ... I've put it in below ...

Juergen Roethig wrote:
> 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.

And additionally, in the next paragraph, the standard says:
***
Property inheritance, however, works as if the referenced element had 
been textually included as a deeply cloned child of the ‘use’ element. 
The referenced element inherits properties from the ‘use’ element and 
the ‘use’ element's ancestors. An instance of a referenced element does 
not inherit properties from the referenced element's original parents.
***

With that last sentence ("An instance of a referenced element does not 
inherit properties from the referenced element's original parents."), 
you need to read my following conclusion:

> 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 14:42:27 UTC