<!DOCTYPE html>
<title>getScreenCTM: Outermost SVG element ancestor position/transform</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<body>
<script>
function to_array(matrix) {
  return [ matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f ];
}

function assert_array_approx_equals(actual, expected) {
  assert_equals(actual.length, expected.length);
  for (let i = 0; i < expected.length; ++i)
    assert_approx_equals(actual[i], expected[i], 0.0005);
}

function check_screen_ctm(document_data, expected_array) {
  async_test(t => {
    let blob = new Blob([ '<!DOCTYPE html>', document_data ], { type: 'text/html' });
    let iframe = document.createElement('iframe');
    iframe.src = URL.createObjectURL(blob);
    iframe.onload = t.step_func_done(() => {
      var ctm = iframe.contentDocument.querySelector("rect").getScreenCTM();
      iframe.remove();
      assert_array_approx_equals(to_array(ctm), expected_array);
    });
    document.body.appendChild(iframe);
  });
}

const COMMON_PAYLOAD = '<svg display="block"><rect width="100" height="100"/></svg></div>';

check_screen_ctm('<div>' + COMMON_PAYLOAD,
                 [ 1, 0, 0, 1, 8, 8 ]);
check_screen_ctm('<div style="transform: translateX(100px)">' + COMMON_PAYLOAD,
                 [ 1, 0, 0, 1, 108, 8 ]);
check_screen_ctm('<div style="transform: translate(100px, 100px)">' + COMMON_PAYLOAD,
                 [ 1, 0, 0, 1, 108, 108 ]);
check_screen_ctm('<div style="transform: rotate(45deg); width: 300px;">' + COMMON_PAYLOAD,
                 [ 0.707, 0.707, -0.707, 0.707, 104.967, -76.099 ]);
check_screen_ctm('<div style="transform: rotate(45deg) scale(10); width: 300px;">' + COMMON_PAYLOAD,
                 [ 7.071, 7.071, -7.071, 7.071, -372.330, -1507.990 ]);
check_screen_ctm('<div style="height: 400px"></div><div style="transform: rotate(45deg); width: 300px;">' + COMMON_PAYLOAD,
                 [ 0.707, 0.707, -0.707, 0.707, 104.967, 400 + -76.099 ]);
check_screen_ctm('<div style="height: 400px"></div><div style="transform: rotate(45deg); width: 300px;">' + COMMON_PAYLOAD +
                 '<script>window.scrollBy(0, 200)<'+'/script>',
                 [ 0.707, 0.707, -0.707, 0.707, 104.967, -200 + 400 + -76.099 ]);
</script>