| Summary: | An SVG element without intrinsic size inherits the container size as its viewport instead of inheriting the container viewport | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Said Abou-Hallawa <sabouhallawa> |
| Component: | SVG | Assignee: | Said Abou-Hallawa <sabouhallawa> |
| Status: | RESOLVED FIXED | ||
| Severity: | Normal | CC: | commit-queue, krit, simon.fraser, webkit-bug-importer, zalan, zimmermann |
| Priority: | P2 | Keywords: | InRadar |
| Version: | 528+ (Nightly build) | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
| Attachments: | |||
Created attachment 246768 [details]
Test case -- SVG root viewBox is omitted
Created attachment 246769 [details]
Test case -- SVG root viewBox is included
I Created attachment 247742 [details]
Test case -- SVG root size different from CSS size
Created attachment 247743 [details]
Test case -- SVG root size and CSS size are the same
I was wrong about the cause of this bug. The viewBox has nothing to do with the size or the viewport of the <svg> element. The problem is in calculating the viewport of the non-root <svg> element. It inherits the container <svg> element size instead of its viewport. I attached new test cases. The bug happens with the first test case: "Test case -- SVG root size different from CSS size".
In this test case we have the following CSS:
svg {
width: 32px;
height: 32px;
}
And we have the root <svg> element has the following definition:
<svg width='50' height='50'>
And we have a non-root <svg> element has the following definition:
<svg viewbox='0 0 14 14'>
The root <svg> element has the size = {50, 50} but a viewport = {32, 32}
The non-root <svg> inherits the container <svg> size when calculating its viewport. So its viewport = {50, 50}. And this is why the arrow is clipped in the first test case.
Again I was wrong about the reduction of this bug. It is not about a non <svg> without intrinsic size inherits the container size instead of its viewport when calculating the viewport. Actually any element without intrinsic size can have the same bug. Here is the simplest reduction I could get:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lime;
width: 50px;
height: 50px;
}
svg {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div>
<svg width='100' height='100'>
<rect width='50%' height='50%' fill='red'/>
</svg>
</div>
</body>
</html>
In this example, the <svg> says its size = (100,100) but the css overrides that by forcing its size to be = (50, 50). The <rect> width and height are 50% of the <svg> width and height. So it should be drawing a rectangle with size = (25,25). The bug is we draw the rectangle with size = (50, 50) as if the viewport of the svg is =(100, 100). So we end up having only a red rectangle.
Created attachment 247782 [details]
Test case
Created attachment 247789 [details]
Patch
Comment on attachment 247789 [details] Patch Clearing flags on attachment: 247789 Committed r181165: <http://trac.webkit.org/changeset/181165> All reviewed patches have been landed. Closing bug. |
Created attachment 246767 [details] Test case -- SVG root viewBox is omitted Open the first test case in WebKit. Results: The arrow shape is not scaled to fit in the SVG root css rectangle. Expected: The arrow should fit in the SVG root css rectangle. The svg root size = (50, 50) in SVG coordinates And it is also = (32, 32) in css coordinates So the svg root viewBox transformation = "scale(32/50, 32/50)" The bug happens because the transformation in this case = the identity since the 'viewBox' attribute is omitted in the SVG root. If the 'viewBox' attribute is included in the svg root, the bug does not happen. (see the second test case)