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

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>