<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" onload="test()">
 <title>Creating elements and related interfaces</title>
 <style type="text/css">
  .fail { fill: red; }
  .pass { fill: green; }
 </style>
 <rect width="150" height="300" class="fail"/>
 <script type="text/javascript">
  var r1 = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
  r1.width.baseVal.newValueSpecifiedUnits(r1.width.baseVal.SVG_LENGTHTYPE_PX, 300);
  r1.height.baseVal.newValueSpecifiedUnits(r1.height.baseVal.SVG_LENGTHTYPE_PX, 150);
  r1.setAttribute('class', 'pass');
  r1.setAttribute('fill', 'red');
  var r2 = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
  r2.width.baseVal.newValueSpecifiedUnits(r2.width.baseVal.SVG_LENGTHTYPE_PX, 300);
  r2.height.baseVal.newValueSpecifiedUnits(r2.height.baseVal.SVG_LENGTHTYPE_PX, 150);
  r2.setAttribute('y', '150');
  document.documentElement.appendChild(r1);
  function test() {
   r2.className.baseVal = 'pass';
   document.documentElement.appendChild(r2);   
  }
 </script>
</svg>