Browser does not fall back to attribute value when style value is invalid or not supported

• Component: SVG
• Status: RESOLVED CONFIGURATION CHANGED

[Sara Soueidan]

Created attachment 258816 [details]
Screenshot showing what the demo looks like in Safari

An SVG element that has a fill color specified using both a fill attribute and a style attribute with fill property declaration, the browser needs to be able to fall back to the fill attribute value if the value in the style attribute is not valid.

In this particular case, an SVG element is styled using CSS variables inside a style attribute. Since Safari does not support CSS variables yet, it is supposed to ignore the fill value in the style tag (using the variable) and fall back to the fill value in the fill attribute.

Live example: http://codepen.io/SaraSoueidan/pen/c30e270090b2460ba6e6833c611e5a76

The robots should all be colored and look alike in Safari, as they do in Chrome, for example. But instead, Safari falls back to all black colors (the user agent defaults) because it does not use the fill attribute fallback provided.

More reference on this technique, how it works, and what's supposed to happen here: http://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/

[Brent Fulgham]

Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.