874945 - SVG fragment embedded within other SVG element renders at incorrect coordinates

Status: RESOLVED WORKSFORME

(Core :: SVG, defect)

Description

[Martin Hejral]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.5; rv:16.0) Gecko/20100101 Firefox/16.0 (Beta/Release)
Build ID: 20121024073032

Steps to reproduce:

‘svg’ elements can appear in the middle of SVG content. This is the mechanism by which SVG document fragments can be embedded within other SVG document fragments.

http://www.w3.org/TR/SVG/struct.html#NewDocument

We are using such construct for SVG viewer in our corporate web app.

You can see SVG-XML code below: 



<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg id="svgMain" preserveAspectRatio="xMinYMin slice" zoomAndPan="disable"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
 shape-rendering="optimizeQuality" 
 onload="setViewBoxSize(-5,-5,1000,500,0,500,1000,500);">


<rect id="" x="0" y="0" width="100%" height="100%" stroke="none" fill="red" opacity=".2"/>

<title>FF BUG: inner svg object with id="svgViewerContent" INCORRECTLY gets "x" value from svg id="svgViewer"</title>



<svg id="svgViewer" x="48%" y="0" width="50%" height="50%" viewBox="0 0 100 100"
     preserveAspectRatio="xMinYMin slice" overflow="visible" transform="translate(0,0)">
	<g id="svgViewerGroup" font-family="Trebuchet MS" transform="translate(0,0)">
	<text x="500" y="500" font-size="48" text-anchor="middle" fill="darkred">x,y [500,500]</text>
	<svg id="svgViewerContent" x="0" y="0" width="100%" height="100%">
		<rect id="" x="0" y="0" width="100%" height="100%" stroke="none" fill="blue" opacity=".2"/>
		<text x="500" y="500" font-size="48" text-anchor="middle" fill="darkred">x,y [500,500]</text>
	</svg>
	</g>
</svg>



</svg>



Actual results:

It seems like inner SVG object with id="svgViewerContent" INCORRECTLY gets "x" value from outer svg id="svgViewer".

So, blue (violet) rectangle within svg id="svgViewerContent" should render at x=48% of browser window width, but real position is close at right margin, probably at x = 2 x 48% ?!

Everything is perfect before FF version 20, but starting with FF 20, fundamental bug appears :-( which prevent correct function of web apps.


Expected results:

Blue (violet) rectangle within svg id="svgViewerContent" should render at x=48% of browser window width.

(Works before FF version 20.)

Comment 1

[Martin Hejral]

Attachment: correct rendering

Comment 2

[Martin Hejral]

Attachment: incorrect rendering starting from FF 20

Comment 3

[Martin Hejral]

Attachment: testcase

In this testcase code is additional JS which try to change viewBox and size of outer SVG element to demonstrate this fact below: 

If x-position of outer SVG element is set to x=0, then inner SVG is rendered at correct position...

Comment 4

[[:Aleksej]]

Maybe a duplicate or a duplicate target.

Comment 5

[(mostly gone) XtC4UaLL [:xtc4uall]]

Confirmed for:
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:22.0) Gecko/20100101 Firefox/22.0 ID:20130618035212 CSet: e55e45536133

This is WFM against:
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:25.0) Gecko/20130625 Firefox/25.0 ID:20130625031238 CSet: bc569033125a
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:23.0) Gecko/20130624 Firefox/23.0 ID:20130624004020 CSet: d5b2aea0d2db

Comment 6

[Martin Hejral]

(In reply to XtC4UaLL [:xtc4uall] from comment #5)
> Confirmed for:
> Mozilla/5.0 (Windows NT 6.1; WOW64; rv:22.0) Gecko/20100101 Firefox/22.0
> ID:20130618035212 CSet: e55e45536133
> 
> This is WFM against:
> Mozilla/5.0 (Windows NT 6.1; WOW64; rv:25.0) Gecko/20130625 Firefox/25.0
> ID:20130625031238 CSet: bc569033125a
> Mozilla/5.0 (Windows NT 6.1; WOW64; rv:23.0) Gecko/20130624 Firefox/23.0
> ID:20130624004020 CSet: d5b2aea0d2db

I can confirm this.

Thank you.