Closed
Bug 1497361
Opened 6 years ago
Closed 6 years ago
CSS descendent selector does not apply styles to shapes inside of <svg><symbol>
Categories
(Core :: SVG, defect)
Core
SVG
Tracking
()
RESOLVED
INVALID
People
(Reporter: lazdnet, Unassigned)
Details
Attachments
(1 file)
|
442 bytes,
text/html
|
Details |
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36
Steps to reproduce:
1. Create a symbol element in a SVG, give it an ID, add a path or other shape
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="rect"><rect width="15" height="15" fill="orange"/></symbol>
</svg>
2. Add CSS that targets a shape inside of the <symbol> in the original SVG
<style>
html rect { color: green; }
</style>
3. Include the symbol with <use>
<svg focusable="false" aria-hidden="true">
<use xlink:href="#rect"></use>
</svg>
Actual results:
The rectangle is orange.
Changing the selector to the following results in a green rectangle:
rect { color: green; }
When the descendent selector is involved, the styles fail to apply to shapes inside of <symbol>, despite being reflected in the web inspector. Including the <rect> without the <symbol> results in a green rectangle, even with the descendent selector:
<svg xmlns="http://www.w3.org/2000/svg">
<rect width="15" height="15" fill="orange"/>
</svg>
Expected results:
The rectangle is green.
|
Reporter | |
Comment 1•6 years ago
|
||
I was able to reproduce this in Firefox 64.0a1 (2018-10-08), 63.0b12, and 62.0.3, 61.0, and 60.0. I could not find a version that didn't have this bug.
|
|
Reporter | |
Updated•6 years ago
|
OS: Unspecified → Mac OS X
Hardware: Unspecified → x86_64
|
||
Comment 2•6 years ago
|
||
Thanks for the bug report, Larry.
This changed in Firefox 56, bug 265894. That change made us follow the SVG 2 spec for <use> elements, which are now defined in terms of Shadow DOM.
https://svgwg.org/svg2-draft/struct.html#UseStyleInheritance
I don't think other browsers have been updated yet.
Status: UNCONFIRMED → RESOLVED
Closed: 6 years ago
Component: Untriaged → SVG
OS: Mac OS X → All
Product: Firefox → Core
Hardware: x86_64 → All
Resolution: --- → INVALID
|
|
Reporter | |
Comment 3•6 years ago
|
||
Thanks for replying, Cameron.
It seems that this is the relevant piece of information:
> If a CSS rule uses a complex selector to match an element based on its ancestors or siblings, and those ancestors or siblings are not cloned as part of the shadow tree, then that rule would no longer match the element instance.
Since <html> is not cloned as part of the shadow tree, the selector doesn't match. Makes sense.
My original issue actually involved showing/hiding certain paths within the SVG based on an ancestor class, and I can work around this issue by using CSS custom properties.
Cheers!
You need to log in
before you can comment on or make changes to this bug.
Description
•