<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 - Safari incorrectly accepts invalid values for -webkit-background-clip (content, padding, & border); should require "-box" suffix"
href="https://bugs.webkit.org/show_bug.cgi?id=156641">156641</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>Safari incorrectly accepts invalid values for -webkit-background-clip (content, padding, & border); should require "-box" suffix
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>Safari 9
</td>
</tr>
<tr>
<th>Hardware</th>
<td>Unspecified
</td>
</tr>
<tr>
<th>OS</th>
<td>OS X 10.11
</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>CSS
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>dholbert@mozilla.com
</td>
</tr></table>
<p>
<div>
<pre>Created <span class=""><a href="attachment.cgi?id=276505" name="attach_276505" title="testcase 1">attachment 276505</a> <a href="attachment.cgi?id=276505&action=edit" title="testcase 1">[details]</a></span>
testcase 1
What steps will reproduce the problem?
(1) Visit <a href="https://jsfiddle.net/d557kky5/">https://jsfiddle.net/d557kky5/</a> or load attached testcase.
What is the expected output?
No red should be visible. (The inner element's background should not be clipped.)
What do you see instead?
Red is visible. (The inner element's background *is* clipped.)
NOTES:
This bug indicates that Safari is incorrectly accepting "-webkit-background-clip:content" as valid CSS. It should not -- "content" is not a valid value for the "background-clip" property. The correct value is "content-box" (note the "-box" suffix).
The same thing happens for "border"/"border-box" & "padding"/"padding-box". (Safari accepts the former values -- missing the "-box" suffix -- in the -webkit-background-clip alias, but it should not.)
More details on this property here:
<a href="https://drafts.csswg.org/css-backgrounds-3/#the-background-clip">https://drafts.csswg.org/css-backgrounds-3/#the-background-clip</a>
Value: <box> [ , <box> ]*
<box> = border-box | padding-box | content-box
I ran into this because Mozilla is implementing support for "-webkit-background-clip" as an alias in Firefox Nightly (and Edge has done the same), and I ran across an ancient WebKit blogpost[1] which did not work in Firefox Nightly or in Edge 13, but which does work in Chrome & Safari. Turns out it's because it relies on one of these old keyword values ("border").
If there's a web-compatibility need to keep these "-box" suffixless aliases around, please let me know, and maybe we'll have to consider adding support for them. But otherwise, please get rid of them for the sake of interoperability. Thanks!
[1] <a href="https://webkit.org/blog/164/background-clip-text/">https://webkit.org/blog/164/background-clip-text/</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>