Percentage positioning inside SVG symbol

• Component: SVG
• Status: RESOLVED DUPLICATE

[Pavel Manylov]

Created attachment 223828 [details]
screenshot: Firefox (top left, works properly), Chrome (right), latest WebKit (bottom left)

According to SVG specification: 
>> Additionally, there is a new meaning for percentage units defined to be relative to the current viewport since a new viewport has been established
>> …
>> A ‘symbol’ element define new viewports whenever they are instanced by a ‘use’ element.
>> http://www.w3.org/TR/SVG11/coords.html#EstablishingANewViewport"

However, in WebKit (latest WebKit, Safari, dev version of Google Chrome) positioning using percentage cause incorrect positioning relative to main <svg> element. Sometimes (as presented in attachment) elements with such positioning WebKit not renders at all, in latest Safari it renders element incorrectly and then removes rendered element.

On screenshot: Firefox (top left, works properly), Chrome (right), latest WebKit (bottom left).

Test SVG Document:

<svg xmlns='http://www.w3.org/2000/svg'
     xmlns:xlink = "http://www.w3.org/1999/xlink"
     width="100%"
     height="100%"
     viewBox = "0 0 1000 1000"
     preserveAspectRatio = "true">

<defs>
  <symbol id="blueCircle" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="50" style="fill: blue;"/>
  </symbol>

  <symbol id="mainItem" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="50" style="fill: yellow;"/>
    <use xlink:href="#blueCircle" height="10" width="10" x="45" y="45"/>
  </symbol>

  <symbol id="whoIsNowAMainItemHuh" viewBox="0 0 300 300">
    <use xlink:href="#mainItem" x="0" y="0" width="100" height="100"/>
    <use xlink:href="#mainItem" x="100" y="100" width="100" height="100"/>
    <!-- here % should be relative to the `use` of current `symbol` -->
    <use xlink:href="#mainItem" x="65%" y="65%" width="100" height="100"/>
  </symbol>
</defs>

<rect width="1000" height="1000" x="0" y="0" style="fill: green;"/>
<use xlink:href="#whoIsNowAMainItemHuh" width="600" height="600" x="100" y="100"/>


</svg>

[Dirk Schulze]

Created attachment 234826 [details]
Test case

[Ahmad Saleem]

I am able to reproduce this bug in Safari 15.5 on macOS 12.4 and Safari Technical Preview 148, it shows just two circles like in attached screenshot on attached test case. 

All other browsers (Chrome Canary 105 and Firefox Nightly 104) match each other and aligned with screenshot of showing three circles. Thanks!

[Brent Fulgham]

Firefox and chrome handle this properly, Safari does not.

[Radar WebKit Bug Importer]

<rdar://problem/97101092>

[Ahmad Saleem]

Working fine now in WebKit ToT (264792@main) (but broken in STP171).

[Said Abou-Hallawa]

This is fixed by the fix of bug 256702 (264596@main).

*** This bug has been marked as a duplicate of bug 256702 ***