[Webkit-unassigned] [Bug 135644] New: Proportions of inline SVG element in HTML should respect width, height attributes
bugzilla-daemon at webkit.org
bugzilla-daemon at webkit.org
Wed Aug 6 03:36:41 PDT 2014
Summary: Proportions of inline SVG element in HTML should
respect width, height attributes
Version: 528+ (Nightly build)
AssignedTo: webkit-unassigned at lists.webkit.org
ReportedBy: chocolate.camera at gmail.com
CC: zimmermann at kde.org
Proportions of inline SVG in an HTML document should be taken from the `svg` element's `width` and `height` attributes, if they existing. Consequently, CSS-overriding both dimensions of that `svg` element, but setting one of them to `auto`, should scale both of them while maintaining their ratio relation.
## Steps to reproduce: ##
1. Open <http://codepen.io/anon/pen/etblo> or open the embedded HTML file. The webpage features two instances of the same SVG object, each wrapped in a `figure` element:
1. One instance is inline, using an `svg` element with `width` and `height` attributes.
2. The other instance is linked externally (even though it is actually then embedded in the HTML with a data URI) with an `img` element. The `width` and `height` attributes have been moved from the external SVG object (the `svg` element of which, therefore, lacks them) to this `img` element.
A minimal CSS is overriding both `svg` and `img` elements' dimensions to `width: 100%; height: auto;`, therefore stating that the height should maintain its ratio relation with the width. The `figure` element's default CSS remains as `display: block;` therefore also `width: 100%;` by ommision (and then some margin, irrelevant to this issue).
2. Scale the browser's window to a width considerably **less** than 800px.
3. Scale the browser's window to a width considerably **more** than 800px.
## Expected results: ##
In both 2 & 3, as the width of both `svg` and `img` elements change to fit the width of the window, their height should also change proportionally to the ratio relation between their respective `width` and `height` attributes.
## Actual results: ##
While the `img` element's height behaved as expected, the `svg` elements' height remained fixed to the value of its `height` attribute, even though it had been overridden with CSS to stay proportional to the object's original aspect ratio, which should have been taken from its `width` and `height` attributes.
Consequently, in step 2, the `svg` element displays excessive blank on its top and bottom, and in step 3, it does so too in its left and right.
## Note ##
If, like I suggest, the browser should be using the `width` and `height` attributes of an element to define its original aspect ratio, I just do not know what the browser should actually do, in the case of an SVG object linked externally with an `img` element, when both the SVG object's `svg` element and the `img` element have `width` and `height` attributes with conflicting values. But I think that how to deal with conflicting values is, at any rate, a different issue.
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.
More information about the webkit-unassigned