<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - Browser does not fall back to attribute value when style value is invalid or not supported"
href="https://bugs.webkit.org/show_bug.cgi?id=147931">147931</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>Browser does not fall back to attribute value when style value is invalid or not supported
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>528+ (Nightly build)
</td>
</tr>
<tr>
<th>Hardware</th>
<td>Unspecified
</td>
</tr>
<tr>
<th>OS</th>
<td>Unspecified
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>SVG
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>sara.soueidan@gmail.com
</td>
</tr>
<tr>
<th>CC</th>
<td>zimmermann@kde.org
</td>
</tr></table>
<p>
<div>
<pre>Created <span class=""><a href="attachment.cgi?id=258816" name="attach_258816" title="Screenshot showing what the demo looks like in Safari">attachment 258816</a> <a href="attachment.cgi?id=258816&action=edit" title="Screenshot showing what the demo looks like in Safari">[details]</a></span>
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: <a href="http://codepen.io/SaraSoueidan/pen/c30e270090b2460ba6e6833c611e5a76">http://codepen.io/SaraSoueidan/pen/c30e270090b2460ba6e6833c611e5a76</a>
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: <a href="http://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/">http://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/</a></pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>