<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 - Using the filter functional notation for background images results in wrong background-size rendering"
href="https://bugs.webkit.org/show_bug.cgi?id=148221">148221</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>Using the filter functional notation for background images results in wrong background-size rendering
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>WebKit Nightly Build
</td>
</tr>
<tr>
<th>Hardware</th>
<td>Macintosh
</td>
</tr>
<tr>
<th>OS</th>
<td>Mac OS X 10.10
</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>bjorklund.emil@gmail.com
</td>
</tr></table>
<p>
<div>
<pre>When using the filter(<image>, <filter-list>) notation for loading a background-image, the background-size property is interpreted incorrectly.
Description:
The rectangle where the background is supposed to be drawn appears to be sized correctly, but inside that rectangle the actual pixels remain at the intrinsic size of the source image. In the demo linked below, the source image is 30px by 16px, and should be resized to 100px by 100px. As you can see in the demo, the image remains at 30x16, but the background tile is 100x100, causing the background tiles to leave transparent gaps. Any background-size measurement or filter combination seems to exhibit this bug.
Expected outcome: background-image should be stretched to 100x100 tiles, covering the element.
Tested on build r188682
Demo: <a href="http://jsbin.com/lodene/8/edit">http://jsbin.com/lodene/8/edit</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>