<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <script type="text/javascript">
    <![CDATA[

function redraw()
{
  window.resizeBy(1,1);
  window.resizeBy(-1,-1);

//  I was trying to use a 'resize' UIEvent do force the redraw.
//  For some reason this doesn't work.
//
//  var e = document.createEvent('UIEvents');
//  e.initUIEvent('resize', true, true, window, 0);
//  document.dispatchEvent(e);
}


function onresize(event) {
// alert(event.target);                // object XMLDocument
// alert(event.currentTarget);         // object Window
// alert(event.eventPhase);            // 2
// alert(event.bubbles);               // true
// alert(event.cancelable);            // true
// alert(event.timeStamp);             // 0
// alert(event.namespaceURI);          // undefined - introduced in DOM Level 3
// alert(event.isCustom());            // not a function
// alert(event.isDefaultPrevented());  // undefined
// alert(event instanceof UIEvent);    // true

//alert('resize')

return;
  var p = document.getElementById('p');
  for (i in Event.prototype) {
    p.appendChild(document.createTextNode(i + ' ' + event[i]));
    p.appendChild(document.createElementNS('html', 'br'));
  }
}


//window.onresize = onresize;
document.addEventListener('resize', onresize, true);


function setViewBox(event)
{
  var svgEl = document.getElementById('svgEl');
  var viewBoxStr = document.getElementById('vbInput').value;
  svgEl.setAttribute('viewBox', viewBoxStr);
  redraw();
}


function setPreserveAspectRatio(event)
{
  var svgEl               = document.getElementById('svgEl');
  var viewBox             = svgEl.viewBox;
  var preserveAspectRatio = svgEl.preserveAspectRatio;

svgEl.setAttribute('viewBox', 'rub r r r');
alert(svgEl.getAttribute('viewBox'));

  var dSelect = document.getElementById('defer');
  var aSelect = document.getElementById('align');
  var mSelect = document.getElementById('meetOrSlice');

  var defer       = dSelect.options.item(dSelect.selectedIndex).text;
  var align       = aSelect.options.item(aSelect.selectedIndex).text;
  var meetOrSlice = mSelect.options.item(mSelect.selectedIndex).text;

  var str = "";

  if (defer)       str  = defer + ' ';
  if (align)       str += align;
  if (meetOrSlice) str += ' ' + meetOrSlice;
//  if (trailing)    str += ' ' + trailing;

//  alert('preserveAspectRatio(' + str + ')');

//  preserveAspectRatio = str;

//  var val = document.getElementById('val').value;
//  eval("document.getElementById('svgEl').transform.baseVal.getItem(0).setMatrix(" + val + ")");
}

    ]]>
    </script>
  </head>
  <body onload="onloadHandler(event)">

    <form>
      <p>viewBox="<input id="vbInput" type="text" value="0 0 600 300" />" 
         <input type="button" value="apply" onclick="setViewBox(event)" /></p>
    </form>

    <form onchange="setPreserveAspectRatio(event)">
      <p>preserveAspectRatio="
        <select id="defer">
          <option value="0"></option>
          <option value="1">defer</option>
          <option value="2">*rubbish*</option>
        </select>
        <select id="align">
          <option value="0"></option>
          <option value="1">none</option>
          <option value="2">xMinYMin</option>
          <option value="3">xMidYMin</option>
          <option value="4">xMaxYMin</option>
          <option value="5">xMinYMid</option>
          <option value="6">xMidYMid</option>
          <option value="7">xMaxYMid</option>
          <option value="8">xMinYMax</option>
          <option value="9">xMidYMax</option>
          <option value="10">xMaxYMax</option>
          <option value="11">*rubbish*</option>
        </select>
        <select id="meetOrSlice">
          <option value="0"></option>
          <option value="1">meet</option>
          <option value="2">slice</option>
          <option value="3">*rubbish*</option>
        </select>
      "</p>
    </form>

    <form onchange="setPreserveAspectRatio(event)">
      <p>preserveAspectRatio="<input id="parInput" type="text" />"
         <input type="button" value="apply" onclick="setPreserveAspectRatio(event)" /></p>
    </form>

    <p style="width: 600px; height: 400px; border: solid 2px black">
      <svg xmlns="http://www.w3.org/2000/svg" id="svgEl" width="600px" height="400px" viewBox="0 0 600 400">
        <rect x="0" y="0" width="100%" height="100%" fill="blue" />
        <polygon points="300,0 600,200 300,400 0,200" fill="red" />
      </svg>
    </p>

<p id="p"></p>

  </body>
</html>
