test_interpolation-from-interpolatematrix-to-none.html (1874B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <script src='/resources/testharness.js'></script> 4 <script src='/resources/testharnessreport.js'></script> 5 <script src='../testcommon.js'></script> 6 <div id='log'></div> 7 <script type='text/javascript'> 8 'use strict'; 9 10 test(function(t) { 11 var target = addDiv(t); 12 target.style.transform = 'translateX(100px)'; 13 target.style.transition = 'all 10s linear -5s'; 14 getComputedStyle(target).transform; 15 16 target.style.transform = 'rotate(90deg)'; 17 var interpolated_matrix = 'matrix(' + Math.cos(Math.PI / 4) + ',' + 18 Math.sin(Math.PI / 4) + ',' + 19 -Math.sin(Math.PI / 4) + ',' + 20 Math.cos(Math.PI / 4) + ',' + 21 '50, 0)'; 22 assert_matrix_equals(getComputedStyle(target).transform, 23 interpolated_matrix, 24 'the equivalent matrix of ' + 'interpolatematrix(' + 25 'translateX(100px), rotate(90deg), 0.5)'); 26 27 // Trigger a new transition from 28 // interpolatematrix(translateX(100px), rotate(90deg), 0.5) to none 29 // with 'all 10s linear -5s'. 30 target.style.transform = 'none'; 31 interpolated_matrix = 'matrix(' + Math.cos(Math.PI / 8) + ',' + 32 Math.sin(Math.PI / 8) + ',' + 33 -Math.sin(Math.PI / 8) + ',' + 34 Math.cos(Math.PI / 8) + ',' + 35 '25, 0)'; 36 assert_matrix_equals(getComputedStyle(target).transform, 37 interpolated_matrix, 38 'the expected matrix from interpolatematrix(' + 39 'translateX(100px), rotate(90deg), 0.5) to none at 50%'); 40 }, 'Test interpolation from interpolatematrix to none at 50%'); 41 42 </script> 43 </html>