ManualTests/svg-deep-clone-to-new-doc.html - WebKit - Git at Google

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="utf-8" />

   <!-- To run this test: Open this page, close the window, and (hopefully) don't crash.-->

   <script>
     function gc()
     {
         if (window.GCController)
             GCController.collect();
         else
             for (var i = 0; i < 10000; ++i) // Allocate a sufficient number of objects to force a GC.
                 ({});
     }
     window.onload = init;

     function init() {
       var iframe = document.getElementById("iframe");
       var thesvgdiv = document.getElementById('thediv');
       var theclone = thesvgdiv.cloneNode(true);
       iframe.contentDocument.body.appendChild(theclone);
       setTimeout(function() {
         iframe.style.display = 'none';
         iframe.parentNode.removeChild(iframe);
         gc();
         window.close();
       }, 500);
     }
   </script>
 </head>

 <body>
   <div>
     <div id="thediv">
       <svg id="thesvg" width="12cm" height="3.6cm" viewBox="0 0 1000 300">
           <defs>
             <lineargradient id="orange_red" x2="0" y2="1" >
               <stop stop-color="yellow" />
               <stop offset="1" stop-color="red" />
             </lineargradient>
           </defs>
           <path id="MyPath" d="M 100 200  C 200 100 300   0 400 100   C 500 200 600 300 700 200  C 800 100 900 100 900 100" fill="none" stroke="red" />
           <text font-family="Verdana" font-size="72.5" fill="url(#orange_red)" >
             <textpath xlink:href="#MyPath"> Look mom, SVG in HTML! </textpath>
           </text>
           (If you had an HTML5 compliant browser, the previous text would be colored and on a path.)
       </svg>
     </div>
     <div>
       <iframe id="iframe" width="50%" height="50%"></iframe>
     </div>
   </div>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />

	<!-- To run this test: Open this page, close the window, and (hopefully) don't crash.-->

	<script>
	function gc()
	{
	if (window.GCController)
	GCController.collect();
	else
	for (var i = 0; i < 10000; ++i) // Allocate a sufficient number of objects to force a GC.
	({});
	}
	window.onload = init;

	function init() {
	var iframe = document.getElementById("iframe");
	var thesvgdiv = document.getElementById('thediv');
	var theclone = thesvgdiv.cloneNode(true);
	iframe.contentDocument.body.appendChild(theclone);
	setTimeout(function() {
	iframe.style.display = 'none';
	iframe.parentNode.removeChild(iframe);
	gc();
	window.close();
	}, 500);
	}
	</script>
	</head>

	<body>
	<div>
	<div id="thediv">
	<svg id="thesvg" width="12cm" height="3.6cm" viewBox="0 0 1000 300">
	<defs>
	<lineargradient id="orange_red" x2="0" y2="1" >
	<stop stop-color="yellow" />
	<stop offset="1" stop-color="red" />
	</lineargradient>
	</defs>
	<path id="MyPath" d="M 100 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100" fill="none" stroke="red" />
	<text font-family="Verdana" font-size="72.5" fill="url(#orange_red)" >
	<textpath xlink:href="#MyPath"> Look mom, SVG in HTML! </textpath>
	</text>
	(If you had an HTML5 compliant browser, the previous text would be colored and on a path.)
	</svg>
	</div>
	<div>
	<iframe id="iframe" width="50%" height="50%"></iframe>
	</div>
	</div>
	</body>
	</html>