<html>
    <head>
      <base href="https://bugs.webkit.org/">
    </head>
    <body><table border="1" cellspacing="0" cellpadding="8">
        <tr>
          <th>Bug ID</th>
          <td><a class="bz_bug_link 
          bz_status_NEW "
   title="NEW - SVG container has wrong aspect ratio with right to left languages ("writing-mode: vertical-rl;")"
   href="https://bugs.webkit.org/show_bug.cgi?id=186595">186595</a>
          </td>
        </tr>

        <tr>
          <th>Summary</th>
          <td>SVG container has wrong aspect ratio with right to left languages ("writing-mode: vertical-rl;")
          </td>
        </tr>

        <tr>
          <th>Product</th>
          <td>WebKit
          </td>
        </tr>

        <tr>
          <th>Version</th>
          <td>Safari Technology Preview
          </td>
        </tr>

        <tr>
          <th>Hardware</th>
          <td>Unspecified
          </td>
        </tr>

        <tr>
          <th>OS</th>
          <td>Unspecified
          </td>
        </tr>

        <tr>
          <th>Status</th>
          <td>NEW
          </td>
        </tr>

        <tr>
          <th>Severity</th>
          <td>Normal
          </td>
        </tr>

        <tr>
          <th>Priority</th>
          <td>P2
          </td>
        </tr>

        <tr>
          <th>Component</th>
          <td>WebKit2
          </td>
        </tr>

        <tr>
          <th>Assignee</th>
          <td>webkit-unassigned@lists.webkit.org
          </td>
        </tr>

        <tr>
          <th>Reporter</th>
          <td>giosia@google.com
          </td>
        </tr></table>
      <p>
        <div>
        <pre>Created <span class=""><a href="attachment.cgi?id=342667" name="attach_342667" title="Demonstration of inlining an SVG with vertical language and horizontal language.">attachment 342667</a> <a href="attachment.cgi?id=342667&action=edit" title="Demonstration of inlining an SVG with vertical language and horizontal language.">[details]</a></span>
Demonstration of inlining an SVG with vertical language and horizontal language.

When inlining an SVG that has "writing-mode: vertical-rl;" the aspect ratio of the container is inverse of what it should be. The SVGs in the following code are identical and display identically in FireFox and Chrome.

WebKit/Safari display the first SVG with an inverted outer container which makes it look like it has padding.

<!DOCTYPE html>
<html>
  <head>
          <style id="prefs_css">
                svg {
                  width:200px;
                  background-color:red;
                }
          </style>
  </head>
  <body>
    <div style="writing-mode: vertical-rl" xml:lang="ja" lang="ja">
          vertical 
          <svg xmlns="<a href="http://www.w3.org/2000/svg">http://www.w3.org/2000/svg</a>" version="1.1" baseProfile="full" viewBox="0 0 1000 1500">
            <ellipse cx="500" cy="750" rx="450" ry="700" style="fill:yellow; stroke:purple; stroke-width:50" />
          </svg>
          vertical
    </div>
    <div style="writing-mode: horizontal-tb" xml:lang="en" lang="en">
          horizontal 
          <svg xmlns="<a href="http://www.w3.org/2000/svg">http://www.w3.org/2000/svg</a>" version="1.1" baseProfile="full" viewBox="0 0 1000 1500">
            <ellipse cx="500" cy="750" rx="450" ry="700" style="fill:yellow; stroke:purple; stroke-width:50" />
          </svg>
          horizontal
    </div>
  </body>
</html></pre>
        </div>
      </p>


      <hr>
      <span>You are receiving this mail because:</span>

      <ul>
          <li>You are the assignee for the bug.</li>
      </ul>
    </body>
</html>