Bug 141725 - An SVG element without intrinsic size inherits the container size as its viewport instead of inheriting the container viewport
Summary: An SVG element without intrinsic size inherits the container size as its view...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: 528+ (Nightly build)
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Said Abou-Hallawa
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2015-02-17 14:29 PST by Said Abou-Hallawa
Modified: 2015-03-06 10:16 PST (History)
6 users (show)

See Also:


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

Note You need to log in before you can comment on or make changes to this bug.
Description Said Abou-Hallawa 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)
Comment 1 Said Abou-Hallawa 2015-02-17 14:31:51 PST
Created attachment 246768 [details]
Test case -- SVG root viewBox is omitted
Comment 2 Said Abou-Hallawa 2015-02-17 14:32:32 PST
Created attachment 246769 [details]
Test case -- SVG root viewBox is included
Comment 3 Radar WebKit Bug Importer 2015-02-17 14:33:34 PST
<rdar://problem/19866136>
Comment 4 Said Abou-Hallawa 2015-03-02 20:07:06 PST
I
Comment 5 Said Abou-Hallawa 2015-03-02 20:16:38 PST
Created attachment 247742 [details]
Test case -- SVG root size different from CSS size
Comment 6 Said Abou-Hallawa 2015-03-02 20:19:00 PST
Created attachment 247743 [details]
Test case -- SVG root size and CSS size are the same
Comment 7 Said Abou-Hallawa 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.
Comment 8 Said Abou-Hallawa 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.
Comment 9 Said Abou-Hallawa 2015-03-03 12:41:04 PST
Created attachment 247782 [details]
Test case
Comment 10 Said Abou-Hallawa 2015-03-03 13:43:48 PST
Created attachment 247789 [details]
Patch
Comment 11 WebKit Commit Bot 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>
Comment 12 WebKit Commit Bot 2015-03-06 10:16:20 PST
All reviewed patches have been landed.  Closing bug.