applying-interpolated-transform.html (3272B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title> apply interpolated transform on multiple keyframes</title> 4 <link rel="help" href="https://drafts.csswg.org/web-animations/#keyframes-section"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="../../testcommon.js"></script> 8 <body> 9 <div id="log"></div> 10 <div id="target"></div> 11 <script> 12 'use strict'; 13 // This test tests the correctness if animation behavior under 14 // box-size-denpendent and non-box-size-dependent transformation. 15 test(t => { 16 var div_1 = createDiv(t); 17 div_1.style.width = "100px"; 18 // Non-pairwise compatible transforms that are effectively no-ops with a 19 // matrix fallback. Both rotate(360deg) and scale(1) are identity matrix, 20 // making it easy to compute. 21 const keyframe1 = [ 22 {"transform":"translateX( 200px ) rotate( 360deg )"}, 23 {"transform":"translateX( 100% ) scale( 1 )"}, 24 ]; 25 const keyframe2 = [ 26 {"transform":"translateX( 200px ) rotate( 360deg )"}, 27 {"transform":"translateX( 100% ) scale( 1 )"}, 28 {"transform":"none"}, 29 {} 30 ]; 31 32 const animation1 = div_1.animate(keyframe1, { 33 "duration":3000, 34 "easing":"linear", 35 }); 36 const animation2 = div_1.animate(keyframe2, { 37 "duration":3000, 38 "easing":"linear", 39 }); 40 // new animation on the second div, using px value instead of % as a reference 41 42 var div_2 = createDiv(t); 43 div_2.style.width = "100px"; 44 const keyframe3 = [ 45 {"transform":"translateX( 200px ) rotate( 360deg )"}, 46 {"transform":"translateX( 100px ) scale( 1 )"}, 47 ]; 48 const keyframe4 = [ 49 {"transform":"translateX( 200px ) rotate( 360deg )"}, 50 {"transform":"translateX( 100px ) scale( 1 )"}, 51 {"transform":"none"}, 52 {} 53 ]; 54 55 const animation3 = div_2.animate(keyframe1, { 56 "duration":3000, 57 "easing":"linear", 58 }); 59 const animation4 = div_2.animate(keyframe2, { 60 "duration":3000, 61 "easing":"linear", 62 "composite": 'replace', 63 }); 64 animation1.pause(); 65 animation2.pause(); 66 animation3.pause(); 67 animation4.pause(); 68 var i; 69 for (i = 0; i <= 30; i++) { 70 animation2.currentTime = 100 * i; 71 animation4.currentTime = 100 * i; 72 var box_size_dependent_transform = getComputedStyle(div_1)['transform']; 73 var reference_transform = getComputedStyle(div_2)['transform'] 74 var progress = i / 30; 75 // The second animation replaces the first animation. As the rotate and 76 // scale perations are effectively no-ops when the matrix fallback is 77 // applied. The expected behavior is to go from x-postion 200px to 0 in the 78 // first 2000ms and go back to x-position 200px in the last 1000ms. 79 var expected_transform = 'matrix(1, 0, 0, 1, $1, 0)' 80 .replace('$1', Math.max(200 - 300 * progress, 0) 81 + Math.max(0, -400 + 600 * progress)); 82 assert_matrix_equals(box_size_dependent_transform, reference_transform); 83 assert_matrix_equals(reference_transform, expected_transform); 84 } 85 }) 86 </script> 87 </body>