blob: 01e875964558ff94b19fc4f07ca8db22f4d3c18d [file] [log] [blame]
<!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-pre.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>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>