SVG currentcolour specificity

RESOLVED DUPLICATE of bug 265894

Status

()

Core
SVG
RESOLVED DUPLICATE of bug 265894
3 months ago
3 months ago

People

(Reporter: ste.matchboxhero, Unassigned)

Tracking

54 Branch
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

3 months ago
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:54.0) Gecko/20100101 Firefox/54.0
Build ID: 20170418004027

Steps to reproduce:

Create a basic HTML page with an SVG, reference the SVG to output it on the page. Apply basic CSS rules to apply a colour to the body element (blue), set the basic styles of SVGs fill to 'currentcolor'. Create a class with a different fill colour (green) and apply that class to the SVG in the HTML. https://codepen.io/matchboxhero/pen/JNxVKN


Actual results:

The SVG is blue.

https://codepen.io/matchboxhero/pen/JNxVKN


Expected results:

The SVG should be green.

https://codepen.io/matchboxhero/pen/JNxVKN

Comment 1

3 months ago
Blue in Firefox, green in Chrome.

Updated

3 months ago
Status: UNCONFIRMED → RESOLVED
Last Resolved: 3 months ago
Resolution: --- → DUPLICATE
Duplicate of bug: 265894

Comment 3

3 months ago
This is because of the targetting of the use element.

Comment 4

3 months ago
The root cause of this bug is a little bit different with bug 265894, but I will fix them at once in that bug

In bug 265894 comment 27, Amelia gave really useful information(thanks)
- 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.

We clone a symbol referenced element as an SVG element at:
https://hg.mozilla.org/mozilla-central/file/c6af127dce9d/dom/svg/SVGUseElement.cpp#l278

So the cloned element instance, which is an SVG element, matches
svg {
  fill: currentcolor;
}

Bug 265894 violates another item:
- 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.
You need to log in before you can comment on or make changes to this bug.