transform-interpolation-computed-value.html (5187B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>transform interpolation</title> 4 <link rel="help" href="https://drafts.css-houdini.org/css-typed-om/#transformvalue-objects"> 5 <meta name="assert" content="transform gives the correct computed values when interpolated"> 6 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/web-animations/testcommon.js"></script> 10 11 <body> 12 <script> 13 function interpolation_test(from, to, expected_50) { 14 test(t => { 15 let div = createDiv(t); 16 let anim = div.animate({transform: [from, to]}, 2000); 17 anim.pause(); 18 anim.currentTime = 1000; 19 let halfway = div.computedStyleMap().get('transform').toString(); 20 assert_equals(halfway, expected_50, "The value at 50% progress is as expected"); 21 }, "Interpolation between " + from + " and " + to + " gives the correct " + 22 "computed value halfway according to computedStyleMap."); 23 24 test(t => { 25 let div = createDiv(t); 26 div.style.zoom = 1.25; 27 let anim = div.animate({transform: [from, to]}, 2000); 28 anim.pause(); 29 anim.currentTime = 1000; 30 let halfway = div.computedStyleMap().get('transform').toString(); 31 assert_equals(halfway, expected_50, "The value at 50% progress is as expected"); 32 }, "Interpolation between " + from + " and " + to + " gives the correct " + 33 "computed value halfway according to computedStyleMap with zoom active."); 34 } 35 36 interpolation_test('translateX(0px)', 'translateX(50px)', 'translate(25px, 0px)'); 37 interpolation_test('translateX(0%)', 'translateX(50%)', 'translate(25%, 0px)'); 38 interpolation_test('translateY(0%)', 'translateX(50%)', 'translate(25%, 0px)'); 39 interpolation_test('translateX(50px)', 'translateY(50px)', 'translate(25px, 25px)'); 40 interpolation_test('translateX(50px)', 'translateZ(50px)', 'translate3d(25px, 0px, 25px)'); 41 interpolation_test('translateZ(50px)', 'translateX(50px)', 'translate3d(25px, 0px, 25px)'); 42 interpolation_test('translateZ(-50px)','translateZ(50px)', 'translate3d(0px, 0px, 0px)'); 43 interpolation_test('translate(0%)', 'translate(50%)', 'translate(25%, 0px)'); 44 interpolation_test('translate(50%)', 'translate(100%, 50%)', 'translate(75%, 25%)'); 45 interpolation_test('translate(0%, 50%)', 'translate(50%, 100%)', 'translate(25%, 75%)'); 46 interpolation_test('translate3d(0,0,-50px)','translateZ(50px)', 'translate3d(0px, 0px, 0px)'); 47 interpolation_test('translate(50px, 0px)', 'translate(100px, 0px)', 'translate(75px, 0px)'); 48 interpolation_test('translate(50px, -50px)', 'translate(100px, 50px)', 'translate(75px, 0px)'); 49 50 interpolation_test('rotate(30deg)', 'rotate(90deg)', 'rotate(60deg)'); 51 interpolation_test('rotateZ(30deg)', 'rotateZ(90deg)', 'rotate3d(0, 0, 1, 60deg)'); 52 interpolation_test('rotate(0deg)', 'rotateZ(90deg)', 'rotate3d(0, 0, 1, 45deg)'); 53 interpolation_test('rotateX(0deg)','rotateX(90deg)', 'rotate3d(1, 0, 0, 45deg)'); 54 interpolation_test('rotate(0deg)', 'rotateX(90deg)', 'rotate3d(1, 0, 0, 45deg)'); 55 56 interpolation_test('scale(1)', 'scale(2)', 'scale(1.5, 1.5)'); 57 interpolation_test('scale(1, 3)', 'scale(2)', 'scale(1.5, 2.5)'); 58 interpolation_test('scaleX(1)', 'scaleX(2)', 'scale(1.5, 1)'); 59 interpolation_test('scaleY(1)', 'scaleY(2)', 'scale(1, 1.5)'); 60 interpolation_test('scaleZ(1)', 'scaleZ(2)', 'scale3d(1, 1, 1.5)'); 61 interpolation_test('scaleX(2)', 'scaleY(2)', 'scale(1.5, 1.5)'); 62 interpolation_test('scaleX(2)', 'scaleY(3)', 'scale(1.5, 2)'); 63 interpolation_test('scaleZ(1)', 'scale(2)', 'scale3d(1.5, 1.5, 1)'); 64 interpolation_test('scale(1, 2)', 'scale(3, 4)', 'scale(2, 3)'); 65 interpolation_test('scale3d(1, 2, 3)', 'scale3d(4, 5, 6)', 'scale3d(2.5, 3.5, 4.5)'); 66 interpolation_test('scale3d(1, 2, 3)', 'scale(4, 5)', 'scale3d(2.5, 3.5, 2)'); 67 interpolation_test('scale(1, 2)', 'scale3d(3, 4, 5)', 'scale3d(2, 3, 3)'); 68 69 interpolation_test('skewX(0deg)', 'skewX(60deg)', 'skewX(30deg)'); 70 interpolation_test('skewX(0deg)', 'skewX(90deg)', 'skewX(45deg)'); 71 interpolation_test('skewX(0deg)', 'skewX(180deg)', 'skewX(90deg)'); 72 interpolation_test('skew(0deg, 0deg)', 'skew(60deg, 60deg)', 'skew(30deg, 30deg)'); 73 interpolation_test('skew(45deg, 0deg)', 'skew(0deg, 45deg)', 'skew(22.5deg, 22.5deg)'); 74 75 interpolation_test('perspective(10px)', 'perspective(2.5px)', 'perspective(4px)'); 76 interpolation_test('perspective(10px)', 'perspective(none)', 'perspective(20px)'); 77 interpolation_test('perspective(none)', 'perspective(none)', 'perspective(none)'); 78 79 // A matrix() with just scale and translation. 80 interpolation_test('matrix(2, 0, 0, 2, 10, 30)', 'matrix(4, 0, 0, 6, 14, 10)', 'matrix(3, 0, 0, 4, 12, 20)'); 81 82 // A matrix3d() with just scale and translation. 83 interpolation_test('matrix3d(1, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 5, 10, 4, 1)', 'matrix3d(3, 0, 0, 0, 0, 2, 0, 0, 0, 0, 3, 0, -11, 2, 2, 1)', 'matrix3d(2, 0, 0, 0, 0, 3, 0, 0, 0, 0, 2, 0, -3, 6, 3, 1)'); 84 // A matrix3d() with just perspective. 85 interpolation_test('matrix3d(1, 0, 0, 3, 0, 1, 0, 2, 0, 0, 1, 8, 0, 0, 0, 1)', 'matrix3d(1, 0, 0, 5, 0, 1, 0, 8, 0, 0, 1, 14, 0, 0, 0, 1)', 'matrix3d(1, 0, 0, 4, 0, 1, 0, 5, 0, 0, 1, 11, 0, 0, 0, 1)'); 86 87 // NOTE: New tests added here should also be added in 88 // transform-interpolation-inline-value.html. 89 90 </script>