Bug 186595

Summary: SVG container has wrong aspect ratio when using vertical writing ("writing-mode: vertical-rl;")
Product: WebKit Reporter: Gabe Giosia <giosia>
Component: WebKit2Assignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: ahmad.saleem792, ap, bfulgham, giosia, mmaxfield, rniwa, sabouhallawa, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari Technology Preview   
Hardware: iPhone / iPad   
OS: iOS 11   
Attachments:
Description Flags
Demonstration of inlining an SVG with vertical language and horizontal language.
none
example HTML for the problem. none

Description Gabe Giosia 2018-06-13 09:57:00 PDT
Created attachment 342667 [details]
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>
Comment 1 Gabe Giosia 2018-06-13 09:59:03 PDT
Created attachment 342668 [details]
example HTML for the problem.
Comment 2 Gabe Giosia 2018-06-14 07:10:19 PDT
For severity considerations: This is severely impacting Japanese content that uses SVGs. e.g. SVGs within ePubs that are displayed using WebKit are sometimes being cropped(SVGs are not fitting within their expected containers because of this bug).
Comment 3 Radar WebKit Bug Importer 2018-06-14 08:53:53 PDT
<rdar://problem/41126338>
Comment 4 Ahmad Saleem 2022-07-19 04:58:33 PDT
I am able to reproduce this bug in Safari 15.5 / Safari Technical Preview 149 on macOS 12.4 and it is showing same issue a shown in the attached screenshot (of demonstration). All other browsers (Chrome Canary 105 and Firefox Nightly 104) match each other. Thanks!