Bug 148221 - Using the filter functional notation for background images results in wrong background-size rendering
Summary: Using the filter functional notation for background images results in wrong b...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: WebKit Nightly Build
Hardware: Macintosh OS X 10.10
: P2 Normal
Assignee: zalan
URL:
Keywords: InRadar
Depends on:
Blocks: 148371
  Show dependency treegraph
 
Reported: 2015-08-20 08:07 PDT by thatemil
Modified: 2015-08-25 15:45 PDT (History)
8 users (show)

See Also:


Attachments
Patch (4.65 KB, patch)
2015-08-23 18:46 PDT, zalan
no flags Details | Formatted Diff | Diff
Patch (4.65 KB, patch)
2015-08-25 14:52 PDT, zalan
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description thatemil 2015-08-20 08:07:36 PDT
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: http://jsbin.com/lodene/8/edit
Comment 1 Simon Fraser (smfr) 2015-08-20 21:03:46 PDT
I'm confused. I didn't think we supported filter(<image>, <filter-list>).
Comment 2 thatemil 2015-08-21 06:43:22 PDT
Well, confusion or no, the filter seems to work fine on the background image (I even tried animating it), it's just the sizing bit that doesn't seem to work. :-)
Comment 3 Simon Fraser (smfr) 2015-08-21 09:03:04 PDT
Ah I see, it was -webkit-filter() until https://trac.webkit.org/changeset/188647.

Yes, this looks like a bug. We're not rendering the filtered output with the correct background-size.
Comment 4 Radar WebKit Bug Importer 2015-08-21 09:04:07 PDT
<rdar://problem/22379518>
Comment 5 zalan 2015-08-22 21:22:59 PDT
genererate filter image ignores the size argument when it copies the source to the destination.    

diff --git a/Source/WebCore/css/CSSFilterImageValue.cpp b/Source/WebCore/css/CSSFilterImageValue.cpp
index 5d80331..41de312 100644
--- a/Source/WebCore/css/CSSFilterImageValue.cpp
+++ b/Source/WebCore/css/CSSFilterImageValue.cpp
@@ -123,7 +123,7 @@ RefPtr<Image> CSSFilterImageValue::image(RenderElement* renderer, const FloatSiz
     std::unique_ptr<ImageBuffer> texture = ImageBuffer::create(size);
     if (!texture)
         return Image::nullImage();
-    texture->context()->drawImage(image, ColorSpaceDeviceRGB, IntPoint());
+    texture->context()->drawImage(image, ColorSpaceDeviceRGB, FloatRect(FloatPoint(0, 0), size));
 
     RefPtr<FilterEffectRenderer> filterRenderer = FilterEffectRenderer::create();
     filterRenderer->setSourceImage(WTF::move(texture));
Comment 6 zalan 2015-08-23 18:46:37 PDT
Created attachment 259744 [details]
Patch
Comment 7 Daniel Bates 2015-08-24 16:43:30 PDT
Comment on attachment 259744 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=259744&action=review

This looks sane to me.

> Source/WebCore/ChangeLog:10
> +        When the size is ignored, we end up paining the image with its native size while the filter

paining => painting

> LayoutTests/ChangeLog:10
> +        When the size is ignored, we end up paining the image with its native size while the filter

Ditto.
Comment 8 Daniel Bates 2015-08-24 16:44:34 PDT
Comment on attachment 259744 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=259744&action=review

> LayoutTests/fast/filter-image/background-filter-image-expected.html:17
> +

Is this empty line necessary?
Comment 9 zalan 2015-08-25 14:52:51 PDT
Created attachment 259882 [details]
Patch
Comment 10 WebKit Commit Bot 2015-08-25 15:45:01 PDT
Comment on attachment 259882 [details]
Patch

Clearing flags on attachment: 259882

Committed r188935: <http://trac.webkit.org/changeset/188935>
Comment 11 WebKit Commit Bot 2015-08-25 15:45:04 PDT
All reviewed patches have been landed.  Closing bug.