test_interpolation-from-interpolatematrix-to-none.html

Enable keyboard shortcuts

<!doctype html>

<meta charset=utf-8>

<script src='/resources/testharness.js'></script>

<script src='/resources/testharnessreport.js'></script>

<script src='../testcommon.js'></script>

<div id='log'></div>

<script type='text/javascript'>

'use strict';

test(function(t) {

  var target = addDiv(t);

  target.style.transform = 'translateX(100px)';

  target.style.transition = 'all 10s linear -5s';

  getComputedStyle(target).transform;

  target.style.transform = 'rotate(90deg)';

  var interpolated_matrix = 'matrix(' + Math.cos(Math.PI / 4) + ',' +

                                        Math.sin(Math.PI / 4) + ',' +

                                       -Math.sin(Math.PI / 4) + ',' +

                                        Math.cos(Math.PI / 4) + ',' +

                                        '50, 0)';

  assert_matrix_equals(getComputedStyle(target).transform,

                       interpolated_matrix,

                       'the equivalent matrix of ' + 'interpolatematrix(' +

                       'translateX(100px), rotate(90deg), 0.5)');

  // Trigger a new transition from

  // interpolatematrix(translateX(100px), rotate(90deg), 0.5) to none

  // with 'all 10s linear -5s'.

  target.style.transform = 'none';

  interpolated_matrix = 'matrix(' + Math.cos(Math.PI / 8) + ',' +

                                    Math.sin(Math.PI / 8) + ',' +

                                   -Math.sin(Math.PI / 8) + ',' +

                                    Math.cos(Math.PI / 8) + ',' +

                                    '25, 0)';

  assert_matrix_equals(getComputedStyle(target).transform,

                       interpolated_matrix,

                       'the expected matrix from interpolatematrix(' +

                       'translateX(100px), rotate(90deg), 0.5) to none at 50%');

}, 'Test interpolation from interpolatematrix to none at 50%');

</script>

</html>