New issue
Advanced search Search tips

Issue 648046 link

Starred by 1 user
Status: WontFix
Owner: ----
Closed: Sep 2016
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 2
Type: Compat



Sign in to add a comment

SVG <use> does not deep-clone <svg> node

Reported by silv3rw...@gmail.com, Sep 18 2016 
UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:50.0) Gecko/20100101 Firefox/50.0

Example URL:
https://bug1298557.bmoattachments.org/attachment.cgi?id=8785497

Steps to reproduce the problem:
See example URL. Correct rendering should be a red and a blue square.

When a <symbol> is cloned into <use> Blink (and WebKit) create a DOM like

svg > use > path

Firefox creates

svg > use > svg > path

The spec [1] says "The referenced ‘symbol’ and its contents are deep-cloned into the generated tree, with the exception that the ‘symbol’ is replaced by an ‘svg’.". This mentioned <svg> node is missing which can manifest in bugs when one targets <svg> in CSS, as seen in the example.

[1] https://www.w3.org/TR/SVG/struct.html#UseElement

What is the expected behavior?

What went wrong?
<svg> node is not cloned as per spec.

Does it occur on multiple sites: N/A

Is it a problem with a plugin? N/A 

Did this work before? N/A 

Does this work in other browsers? N/A 

Chrome version: SVG <use> does not clone <svg>  Channel: dev
OS Version: OS X 10.12
Flash Version:

Comment 1 by silv3rw...@gmail.com, Sep 18 2016 

Note that the spec is somewhat ambigous. The paragraph above says:

> The effect of a ‘use’ element is as if the contents of the referenced element were deeply cloned into a separate non-exposed DOM tree which had the ‘use’ element as its parent and all of the ‘use’ element's ancestors as its higher-level ancestors.

One could interpret "contents" as everything except the parenting <svg>. See https://bugzilla.mozilla.org/show_bug.cgi?id=1298557 for a bit more discussion.

Comment 2 by f...@opera.com, Sep 19 2016

Status: WontFix (was: Unconfirmed)
Blink does generate a tree like

svg > use > svg > path (with a shadow boundary between 'use' and 'svg')

This is easy to check in DevTools (with the setting "Show user agent shadow DOM" enabled.)

So while you think this may be your problem, it really isn't =)

Your problem stems from:

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

Which means that your 'svg' selector will not apply to the <svg> stemming from the cloned <symbol>. AFAIK, this has never worked correctly in Gecko. I believe this is https://bugzilla.mozilla.org/show_bug.cgi?id=265894 . (They may be saved to some degree by changes in SVG2, but not in this case IIRC.)

Comment 3 by f...@opera.com, Sep 19 2016

Components: Blink>SVG
►

Sign in to add a comment