Bug 81631 - <img style='width: 100%' src='foo.svg'> gets pixellated when stretched
: <img style='width: 100%' src='foo.svg'> gets pixellated when stretched
Status: RESOLVED FIXED
Product: WebKit
Classification: Unclassified
Component: SVG
: 528+ (Nightly build)
: All All
: P2 Normal
Assigned To: Nikolas Zimmermann
:
Depends on: 82434
Blocks:
  Show dependency treegraph
 
Reported: 2012-03-19 22:24 PDT by Nathan Sharfi
Modified: 2012-04-02 10:52 PDT (History)
6 users (show)

See Also:


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

Note You need to log in before you can comment on or make changes to this bug.
Description Nathan Sharfi 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
Comment 1 Nathan Sharfi 2012-03-19 22:24:52 PDT
Created attachment 132757 [details]
image that triggers this behavior
Comment 2 Nathan Sharfi 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>
Comment 3 Nikolas Zimmermann 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.
Comment 4 Nikolas Zimmermann 2012-03-24 04:52:22 PDT
Created attachment 133631 [details]
Patch
Comment 5 WebKit Review Bot 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
Comment 6 WebKit Review Bot 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
Comment 7 Nikolas Zimmermann 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.
Comment 8 Nikolas Zimmermann 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.
Comment 9 Nikolas Zimmermann 2012-03-25 05:32:38 PDT
Created attachment 133677 [details]
Patch v2
Comment 10 WebKit Review Bot 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
Comment 11 WebKit Review Bot 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
Comment 12 Nikolas Zimmermann 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
Comment 13 WebKit Review Bot 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
Comment 14 WebKit Review Bot 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
Comment 15 Nikolas Zimmermann 2012-03-27 01:57:26 PDT
Created attachment 134002 [details]
Patch v4
Comment 16 Antti Koivisto 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.
Comment 17 Nikolas Zimmermann 2012-03-27 02:25:29 PDT
Committed r112229: <http://trac.webkit.org/changeset/112229>
Comment 18 Nikolas Zimmermann 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.
Comment 19 Nathan Sharfi 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!
Comment 20 Stephen Chenney 2012-04-02 10:35:15 PDT
Reopening to attach new patch.
Comment 21 Stephen Chenney 2012-04-02 10:35:19 PDT
Created attachment 135129 [details]
Patch
Comment 22 Stephen Chenney 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.
Comment 23 Stephen Chenney 2012-04-02 10:52:26 PDT
Committed r112904: <http://trac.webkit.org/changeset/112904>