zoom-get-screen-ctm.html | Explore in Territory

<!DOCTYPE html>
<title>SVGGraphicsElement.getScreenCTM subject to page zoom</title>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../resources/run-after-layout-and-paint.js"></script>
<style>
body { margin: 0; padding: 0; }
</style>
<div style="width: 100px; height: 100px;"></div>
<svg id="svg1" width="400" height="400">
  <rect width="100" height="100" fill="green"/>
  <svg id="svg2" x="100" y="100" width="300" height="300">
    <rect width="100" height="100" fill="green"/>
    <svg id="svg3" x="100" y="100" width="200" height="200">
      <rect width="100" height="100" fill="green"/>
      <svg id="svg4" x="100" y="100" width="100" height="100">
        <rect width="100" height="100" fill="green"/>
      </svg>
    </svg>
  </svg>
</svg>
<script>
function assert_matrix_approx_equals(actual, expected) {
  for (let prop of [ 'a', 'b', 'c', 'd', 'e', 'f'])
    assert_approx_equals(actual[prop], expected[prop], 5e-6, prop);
}

async_test(t => {
  runAfterLayoutAndPaint(t.step_func_done(() => {
    testRunner.zoomPageIn();
    testRunner.zoomPageIn();

    assert_matrix_approx_equals(document.getElementById('svg1').getScreenCTM(),
                                { a: 1, b: 0, c: 0, d: 1, e: 0, f: 100 });
    assert_matrix_approx_equals(document.getElementById('svg2').getScreenCTM(),
                                { a: 1, b: 0, c: 0, d: 1, e: 100, f: 200 });
    assert_matrix_approx_equals(document.getElementById('svg3').getScreenCTM(),
                                { a: 1, b: 0, c: 0, d: 1, e: 200, f: 300 });
    assert_matrix_approx_equals(document.getElementById('svg4').getScreenCTM(),
                                { a: 1, b: 0, c: 0, d: 1, e: 300, f: 400 });
  }));
});
</script>
chromium/third_party/blink/web_tests/svg/zoom/page/zoom-get-screen-ctm.html
