third_party/WebKit/LayoutTests/svg/custom/clone-element-with-animated-svg-properties.html

   1 <html>
   2 <head>
   3     <style type="text/css">
   4       .cls1 {
   5         stroke: black;
   6         fill: rgb(0,128,255);
   7         stroke-width: 1;
   8       }
   9     </style>
  10
  11 <script type="text/javascript">
  12 function setup() {
  13  var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  14  svg.width.baseVal.valueAsString = "400px";
  15  svg.height.baseVal.valueAsString = "400px";
  16  svg.viewBox.baseVal.x = 0;
  17  svg.viewBox.baseVal.y = 0;
  18  svg.viewBox.baseVal.width = 200;
  19  svg.viewBox.baseVal.height = 90;
  20  var ellipse1 = document.createElementNS("http://www.w3.org/2000/svg", "ellipse");
  21  ellipse1.cx.baseVal.value = 50;
  22  ellipse1.cy.baseVal.value = 50;
  23  ellipse1.rx.baseVal.value = 30;
  24  ellipse1.ry.baseVal.value = 10;
  25  ellipse1.style.setProperty("stroke", "black", "");
  26  ellipse1.style.setProperty("fill", "red", "");
  27  var ellipse2 = ellipse1.cloneNode(true);
  28  ellipse2.cx.baseVal.value = 100;
  29
  30  var drawing = document.getElementById("drawing");
  31  svg.appendChild(ellipse1);
  32  svg.appendChild(ellipse2);
  33  drawing.appendChild(svg);
  34 }
  35 </script>
  36 </head>
  37 <body onload="setup()">
  38 <p>Here is an html paragraph. And below is a svg drawing. You should see two ellipses.</p>
  39 <div id="drawing"/>
  40 </body>
  41 </html>