Last Comment Bug 265894 - Support SVG CSS selector matching rules for <svg:use>
: Support SVG CSS selector matching rules for <svg:use>
Status: NEW
Product: Core
Classification: Components
Component: SVG (show other bugs)
: Trunk
: All All
P3 normal with 26 votes (vote)
: ---
Assigned To: Nobody; OK to take it and work on it
: Jet Villegas (:jet)
: 553626 581362 589643 984220 997362 1003185 1081999 1107038 1172900 1194246 1196748 1298557 1305078 (view as bug list)
Depends on:
Blocks: 1223645 svg-enhance 1268431 237020 ietestcenter
  Show dependency treegraph
Reported: 2004-10-24 15:17 PDT by tor
Modified: 2016-10-17 19:57 PDT (History)
46 users (show)
See Also:
Crash Signature:
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---

testcase (1.67 KB, image/svg+xml)
2005-05-31 18:40 PDT, Jonathan Watt [:jwatt]
no flags Details
SVG + CSS match error (640 bytes, application/xml)
2007-02-21 09:10 PST, Mihai Sucan [:msucan]
no flags Details

Description User image tor 2004-10-24 15:17:54 PDT
Comment 1 User image Boris Zbarsky [:bz] (still a bit busy) 2005-02-14 10:58:00 PST
So the issue here is that by the time we're resolving the style context we no
longer know that the element is an anonymous child of <use>, and more
importantly don't know what it was cloned off of.

One possible solution is to change <use> to implement CreateFrameFor() and
expose apis on the frame constructor to do that, somehow.

Another possible solution is to make it possible for nsIAnonymousContentCreator
to hand back not just nodes, but style contexts to be used for them.

I sort of like this last solution... David, what do you think?
Comment 2 User image David Baron :dbaron: ⌚️UTC-8 2005-02-14 12:25:16 PST
Probably the real solution is to reverse the style context <-> frame
relationship.  Using anonymous content creation mechanisms really doesn't make
sense here.

What really needs to happen is:
 * To implement svg:use across documents, we need an SVG document manager object
that manages all the SVG documents involved.
 * Each of those documents needs a style set object. (This really requires
splitting nsStyleSet in half, since some parts of it involve rule tree and style
context tree ownership, and we shouldn't have more than one of those per document.)
 * SVG frame construction needs to get the right style context from the right
style set.
Comment 3 User image Jonathan Watt [:jwatt] 2005-05-31 18:40:56 PDT
Created attachment 184975 [details]

I was about to file a bug on this testcase. I presume fixing this bug will fix
the problem it demonstrates?
Comment 4 User image Holger Will 2005-09-12 10:55:17 PDT
the testcase worksforme 

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8b4) Gecko/20050908 Firefox/1.4
Comment 5 User image Mihai Sucan [:msucan] 2007-02-21 09:10:07 PST
Created attachment 255916 [details]
SVG + CSS match error

I just bumped over this problem minutes ago. Here's a TC for the bug. This shows that one can match the <circle /> as if it's a child of the <g>. This is explicitly not allowed by the W3C SVG 1.1 specification:

"CSS2 selectors cannot be applied to the (conceptually) cloned DOM tree because its contents are not part of the formal document structure."


The TC doesn't fail in Opera 9.
Comment 6 User image Jeff Schiller 2010-01-24 05:19:49 PST
Shouldn't this first testcase be obsoleted?  It works for me also.  The second test case does exhibit the described problem.
Comment 7 User image Robert Longson 2010-03-22 00:27:39 PDT
*** Bug 553626 has been marked as a duplicate of this bug. ***
Comment 8 User image RNicoletto 2010-07-16 13:19:09 PDT
2nd testcase is still valid.
Mozilla/5.0 (Windows; Windows NT 5.1; en-US; rv:2.0b2pre) Gecko/20100716 Minefield/4.0b2pre
Comment 9 User image Robert Longson 2010-07-23 07:39:35 PDT
*** Bug 581362 has been marked as a duplicate of this bug. ***
Comment 10 User image Mike Hemesath 2010-08-17 11:47:53 PDT
I think I've encountered a similar issue but relating to markers instead. In my example I have 3 files:

#1 arrow.svg - Contains a path
#2 marker.svg - Contains a triangle marker
#3 style.css - Applies the triangle marker in marker.svg to the path in arrow.svg and styles it green.
Example File:

Although the external stylesheet rule does successfully place the marker in marker.svg onto the path in arrow.svg, it doesn't apply the green fill style. This test case does work in Opera.
Comment 11 User image Robert Longson 2010-08-17 13:53:38 PDT
I'm fairly sure this use bug is unrelated to any marker issue.
Comment 12 User image Boris Zbarsky [:bz] (still a bit busy) 2010-08-22 23:50:43 PDT
*** Bug 589643 has been marked as a duplicate of this bug. ***
Comment 13 User image Robert Longson 2014-04-16 12:58:52 PDT
*** Bug 997362 has been marked as a duplicate of this bug. ***
Comment 14 User image Daniel Holbert [:dholbert] 2014-04-16 13:05:27 PDT
Comment on attachment 184975 [details]

First testcase is WFM (and has been since soon after it was posted back in 2005, per comment 4 / comment 6). Obsoleting it.
Comment 15 User image Daniel Holbert [:dholbert] 2014-04-29 15:05:43 PDT
*** Bug 1003185 has been marked as a duplicate of this bug. ***
Comment 16 User image Daniel Holbert [:dholbert] 2014-05-08 09:34:35 PDT
*** Bug 984220 has been marked as a duplicate of this bug. ***
Comment 17 User image Boris Zbarsky [:bz] (still a bit busy) 2014-05-08 09:38:32 PDT
Note that nsIAnonymousContentCreator can in fact hand back style contexts with the nodes now.
Comment 18 User image Robert Longson 2014-10-13 08:45:58 PDT
*** Bug 1081999 has been marked as a duplicate of this bug. ***
Comment 19 User image Robert Longson 2014-12-03 05:35:14 PST
*** Bug 1107038 has been marked as a duplicate of this bug. ***
Comment 20 User image Robert Longson 2015-06-09 05:17:44 PDT
*** Bug 1172900 has been marked as a duplicate of this bug. ***
Comment 21 User image Robert Longson 2015-08-13 07:50:56 PDT
*** Bug 1194246 has been marked as a duplicate of this bug. ***
Comment 22 User image Robert Longson 2015-08-20 08:07:24 PDT
*** Bug 1196748 has been marked as a duplicate of this bug. ***
Comment 23 User image therealpaulgrant 2015-09-18 06:07:06 PDT
I came across this bug on my own without finding this one first. I just wanted to provide some further examples. I'm not sure what good it will do, being that the issue is 10 years old, but here it is:
Comment 24 User image Robert Longson 2015-11-11 00:17:59 PST
*** Bug 1223645 has been marked as a duplicate of this bug. ***
Comment 25 User image therealpaulgrant 2016-01-05 09:57:25 PST
If anybody stumbles on this issue in the future, there's a good explanation and workaround by AmeliaBR here:
Comment 26 User image Robert Longson 2016-04-29 10:31:49 PDT
*** Bug 1268431 has been marked as a duplicate of this bug. ***
Comment 27 User image Amelia Bellamy-Royds 2016-09-16 11:31:20 PDT
FYI to anyone working on this (or thinking about starting):

Style matching rules for cloned content in `use` elements have been updated in SVG 2:

The new rules are consistent with the shadow DOM style scoping and inheritance used for web components, with the extra requirement that stylesheets from the source document are cloned into the shadow tree's scope.

This actually results in a few edge cases where Firefox already matches the new rules & the other browsers don't (see the example in that section about changes from SVG 1.1 to SVG 2).  But there are still important changes that need to be made to get Firefox to spec:

- Symbol elements should be cloned as symbol, not as svg.  The distinction about whether a symbol should be rendered or not depends on whether it is a direct child of a use element's shadow root.

- Selectors should not cross the shadow DOM boundary.  E.g., use > circle should never match, even if the use element duplicates a circle, because the cloned circle is in the shadow DOM, not the main DOM.  Hopefully that will be easier to implement now that these rules are consistent with the broader web platform concept of Shadow DOM.

- When the cloned content is from an external file, any <style> blocks in that file should be parsed and cloned into the shadow DOM's scope, after adjusting any URLs if required.

PS:  If anything in the spec is unclear or impossible to implement, please raise a bug on the SVG Working Group's GitHub repo:
Comment 28 User image silverwind 2016-09-19 12:15:44 PDT
*** Bug 1298557 has been marked as a duplicate of this bug. ***
Comment 29 User image Mike Taylor [:miketaylr] 2016-09-22 17:28:20 PDT
This appears to break, reported @
Comment 30 User image Robert Longson 2016-09-23 12:14:52 PDT
*** Bug 1305078 has been marked as a duplicate of this bug. ***

Note You need to log in before you can comment on or make changes to this bug.