<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Testcase for the preserveAspectRatio Attribute</title>
    <script type="text/javascript">
    <![CDATA[


var svgEl = null;
var viewBox = null;
var preserveAspectRatio = null;
var dSelect = null;
var aSelect = null;
var mSelect = null;
var parInput = null;


function onloadHandler(event)
{
  svgEl = document.getElementById('svgEl');
  viewBox = document.getElementById('vbInput');
  dSelect = document.getElementById('defer');
  aSelect = document.getElementById('align');
  mSelect = document.getElementById('meetOrSlice');
  parInput = document.getElementById('par');
}


function redraw()
{
  window.resizeBy(1,1);
  window.resizeBy(-1,-1);
}


function setViewBox(event)
{
  svgEl.setAttribute('viewBox', viewBox.value);
  redraw();  // force redraw for setAttribute('viewBox', '...')
}


function setPreserveAspectRatio(attValue)
{
  svgEl.setAttribute('preserveAspectRatio', attValue);
}


function setPARFromSelect(event)
{
  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;

  setPreserveAspectRatio(str);
  parInput.value = str;
}


function setPARFromInput(event)
{
  setPreserveAspectRatio(parInput.value);
}


    ]]>
    </script>
  </head>
  <body onload="onloadHandler(event)">

    <h1>Testcase for the preserveAspectRatio Attribute</h1>

    <p>The &lt;svg&gt; element has dimensions 600x400, its content has dimensions 500x500. </p>

    <form>
      <p>viewBox="<input id="vbInput" type="text" value="0 0 500 500" />" 
         <input type="button" value="apply" onclick="setViewBox(event)" /></p>
    </form>

    <form onchange="setPreserveAspectRatio(event)">
      <p>preserveAspectRatio="<input id="par" type="text" value="xMidYMid meet" />"
         <input type="button" value="apply" onclick="setPARFromInput(event)" /></p>
    </form>

    <form onchange="setPARFromSelect(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>
      " &lt;-- applied onchange</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 500 500" preserveAspectRatio="xMidYMid meet">
        <rect x="1" y="1" width="498" height="498" fill="yellow" stroke="red" stroke-width="2" />
        <polygon points="250,0 500,250 250,500 0,250" fill="green" />
      </svg>
    </p>

  </body>
</html>
