[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