Bug 141725

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:

Keywords:

InRadar

Version:

528+ (Nightly build)

Hardware:

Unspecified

OS:

Unspecified

Attachments:

Description	Flags
Test case -- SVG root viewBox is omitted	none
Test case -- SVG root viewBox is omitted	none
Test case -- SVG root viewBox is included	none
Test case -- SVG root size different from CSS size	none
Test case -- SVG root size and CSS size are the same	none
Test case	none
Patch	none

Said Abou-Hallawa

Reported 2015-02-17 14:29:57 PST

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)

Attachments
Test case -- SVG root viewBox is omitted (500 bytes, text/html) 2015-02-17 14:29 PST, Said Abou-Hallawa	no flags	Details
Test case -- SVG root viewBox is omitted (480 bytes, text/html) 2015-02-17 14:31 PST, Said Abou-Hallawa	no flags	Details
Test case -- SVG root viewBox is included (500 bytes, text/html) 2015-02-17 14:32 PST, Said Abou-Hallawa	no flags	Details
Test case -- SVG root size different from CSS size (493 bytes, text/html) 2015-03-02 20:16 PST, Said Abou-Hallawa	no flags	Details
Test case -- SVG root size and CSS size are the same (493 bytes, text/html) 2015-03-02 20:19 PST, Said Abou-Hallawa	no flags	Details
Test case (334 bytes, text/html) 2015-03-03 12:41 PST, Said Abou-Hallawa	no flags	Details
Patch (6.59 KB, patch) 2015-03-03 13:43 PST, Said Abou-Hallawa	no flags	Details Formatted Diff Diff
Show Obsolete (5) View All Add attachment proposed patch, testcase, etc.

Said Abou-Hallawa

Comment 1 2015-02-17 14:31:51 PST

Created attachment 246768 [details] Test case -- SVG root viewBox is omitted

Said Abou-Hallawa

Comment 2 2015-02-17 14:32:32 PST

Created attachment 246769 [details] Test case -- SVG root viewBox is included

Radar WebKit Bug Importer

Comment 3 2015-02-17 14:33:34 PST

<rdar://problem/19866136>

Said Abou-Hallawa

Comment 4 2015-03-02 20:07:06 PST

Said Abou-Hallawa

Comment 5 2015-03-02 20:16:38 PST

Created attachment 247742 [details] Test case -- SVG root size different from CSS size

Said Abou-Hallawa

Comment 6 2015-03-02 20:19:00 PST

Created attachment 247743 [details] Test case -- SVG root size and CSS size are the same

Said Abou-Hallawa

Comment 7 2015-03-02 20:27:31 PST

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.

Said Abou-Hallawa

Comment 8 2015-03-03 12:39:00 PST

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.

Said Abou-Hallawa

Comment 9 2015-03-03 12:41:04 PST

Created attachment 247782 [details] Test case

Said Abou-Hallawa

Comment 10 2015-03-03 13:43:48 PST

Created attachment 247789 [details] Patch

WebKit Commit Bot

Comment 11 2015-03-06 10:16:14 PST

Comment on attachment 247789 [details] Patch Clearing flags on attachment: 247789 Committed r181165: <http://trac.webkit.org/changeset/181165>

WebKit Commit Bot

Comment 12 2015-03-06 10:16:20 PST

All reviewed patches have been landed. Closing bug.

Note You need to log in before you can comment on or make changes to this bug.