<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Matrix testing</title>
  <style type="text/css" media="screen">
    div {
      -webkit-box-sizing: border-box;
    }
    
    .column {
      margin: 10px;
      display: inline-block;
      vertical-align: top;
    }
    .container {
      position: relative;
      height: 200px;
      width: 200px;
      margin: 10px;
      background-color: silver;
      border: 1px solid black;
    }
    
    .box {
      position: absolute;
      top: 0;
      left: 0;
      height: 60px;
      width: 60px;
      border: 1px dotted black;
      -webkit-transform-origin: top left; /* to match SVG */
    }
    
    .final {
      border: 1px solid blue;
    }
  </style>
  
  <script type="text/javascript" charset="utf-8">
    
    function doTest()
    {
      doCSS();
      doSVG();
    }
    
    function doCSS()
    {
      var matrixDiv = document.getElementById('matrixed');
      
      var firstMatrix = new WebKitCSSMatrix(document.getElementById('box1').style.transform);
      var secondMatrix = new WebKitCSSMatrix(document.getElementById('box2').style.transform);
      var thirdMatrix = new WebKitCSSMatrix(document.getElementById('box3').style.transform);
      
      var finalMatrix = firstMatrix.multiply(secondMatrix);
      finalMatrix = finalMatrix.multiply(thirdMatrix);

      // "Flipped" behavior
      // var finalMatrix = thirdMatrix.multiply(secondMatrix);
      // finalMatrix = finalMatrix.multiply(firstMatrix);

      matrixDiv.style.transform = finalMatrix;
    }

    function doSVG()
    {
      var matrixDiv = document.getElementById('matrix-svg');

      var svgroot = document.getElementsByTagName('svg')[0];
      
      var firstMatrix = svgroot.createSVGMatrix();
      firstMatrix = firstMatrix.translate(75, 25);
      var secondMatrix = svgroot.createSVGMatrix();
      secondMatrix = secondMatrix.scale(2);
      var thirdMatrix = svgroot.createSVGMatrix();
      thirdMatrix = thirdMatrix.rotate(45);

      var finalMatrix = firstMatrix.multiply(secondMatrix);
      finalMatrix = finalMatrix.multiply(thirdMatrix);

      var matrixString = "matrix(" + finalMatrix.a + " " + finalMatrix.b + 
      " " + finalMatrix.c + " " + finalMatrix.d + " " + finalMatrix.e + " " 
               + finalMatrix.f + ")";
      matrixDiv.setAttribute("transform", matrixString);
    }

    window.addEventListener('load', doTest, false)
  </script>
</head>

<body>

  <div class="column">
    <h2>SVG nested</h2>
    <div class="container">
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1"  
          viewBox="0 0 200 200" style="width:200px; height:200px;">
          <g id="group1" x="0" y="0" width="60" height="60" transform="translate(75, 25)">
            <rect x="0" y="0" width="60" height="60" stroke="black" stroke-width="1px" stroke-dasharray="1 1" fill="none" />
            <g id="group2" x="0" y="0" width="60" height="60" transform="scale(2)" >
              <rect x="0" y="0" width="60" height="60" stroke="black" stroke-dasharray="1 1" stroke-width="1px" fill="none" />
              <rect id="group3" x="0" y="0" width="60" height="60" stroke="blue" fill="none" transform="rotate(45)" />
            </g>
          </g>
      </svg>
    </div>

    <h2>CSS nested</h2>
    <div class="container">
      <div id="box1" class="box" style="transform: translate(75px, 25px)">
        <div id="box2" class="box" style="transform: scale(2)">
          <div id="box3" class="final box" style="transform: rotate(45deg)">
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="column">
    <h2>SVG compound</h2>
    <div class="container">
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1"  
          viewBox="0 0 200 200" style="width:200px; height:200px;">
          <rect x="0" y="0" width="60" height="60" stroke="blue" fill="none" transform="translate(75, 25) scale(2) rotate(45)">
          </rect>
      </svg>
    </div>

    <h2>CSS compound</h2>
    <div class="container">
      <div class="final box" style="transform: translate(75px, 25px) scale(2) rotate(45deg)">
      </div>
    </div>
  </div>

  <div class="column">
    <h2>SVG Matrix</h2>
    <div class="container">
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1"  
          viewBox="0 0 200 200" style="width:200px; height:200px;">
          <rect id="matrix-svg" x="0" y="0" width="60" height="60" stroke="blue" fill="none">
          </rect>
      </svg>
    </div>
    
    <h2>CSSMatrix</h2>
    <div class="container">
      <div id="matrixed" class="final box">
      </div>
    </div>
  </div>
</body>
</html>