Bug 16167 - SVGs with width and height 100% fail to render when used as <img> or CSS image
: SVGs with width and height 100% fail to render when used as <img> or CSS image
Status: RESOLVED FIXED
: WebKit
SVG
: 528+ (Nightly build)
: Macintosh Mac OS X 10.4
: P2 Normal
Assigned To:
:
: InRadar, ReviewedForRadar
:
:
  Show dependency treegraph
 
Reported: 2007-11-27 22:26 PST by
Modified: 2012-04-07 01:46 PST (History)


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 From 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 From 2007-11-27 22:27:58 PST -------
Created an attachment (id=17567) [details]
test case
------- Comment #2 From 2007-11-27 22:28:31 PST -------
Created an attachment (id=17568) [details]
SVG with width and height 100%
------- Comment #3 From 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 From 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 From 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 From 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 From 2008-03-19 05:55:16 PST -------
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 From 2011-06-22 00:56:10 PST -------
(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 From 2011-06-22 01:08:16 PST -------
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 From 2012-04-07 01:46:51 PST -------
(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).