Bug 16167 - SVGs with width and height 100% fail to render when used as <img> or CSS image
Summary: SVGs with width and height 100% fail to render when used as <img> or CSS image
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: 528+ (Nightly build)
Hardware: Mac OS X 10.4
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2007-11-27 22:26 PST by Beth Dakin
Modified: 2012-04-07 01:46 PDT (History)
5 users (show)

See Also:


Attachments
test case (181 bytes, text/html)
2007-11-27 22:27 PST, Beth Dakin
no flags Details
SVG with width and height 100% (6.39 KB, image/svg+xml)
2007-11-27 22:28 PST, Beth Dakin
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Beth Dakin 2007-11-27 22:26:55 PST
<rdar://problem/5616982>

The attached html uses an SVG with width and height 100% as an <img>. The <img> gets the appropriate "default" size of 300 x 150, but the SVG never draws inside the space. This default size may be a problem too -- certainly it differs from Opera. But it seems like a more pressing problem that SVG doesn't render at all.
Comment 1 Beth Dakin 2007-11-27 22:27:58 PST
Created attachment 17567 [details]
test case
Comment 2 Beth Dakin 2007-11-27 22:28:31 PST
Created attachment 17568 [details]
SVG with width and height 100%
Comment 3 Eric Seidel (no email) 2007-11-28 12:22:38 PST
The right fix for this is bug 12095.  It requires implementing an interinsicWidth() and intrinsicHeight() call which return Length objects instead of floats.  I think that's all discussed in bug 12095, certainly in one of the bugs around here.  I'm happy to discuss what little more I might know over IRC if you like.
Comment 4 Beth Dakin 2007-12-05 16:11:15 PST
I talked with Hyatt about this, and we think that the approach of new size-negotiation functions on Image will be too low-level a fix. We think this will need to be fixed separately in the background size code, the border code (for border-image) and the <img> rendering code.
Comment 5 Eric Seidel (no email) 2007-12-19 00:38:05 PST
Part of this support was landed with:
http://trac.webkit.org/projects/webkit/changeset/28856

Still need support for background: and border-image: however.
Comment 6 Beth Dakin 2007-12-19 12:10:08 PST
Support was added for background in r28637, and for border-image in r28778. This is fixed. 
Comment 7 Robert Blaut 2008-03-19 05:55:16 PDT
I have to reopen the bug. Attached test case doesn't work in the latest Webkit r31132 on Mac OS X 10.5
Comment 8 Nikolas Zimmermann 2011-06-22 00:56:10 PDT
(In reply to comment #0)
> <rdar://problem/5616982>
> 
> The attached html uses an SVG with width and height 100% as an <img>. The <img> gets the appropriate "default" size of 300 x 150, but the SVG never draws inside the space. This default size may be a problem too -- certainly it differs from Opera. But it seems like a more pressing problem that SVG doesn't render at all.

Heh I hope you did not mean that the square is black when you said "it doesn't render at all".
The ballon.svg has a failure in it: It uses the non-existant <def> element. Inside that block no renderer is created at all -- Opera just ignores this, which is wrong.

If you do s/def/defs/ the balloon.svg (standalone) looks and animates just as in Opera.

If you embed balloon.svg (with the s/def/defs/ fix) in your test html document, you'll now see a  turquoise	 part of the image. You will _not_ see the balloon.svg scaled to fit in the <img>, this would be wrong. Compare to Opera.

Anyhow, I'm testing this with my local SVG-as-image-rewrite-patch, but it was correct before as well.
Comment 9 Nikolas Zimmermann 2011-06-22 01:08:16 PDT
Note that using:

div {
width: 100px;
height: 100px;
}

<div> <img src="someImgWithNoViewBoxAndWidthHeight100p.svg"> </div>

That renders fine, but "img, div { width: 100px; height: 100px; }" disables rendering at the moment, so the bug is still valid, but in a different form. I'm working on it.
Comment 10 Nikolas Zimmermann 2012-04-07 01:46:51 PDT
(In reply to comment #9)
When fixing the attached balloon.svg like I described in an older post - we're now matching the Opera behavior 1:1. FF is different it sizes the image to 300x150, but this is not correct. The <img> should be sized 100x100.

If you want the SVG image with width/height 100% to fit into the 100x100 box of the <img>, you need to supply a viewBox on the embedded <svg>, as percentage values do NOT define an intrinsic size. Currently this image has neither an intrinsic size, nor an intrinsic ratio, so the rendering from trunk is absolutely correct. This is already covered by existing tests, so we can close this bug report now!

--
I'm going to file another bug report for balloon.svg, it makes use of SVGSVGElement.viewport which we currently don't implement - that's why the background doesn't look as intended (viewport size is 0,0).
(Note that this balloon.svg is already checked in LayoutTests/svg/as-background-image/resources, so it's fine to close this bug).