Bug 106100

Summary: Nested CSS rules not applied to USE elements referring a DEFS element
Product: WebKit Reporter: Maros Urbanec <urbanec.maros>
Component: SVGAssignee: Nobody <webkit-unassigned>
Severity: Normal CC: ahmad.saleem792, ap, rniwa, simon.fraser, webkit-bug-importer, zalan, zimmermann
Priority: P2 Keywords: InRadar
Version: 528+ (Nightly build)   
Hardware: All   
OS: All   
Description Flags
Safari 15.5 matches with Chrome but differs from Firefox none

Description Maros Urbanec 2013-01-04 09:18:39 PST
Following conditions need to be met:
1. have an SVG element nested in HTML document
2. in the SVG, have a DEFS element, containing any element with id and class
3. in the SVG, have an USE element referring to an element in DEFS
4. have a CSS rule targeting the class of the element in DEFS. CSS rule has to contain HTML parent of the element, such as "svg .myClass" or "body .myClass"

CSS rule is not applied.

JsFiddle capturing the use case:
- circle should be red

Once its HTML ancestor is removed from the CSS rule, the rule is applied correctly:
Comment 1 Ahmad Saleem 2022-06-17 15:20:35 PDT
Created attachment 460314 [details]
Safari 15.5 matches with Chrome but differs from Firefox

I am not able to reproduce this bug in Safari 15.5 on macOS 12.4 based on JSFiddle from Comment 01 (with "svg .myCircle" - CSS tag) and it shows expected result of "red circle". It matches with Chrome Canary 105 as shown in the attached screenshot but as seen, Firefox Nightly does not render it as "red" rather "black".

I am not sure on web-spec and which behavior is accurate but based on expected result, I am not able to reproduce this bug and this can be marked as "RESOLVED INVALID" or "RESOLVED CONFIGURATION CHANGED". In case, if Firefox behavior is ideal then it can be changed to "NEW".

If I am testing incorrectly, please retest accordingly. Thanks!
Comment 2 Radar WebKit Bug Importer 2022-06-17 15:21:08 PDT
Comment 3 Ryosuke Niwa 2022-06-17 21:11:16 PDT
Yup, config changed.