Bugzilla

Comment 2

•

12 years ago

Attached image Test - Both Images Should Be Identical (obsolete) — Details

I found a workaround to this bug in my web application that I must apply to the url in the description since its used for development and testing.

I created and attached a test case which better tests the bug, please replace this in the description. It appears that the bug is specific to the <use> element when it is positioned relatively, it's parent node is a nested <svg> element, and that <svg> element has it's width changed dynamically.

<svg>
  <svg id="NestedSVG" width="50%">
    <use x="100%" />
  </svg>
</svg>

NestedSVG.setAttribute('width', '75%');

Updated

•

12 years ago

Attachment #593338 - Attachment mime type: text/plain → image/svg+xml

Comment 3

•

12 years ago

Attached file Test - Both Images Should Be Identical — Details

Attachment #593338 - Attachment is obsolete: true

Comment 4

•

12 years ago

Comment on attachment 593342 [details]
Test - Both Images Should Be Identical

><!DOCTYPE html>
><html>
>	<head>
>		<title>Nested SVG with Relative Positioning</title>
>		
>		<style>
>			html, body {position:relative; border:0 none; outline:0; padding:0; margin:0; min-width:680px width:100%; min-height:680px; height:100%;}
>			#HTMLContainer {position:absolute; left:20%; right:20%; top:0px; bottom:0px;}
>			#svg1 {position:absolute; top:10px;}
>			#svg2 {position:absolute; top:220px;}
>			#span1 {position:absolute; left:0px; right:0px; top:430px; text-align:center; font-size="18px"}
>		</style>
>	</head>
>	
>	<body>
>		<div id="HTMLContainer">
>			<svg id="svg1" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="200px">
>				<rect x="0" y="0" width="100%" height="100%" style="fill:rgb(192,128,128); stroke:none" />
>				<svg id="svgNested" x="30%" y="0" width="40%" height="100%">
>					<defs>
>						<polygon id="polygon11" points="20,0 0,10 20,20" style="fill:rgb(255,255,255); stoke:none" />
>						<polygon id="polygon12" points="0,0 0,20 20,10" style="fill:rgb(255,255,255); stoke:none" />
>					</defs>
>				
>					<rect x="0" y="0" width="100%" height="100%" style="fill:rgb(128,128,192); stroke:none" />
>					<rect x="10%" y="94" width="80%" height="12" style="fill:rgb(255,255,255)" />
>					<text x="0" y="14" transform="translate(1,0)" font-size="14px" fill="rgb(255,255,255)">These Images Must Look Identical</text>
>					<text x="100%" y="190" text-anchor="end" transform="translate(-1,0)" font-size="14px" fill="rgb(255,255,255)">These Images Must Look Identical</text>
>					<line x1="0" y1="28" x2="0%" y2="40" transform="translate(5,0)" style="stroke:rgb(255,255,255); stroke-width:2px" />
>					<line x1="100%" y1="172" x2="100%" y2="160" transform="translate(-5,0)" style="stroke:rgb(255,255,255); stroke-width:2px" />
>					<circle cx="0" cy="55" r="10" transform="translate(10,0)" fill="rgb(255,255,255)" />
>					<circle cx="100%" cy="145" r="10" transform="translate(-10,0)" fill="rgb(255,255,255)" />
>					<use x="0" y="70" xlink:href="#polygon11" />
>					<use x="100%" y="110" transform="translate(-20,0)" xlink:href="#polygon12" />
>				</svg>
>			</svg>
>			
>			<svg id="svg2" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="200px">
>				<defs>
>					<polygon id="polygon21" points="20,0 0,10 20,20" style="fill:rgb(255,255,255); stoke:none" />
>					<polygon id="polygon22" points="0,0 0,20 20,10" style="fill:rgb(255,255,255); stoke:none" />
>				</defs>
>				
>				<rect x="0" y="0" width="100%" height="100%" style="fill:rgb(192,128,128); stroke:none" />
>				<g>
>					<rect x="0" y="0" width="100%" height="100%" style="fill:rgb(128,128,192); stroke:none" />
>					<rect x="10%" y="94" width="80%" height="12" style="fill:rgb(255,255,255)" />
>					<text x="0" y="14" transform="translate(1,0)" font-size="14px" fill="rgb(255,255,255)">These Images Must Look Identical</text>
>					<text x="100%" y="190" text-anchor="end" transform="translate(-1,0)" font-size="14px" fill="rgb(255,255,255)">These Images Must Look Identical</text>
>					<line x1="0%" y1="28" x2="0%" y2="40" transform="translate(5,0)" style="stroke:rgb(255,255,255); stroke-width:2px" />
>					<line x1="100%" y1="172" x2="100%" y2="160" transform="translate(-5,0)" style="stroke:rgb(255,255,255); stroke-width:2px" />
>					<circle cx="0" cy="55" r="10" transform="translate(10,0)" fill="rgb(255,255,255)" />
>					<circle cx="100%" cy="145" r="10" transform="translate(-10,0)" fill="rgb(255,255,255)" />
>					<use x="0" y="70" xlink:href="#polygon21" />
>					<use x="100%" y="110" transform="translate(-20,0)" xlink:href="#polygon22" />
>				</g>
>			</svg>
>			
>			<span id="span1">Please Wait</span>
>		</div>
>		
>		<script>
>			var DOM = {
>				svgNested: document.getElementById('svgNested'),
>				span1: document.getElementById('span1')
>			}
>			
>			function Update() {
>				DOM.svgNested.setAttribute('x', '0');
>				DOM.svgNested.setAttribute('width', '100%');
>				DOM.span1.style.display = 'none';
>			}
>			
>			setTimeout("Update()", 2000);
>		</script>
>	</body>
></html>

Attachment #593342 - Attachment mime type: text/plain → text/html

Assignee

Updated

•

12 years ago

Assignee: nobody → longsonr

Assignee

Updated

•

12 years ago

OS: Mac OS X → All

Hardware: x86 → All

Assignee

Comment 5

•

12 years ago

Attached patch patch — Details — Splinter Review

Attachment #593419 - Flags: review?(jwatt)

Comment 6

•

12 years ago

Comment on attachment 593419 [details] [diff] [review]
patch

Thanks Robert.

Attachment #593419 - Flags: review?(jwatt) → review+

Boris Zbarsky [:bzbarsky]

Assignee

Comment 7

•

12 years ago

pushed https://hg.mozilla.org/integration/mozilla-inbound/rev/452e9dfec0e2

Flags: in-testsuite+

Target Milestone: --- → mozilla13

Reporter

Comment 8

•

12 years ago

Should we backport this to aurora or beta?

Assignee

Comment 9

•

12 years ago

You need a <use> or <foreignObject> that has a percentage x or y attribute.
That needs to be a child of an inner <svg> which doesn't have a viewBox attribute but does have width or height attributes that change. 

So, I don't think it's going to be commonly encountered and it looks like the original site has been updated to work around the bug somehow.

On the other hand the patch is rather simple; a couple of tests which set a flag or clear a cached variable so it's a low risk fix with a test.

Comment 10

•

12 years ago

(In reply to Robert Longson from comment #9)
> You need a <use> or <foreignObject> that has a percentage x or y attribute.
> That needs to be a child of an inner <svg> which doesn't have a viewBox
> attribute but does have width or height attributes that change. 

I wouldn't bet on that being too uncommon myself. And this is really quite a safe patch, since it just makes us do a bit more invalidation when these conditions (common or uncommon) are met.

Comment 11

•

12 years ago

Comment on attachment 593419 [details] [diff] [review]
patch

[Approval Request Comment]
Regression caused by (bug #): bug 689546
User impact if declined: breaks some SVG content (unclear how much)
Testing completed (on m-c, etc.): landed on m-c
Risk to taking this patch (and alternatives if risky): very low
String changes made by this patch: none

Attachment #593419 - Flags: approval-mozilla-beta?

Attachment #593419 - Flags: approval-mozilla-aurora?

Alex Keybl [:akeybl]

Comment 12

•

12 years ago

Comment on attachment 593419 [details] [diff] [review]
patch

[Triage Comment]
Given the low-risk nature of the patch and the fact that we think this may be happening in the wild, approving for Aurora 12 and Beta 11.

Attachment #593419 - Flags: approval-mozilla-beta?

Attachment #593419 - Flags: approval-mozilla-beta+

Attachment #593419 - Flags: approval-mozilla-aurora?

Attachment #593419 - Flags: approval-mozilla-aurora+

Assignee

Comment 13

•

12 years ago

Jonathan, can you land this on beta and aurora please?

Ed Morley [:emorley]

Comment 14

•

12 years ago

https://hg.mozilla.org/mozilla-central/rev/452e9dfec0e2

Status: NEW → RESOLVED

Closed: 12 years ago

Resolution: --- → FIXED

Comment 15

•

12 years ago

Sure thing.

Landed https://tbpl.mozilla.org/?tree=Mozilla-Beta&rev=1a62ea0a1fcc

Will land on m-a later.