| <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> |