[Webkit-unassigned] [Bug 135644] New: Proportions of inline SVG element in HTML should respect width, height attributes

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=135644

           Summary: Proportions of inline SVG element in HTML should
                    respect width, height attributes
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: Unspecified
               URL: http://codepen.io/anon/pen/etblo
        OS/Version: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: SVG
        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.