chromium/third_party/blink/manual_tests/svg-deep-clone-to-new-doc.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>