[Webkit-unassigned] [Bug 154049] New: The heights of SVG elements using relative sizes are miscalculated within border-box parents

bugzilla-daemon at webkit.org bugzilla-daemon at webkit.org
Tue Feb 9 14:59:34 PST 2016


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

            Bug ID: 154049
           Summary: The heights of SVG elements using relative sizes are
                    miscalculated within border-box parents
    Classification: Unclassified
           Product: WebKit
           Version: WebKit Nightly Build
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: SVG
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: anthony.lalande at gmail.com
                CC: zimmermann at kde.org

Overview:
When including an SVG element within a parent element that uses `box-sizing: border-box`, the relative height of the SVG element seems to be miscalculated.


Steps to reproduce:
- Create an enclosing block element with the `box-sizing: border-box` directive.
- Add a padding value > 0 for this enclosing element.
- Create an inner SVG element with the `height: 100%` directive.
- Observe that the SVG element has a height that is too short by a factor of 2x the parent's padding.



Expected results:

I would expect an SVG element to be sized identically to a `<div>` element that uses `box-sizing: border-box`, as here:
https://jsfiddle.net/p9ke6bo9/

Note that the underlying black box forms a 10px "border" all around the white box.


Actual results:

When you change the `<div>` element to `<svg>` in the example above, the black outline grows to 30px at the bottom:
https://jsfiddle.net/p9ke6bo9/1/

This seems to be because the `<svg>` element is subtracting 4 * 10px (instead of 2 * 10px) from the parent element's height.


Additional example:

When you remove the `box-sizing: border-box` directive from the outer element, the inner `<svg>` element draws correctly:
https://jsfiddle.net/p9ke6bo9/3/

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.webkit.org/pipermail/webkit-unassigned/attachments/20160209/c6c8dbb3/attachment-0001.html>


More information about the webkit-unassigned mailing list