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