[Webkit-unassigned] [Bug 68995] New: Height of SVG element is incorrectly calculated when svg when width of containing element is set as a percentage

[bugzilla-daemon at webkit.org]

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

           Summary: Height of SVG element is incorrectly calculated when
                    svg when width of containing element is set as a
                    percentage
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: All
               URL: http://e-st.glam.ac.uk/simulationgames/svgheightbug/in
                    dex.html
        OS/Version: All
            Status: UNCONFIRMED
          Severity: Normal
          Priority: P2
         Component: SVG
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: brichard at glam.ac.uk
                CC: zimmermann at kde.org


When an SVG file is set to width = 100% and height = 100% (and viewport is set correctly) and its' containing element width is set in percentages, the height of the SVG image is incorrectly calculated. 
The SVG image displays at the correct size/ratio in browser window, but its' container picks up its' height from the SVG in code and this value is incorrect. It is larger than the SVG height as displayed in the browser window. If you inspect the SVG element and look at the metrics you will see the reported size is way bigger than the displayed size.

To demonstrate the bug I have posted code at http://e-st.glam.ac.uk/simulationgames/svgheightbug/index.html

The green areas are the background of the element containing the SVG. You should only be able to see a small amount of green, which I deliberately set in the css via padding and margins. For correct behaviour open the url in Firefox.
In Webkit you will notice that the green areas are far bigger and break the layout. I've attached a screenshot of the behaviour in Safari OS X.

The height of the containing element should match the height of the SVG as displayed in the browser window.



Other details:
HTML5
SVGs are rendered using Raphaël JS

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.