<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <title>Scalable Search Box</title>
    
    <script>
      <![CDATA[

      var testMatrix;
      var expectedMatrix = {
        a: 2,
        b: 0,
        c: 0,
        d: 2,
        e: 30,
        f: 100
      };


      function runTest () {
        var rect = document.getElementById('rect');
        try {
          testMatrix = rect.getScreenCTM();
        }
        // end script here
        catch (error) {
          logError('.getScreenCTM() seems to be unimplemented');
          return;
        }
        // check equality of matrices
        if (areMatricesEqual(testMatrix, expectedMatrix)) {
          rect.setAttributeNS(null, 'fill', 'green');
        }
        // explain error
        else {
          logError('Expected matrix ' + printMatrix(expectedMatrix));
          logError('Got matrix ' + printMatrix(testMatrix));
        }
      }

      function areMatricesEqual (m1, m2) {
        return (
          m1.a == m2.a &&
          m1.b == m2.b &&
          m1.c == m2.c &&
          m1.d == m2.d &&
          m1.e == m2.e &&
          m1.f == m2.f
        );
      }

      function printMatrix (m) {
        return '[' + [m.a, m.b, m.c, m.d, m.e, m.f].join(', ') + ']';
      }

      function logError (msg) {
        var output = document.getElementById('error')
        var text = document.createTextNode(msg);
        var br = document.createElementNS('http://www.w3.org/1999/xhtml', 'br');
        output.appendChild(text);
        output.appendChild(br);
      }

      ]]>
    </script>
  </head>

  <body onload="runTest()">
    <div style="position: absolute; left: 30px; top: 100px; width: 400px; height: 200px;">
      <svg id="svgRoot" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" preserveAspectRatio="xMinYMin meet">
        <rect id="rect" width="100%" height="100%" fill="red" />
      </svg>
    </div>
    <div id="error" style="position: absolute; left: 30px; top: 330px; color: red" />
    This tests the behaviour of <code>SVGLocatable::getScreenCTM()</code> in mixed content <br />
    If the test passes you should see a green rectangle.
  </body>
  
</html>