[Webkit-unassigned] [Bug 186595] New: SVG container has wrong aspect ratio with right to left languages ("writing-mode: vertical-rl; ")

Wed Jun 13 09:57:00 PDT 2018

https://bugs.webkit.org/show_bug.cgi?id=186595

            Bug ID: 186595
           Summary: SVG container has wrong aspect ratio with right to
                    left languages ("writing-mode: vertical-rl;")
           Product: WebKit
           Version: Safari Technology Preview
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: WebKit2
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: giosia at google.com

Created attachment 342667

  --> https://bugs.webkit.org/attachment.cgi?id=342667&action=review

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="http://www.w3.org/2000/svg" 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="http://www.w3.org/2000/svg" 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>

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20180613/30e58727/attachment.html>