Bug 81631

Summary:

<img style='width: 100%' src='foo.svg'> gets pixellated when stretched

Product:

WebKit

Reporter:

Nathan Sharfi <bonusfrogs>

Component:

SVG

Assignee:

Nikolas Zimmermann <zimmermann>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

dglazkov, japhet, logingx, schenney, webkit.review.bot, zimmermann

Priority:

Version:

528+ (Nightly build)

Hardware:

All

OS:

All

Bug Depends on:

82434

Bug Blocks:

Attachments:

Description	Flags
test case (requires island.svg)	none
image that triggers this behavior	none
Patch	none
Archive of layout-test-results from ec2-cr-linux-04	none
Patch v2	none
Archive of layout-test-results from ec2-cr-linux-04	none
Patch v3	none
Archive of layout-test-results from ec2-cr-linux-02	none
Patch v4	none
Patch	none

Nathan Sharfi

Reported 2012-03-19 22:24:11 PDT

Created attachment 132756 [details] test case (requires island.svg) # Overview When I use an SVG image with the img tag and set its width to 100%, the image will look pixellated (as if it were a scaled-up bitmap) if the image's container is wider than the SVG's own size (set with `width`, `height`, and `viewBox`). # Steps to reproduce 1) View attached test case in a browser window. 2) Ensure that the browser window is significantly wider than 300 pixels. Most normal desktop browser window widths should work. # Actual results The black stroke looks fuzzy and pixellated. # Expected results The black stroke should look smoothly scaled up as in the browsers that display this OK (see below) # Build Date & Platform The first WebKit nightly that I noticed this behavior in is 5.1.3 (7534.53.10, r111220). # Additional Builds and Platforms Safari 5.1.3 (7534.53.10)/OS X: OK Safari/iOS 5.1 (9B176): OK Chrome 17.0.963.79/OS X: FAIL Chrome 17.0.963.79/Vista: FAIL Firefox 11.0/OS X: OK IE 9.0.8112.16421/Vista: OK

Attachments
test case (requires island.svg) (381 bytes, text/html) 2012-03-19 22:24 PDT, Nathan Sharfi	no flags	Details
image that triggers this behavior (805 bytes, image/svg+xml) 2012-03-19 22:24 PDT, Nathan Sharfi	no flags	Details
Patch (43.86 KB, patch) 2012-03-24 04:52 PDT, Nikolas Zimmermann	no flags	Details Formatted Diff Diff
Archive of layout-test-results from ec2-cr-linux-04 (10.23 MB, application/zip) 2012-03-24 05:24 PDT, WebKit Review Bot	no flags	Details
Patch v2 (48.36 KB, patch) 2012-03-25 05:32 PDT, Nikolas Zimmermann	no flags	Details Formatted Diff Diff
Archive of layout-test-results from ec2-cr-linux-04 (10.64 MB, application/zip) 2012-03-25 13:32 PDT, WebKit Review Bot	no flags	Details
Patch v3 (49.81 KB, patch) 2012-03-26 05:04 PDT, Nikolas Zimmermann	no flags	Details Formatted Diff Diff
Archive of layout-test-results from ec2-cr-linux-02 (10.21 MB, application/zip) 2012-03-26 06:04 PDT, WebKit Review Bot	no flags	Details
Patch v4 (50.75 KB, patch) 2012-03-27 01:57 PDT, Nikolas Zimmermann	no flags	Details Formatted Diff Diff
Patch (1.17 MB, patch) 2012-04-02 10:35 PDT, Stephen Chenney	no flags	Details Formatted Diff Diff
Show Obsolete (7) View All Add attachment proposed patch, testcase, etc.

Nathan Sharfi

Comment 1 2012-03-19 22:24:52 PDT

Created attachment 132757 [details] image that triggers this behavior

Nathan Sharfi

Comment 2 2012-03-19 22:32:51 PDT

Comment on attachment 132756 [details] test case (requires island.svg) ><!DOCTYPE html> ><html lang="en-US"> ><head> > <meta charset="UTF-8" /> > <title>Untitled</title> ></head> ><body> > ><img style='width: 100%;' src='https://bugs.webkit.org/attachment.cgi?id=132757'> > ><p>The above image should be smooth at any size. The black stroke around the edge should not look pixellated even if the browser window is twice (or more) times as wide as the image's 300 pixels of width.</p> > ></body> ></html>

Nikolas Zimmermann

Comment 3 2012-03-20 04:56:25 PDT

Bug confirmed. If you add "height: 100%" the pixelation stops. I guess I know whats going wrong, investigating.

Nikolas Zimmermann

Comment 4 2012-03-24 04:52:22 PDT

Created attachment 133631 [details] Patch

WebKit Review Bot

Comment 5 2012-03-24 05:24:06 PDT

Comment on attachment 133631 [details] Patch Attachment 133631 [details] did not pass chromium-ews (chromium-xvfb): Output: http://queues.webkit.org/results/12131063 New failing tests: platform/chromium/media/video-scales-in-media-document.html fast/writing-mode/block-level-images.html media/video-aspect-ratio.html media/video-transformed.html fast/table/quote-text-around-iframe.html media/video-layer-crash.html media/video-colorspace-yuv422.html media/video-colorspace-yuv420.html

WebKit Review Bot

Comment 6 2012-03-24 05:24:14 PDT

Created attachment 133632 [details] Archive of layout-test-results from ec2-cr-linux-04 The attached test failures were seen while running run-webkit-tests on the chromium-ews. Bot: ec2-cr-linux-04 Port: <class 'webkitpy.common.config.ports.ChromiumXVFBPort'> Platform: Linux-2.6.35-28-virtual-x86_64-with-Ubuntu-10.10-maverick

Nikolas Zimmermann

Comment 7 2012-03-24 05:31:02 PDT

(In reply to comment #6) > Created an attachment (id=133632) [details] > Archive of layout-test-results from ec2-cr-linux-04 Wow, this is the first time the bot was so kind to offer me these results :-) Exactly what I was looking for.

Nikolas Zimmermann

Comment 8 2012-03-25 05:27:06 PDT

Comment on attachment 132756 [details] test case (requires island.svg) I included the original island.svg testcase, with some slight changes in the patch.

Nikolas Zimmermann

Comment 9 2012-03-25 05:32:38 PDT

Created attachment 133677 [details] Patch v2

WebKit Review Bot

Comment 10 2012-03-25 13:32:44 PDT

Comment on attachment 133677 [details] Patch v2 Attachment 133677 [details] did not pass chromium-ews (chromium-xvfb): Output: http://queues.webkit.org/results/12133453 New failing tests: fast/images/zoomed-img-size.html fast/writing-mode/block-level-images.html tables/mozilla/bugs/bug67915-1.html tables/mozilla/bugs/bug12709.html css1/formatting_model/floating_elements.html fast/repaint/block-layout-inline-children-replaced.html tables/mozilla/bugs/bug96343.html tables/mozilla_expected_failures/bugs/bug85016.html

WebKit Review Bot

Comment 11 2012-03-25 13:32:51 PDT

Created attachment 133688 [details] Archive of layout-test-results from ec2-cr-linux-04 The attached test failures were seen while running run-webkit-tests on the chromium-ews. Bot: ec2-cr-linux-04 Port: <class 'webkitpy.common.config.ports.ChromiumXVFBPort'> Platform: Linux-2.6.35-28-virtual-x86_64-with-Ubuntu-10.10-maverick

Nikolas Zimmermann

Comment 12 2012-03-26 05:04:18 PDT

Created attachment 133777 [details] Patch v3 Fix rounding differences, restore truncate intrinsicRatio to int behavior, we can only fix this for real once the sub pixel layout branch is fully merged

WebKit Review Bot

Comment 13 2012-03-26 06:04:09 PDT

Comment on attachment 133777 [details] Patch v3 Attachment 133777 [details] did not pass chromium-ews (chromium-xvfb): Output: http://queues.webkit.org/results/12134796 New failing tests: tables/mozilla_expected_failures/bugs/bug85016.html fast/writing-mode/block-level-images.html

WebKit Review Bot

Comment 14 2012-03-26 06:04:16 PDT

Created attachment 133790 [details] Archive of layout-test-results from ec2-cr-linux-02 The attached test failures were seen while running run-webkit-tests on the chromium-ews. Bot: ec2-cr-linux-02 Port: <class 'webkitpy.common.config.ports.ChromiumXVFBPort'> Platform: Linux-2.6.35-28-virtual-x86_64-with-Ubuntu-10.10-maverick

Nikolas Zimmermann

Comment 15 2012-03-27 01:57:26 PDT

Created attachment 134002 [details] Patch v4

Antti Koivisto

Comment 16 2012-03-27 02:15:59 PDT

Comment on attachment 134002 [details] Patch v4 View in context: https://bugs.webkit.org/attachment.cgi?id=134002&action=review r=me > Source/WebCore/rendering/RenderImage.cpp:512 > + // Propagate container size to image resource. > + IntSize containerSize = IntSize(contentWidth(), contentHeight()); Unnecessary copy.

Nikolas Zimmermann

Comment 17 2012-03-27 02:25:29 PDT

Committed r112229: <http://trac.webkit.org/changeset/112229>

Nikolas Zimmermann

Comment 18 2012-03-27 02:39:07 PDT

Thanks for the quick review, landed with the fix included. Nathan, please verify your problems are gone - if you find more SVGImage problems, I'm happy to hear about them.

Nathan Sharfi

Comment 19 2012-03-27 11:51:48 PDT

(In reply to comment #18) > Thanks for the quick review, landed with the fix included. > Nathan, please verify your problems are gone - if you find more SVGImage problems, I'm happy to hear about them. Works for me. Thanks!

Stephen Chenney

Comment 20 2012-04-02 10:35:15 PDT

Reopening to attach new patch.

Stephen Chenney

Comment 21 2012-04-02 10:35:19 PDT

Created attachment 135129 [details] Patch

Stephen Chenney

Comment 22 2012-04-02 10:36:32 PDT

Comment on attachment 135129 [details] Patch Just put up this patch to make it easier to see the changes i"m about to commit.

Stephen Chenney

Comment 23 2012-04-02 10:52:26 PDT

Committed r112904: <http://trac.webkit.org/changeset/112904>

Note You need to log in before you can comment on or make changes to this bug.