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
: WebKit
SVG
: 528+ (Nightly build)
: All All
: P2 Normal
Assigned To:
:
:
: 82434
:
  Show dependency treegraph
 
Reported: 2012-03-19 22:24 PST by
Modified: 2012-04-02 10:52 PST (History)


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


Note

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


Description From 2012-03-19 22:24:11 PST
Created an attachment (id=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 From 2012-03-19 22:24:52 PST -------
Created an attachment (id=132757) [details]
image that triggers this behavior
------- Comment #2 From 2012-03-19 22:32:51 PST -------
(From update of attachment 132756 [details])
><!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 From 2012-03-20 04:56:25 PST -------
Bug confirmed. If you add "height: 100%" the pixelation stops. I guess I know whats going wrong, investigating.
------- Comment #4 From 2012-03-24 04:52:22 PST -------
Created an attachment (id=133631) [details]
Patch
------- Comment #5 From 2012-03-24 05:24:06 PST -------
(From update of attachment 133631 [details])
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 From 2012-03-24 05:24:14 PST -------
Created an attachment (id=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 From 2012-03-24 05:31:02 PST -------
(In reply to comment #6)
> Created an attachment (id=133632) [details] [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 From 2012-03-25 05:27:06 PST -------
(From update of attachment 132756 [details])
I included the original island.svg testcase, with some slight changes in the patch.
------- Comment #9 From 2012-03-25 05:32:38 PST -------
Created an attachment (id=133677) [details]
Patch v2
------- Comment #10 From 2012-03-25 13:32:44 PST -------
(From update of attachment 133677 [details])
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 From 2012-03-25 13:32:51 PST -------
Created an attachment (id=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 From 2012-03-26 05:04:18 PST -------
Created an attachment (id=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 From 2012-03-26 06:04:09 PST -------
(From update of attachment 133777 [details])
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 From 2012-03-26 06:04:16 PST -------
Created an attachment (id=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 From 2012-03-27 01:57:26 PST -------
Created an attachment (id=134002) [details]
Patch v4
------- Comment #16 From 2012-03-27 02:15:59 PST -------
(From update of attachment 134002 [details])
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 From 2012-03-27 02:25:29 PST -------
Committed r112229: <http://trac.webkit.org/changeset/112229>
------- Comment #18 From 2012-03-27 02:39:07 PST -------
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 From 2012-03-27 11:51:48 PST -------
(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 From 2012-04-02 10:35:15 PST -------
Reopening to attach new patch.
------- Comment #21 From 2012-04-02 10:35:19 PST -------
Created an attachment (id=135129) [details]
Patch
------- Comment #22 From 2012-04-02 10:36:32 PST -------
(From update of attachment 135129 [details])
Just put up this patch to make it easier to see the changes i"m about to commit.
------- Comment #23 From 2012-04-02 10:52:26 PST -------
Committed r112904: <http://trac.webkit.org/changeset/112904>