ManualTests/svg-deep-clone-to-new-doc.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3 <head>
   4   <meta charset="utf-8" />
   5
   6   <!-- To run this test: Open this page, close the window, and (hopefully) don't crash.-->
   7
   8   <script>
   9     function gc()
  10     {
  11         if (window.GCController)
  12             GCController.collect();
  13         else
  14             for (var i = 0; i < 10000; ++i) // Allocate a sufficient number of objects to force a GC.
  15                 ({});
  16     }
  17     window.onload = init;
  18
  19     function init() {
  20       var iframe = document.getElementById("iframe");
  21       var thesvgdiv = document.getElementById('thediv');
  22       var theclone = thesvgdiv.cloneNode(true);
  23       iframe.contentDocument.body.appendChild(theclone);
  24       setTimeout(function() {
  25         iframe.style.display = 'none';
  26         iframe.parentNode.removeChild(iframe);
  27         gc();
  28         window.close();
  29       }, 500);
  30     }
  31   </script>
  32 </head>
  33
  34 <body>
  35   <div>
  36     <div id="thediv">
  37       <svg id="thesvg" width="12cm" height="3.6cm" viewBox="0 0 1000 300">
  38           <defs>
  39             <lineargradient id="orange_red" x2="0" y2="1" >
  40               <stop stop-color="yellow" />
  41               <stop offset="1" stop-color="red" />
  42             </lineargradient>
  43           </defs>
  44           <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" />
  45           <text font-family="Verdana" font-size="72.5" fill="url(#orange_red)" >
  46             <textpath xlink:href="#MyPath"> Look mom, SVG in HTML! </textpath>
  47           </text>
  48           (If you had an HTML5 compliant browser, the previous text would be colored and on a path.)
  49       </svg>
  50     </div>
  51     <div>
  52       <iframe id="iframe" width="50%" height="50%"></iframe>
  53     </div>
  54   </div>
  55 </body>
  56 </html>