RESOLVED FIXED 141725
An SVG element without intrinsic size inherits the container size as its viewport instead of inheriting the container viewport 
https://bugs.webkit.org/show_bug.cgi?id=141725
Summary An SVG element without intrinsic size inherits the container size as its view...
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
DetailsFormatted DiffDiff
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
I
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.