| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| body { |
| width: 750px; |
| height: 550px; |
| } |
| |
| .testCase { |
| float: left; |
| margin: 5px; |
| } |
| |
| svg { |
| padding: 10px; |
| border: 5px solid grey; |
| margin: 5px; |
| background-color: blue; |
| } |
| </style> |
| <script>window.enablePixelTesting = true;</script> |
| <script src="../../resources/js-test.js"></script> |
| <script> |
| function matrixToString(m) |
| { |
| return "[" + m.a + " " + m.b + " " + m.c + " " + m.d + " " + m.e + " " + m.f + "]"; |
| } |
| |
| function getCTMById(id) |
| { |
| return matrixToString(document.getElementById(id).getCTM()); |
| } |
| </script> |
| </head> |
| <body> |
| <div id="description"></div> |
| <script>description("This test checks getCTM() on SVG root elements with borders, paddings, and margins.");</script> |
| |
| <div id="console"></div> |
| |
| <hr/> |
| |
| <svg id="svgRoot1" class="testCase" width="50" height="50" viewbox="0 0 50 50"></svg> |
| <script>shouldBeEqualToString("getCTMById('svgRoot1')", "[1 0 0 1 0 0]");</script> |
| |
| <svg id="svgRoot2" class="testCase" width="50" height="50" viewbox="0 0 100 100"></svg> |
| <script>shouldBeEqualToString("getCTMById('svgRoot2')", "[0.5 0 0 0.5 0 0]");</script> |
| |
| <svg id="svgRoot3" class="testCase" width="50" height="50" viewbox="0 0 25 25"></svg> |
| <script>shouldBeEqualToString("getCTMById('svgRoot3')", "[2 0 0 2 0 0]");</script> |
| |
| <div class="testCase" style="width: 90px; height: 90px;"> |
| <div style="width: 50px; height: 50px; background-color: green;"> |
| <svg id="svgRoot4" width="100%" height="100%" viewbox="0 0 50 50"></svg> |
| </div> |
| </div> |
| <script>shouldBeEqualToString("getCTMById('svgRoot4')", "[1 0 0 1 0 0]");</script> |
| |
| <div class="testCase" style="width: 100px; height: 100px; background-color: green;"> |
| <svg id="svgRoot5" width="50%" height="50%" viewbox="0 0 50 50"></svg> |
| </div> |
| <script>shouldBeEqualToString("getCTMById('svgRoot5')", "[1 0 0 1 0 0]");</script> |
| |
| <div class="testCase" style="width: 100px; height: 100px; background-color: green;"> |
| <svg id="svgRoot6" width="50%" height="50%" viewbox="0 0 100 100"></svg> |
| </div> |
| <script>shouldBeEqualToString("getCTMById('svgRoot6')", "[0.5 0 0 0.5 0 0]");</script> |
| |
| </body> |
| </html> |
