effect-value-transformed-distance.html (3504B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title>The effect value of a keyframe effect: Calculating the transformed 4 distance between keyframes</title> 5 <link rel="help" href="https://drafts.csswg.org/web-animations/#the-effect-value-of-a-keyframe-animation-effect"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="../../testcommon.js"></script> 9 <script src="../../resources/easing-tests.js"></script> 10 <body> 11 <div id="log"></div> 12 <script> 13 'use strict'; 14 15 // Test that applying easing to keyframes is applied as expected 16 17 for (const params of gEasingTests) { 18 test(t => { 19 const target = createDiv(t); 20 const anim = target.animate([ { width: '0px' }, 21 // We put the easing on the second keyframe 22 // so we can test that it is only applied 23 // to the specified keyframe. 24 { width: '100px', easing: params.easing }, 25 { width: '200px' } ], 26 { duration: 2000, 27 fill: 'forwards' }); 28 29 for (const sampleTime of [0, 999, 1000, 1100, 1500, 2000]) { 30 anim.currentTime = sampleTime; 31 32 const portion = (sampleTime - 1000) / 1000; 33 const expectedWidth = sampleTime < 1000 34 ? sampleTime / 10 // first segment is linear 35 : 100 + params.easingFunction(portion) * 100; 36 assert_approx_equals(parseFloat(getComputedStyle(target).width), 37 expectedWidth, 38 0.02, 39 'The width should be approximately ' + 40 `${expectedWidth} at ${sampleTime}ms`); 41 } 42 }, `A ${params.desc} on a keyframe affects the resulting style`); 43 } 44 45 // Test that a linear-equivalent cubic-bezier easing applied to a keyframe does 46 // not alter (including clamping) the result. 47 48 for (const params of gEasingTests) { 49 const linearEquivalentEasings = [ 'cubic-bezier(0, 0, 0, 0)', 50 'cubic-bezier(1, 1, 1, 1)' ]; 51 test(t => { 52 for (const linearEquivalentEasing of linearEquivalentEasings) { 53 const timing = { duration: 1000, 54 fill: 'forwards', 55 easing: params.easing }; 56 57 const linearTarget = createDiv(t); 58 const linearAnim = linearTarget.animate([ { width: '0px' }, 59 { width: '100px' } ], 60 timing); 61 62 const equivalentTarget = createDiv(t); 63 const equivalentAnim = 64 equivalentTarget.animate([ { width: '0px', 65 easing: linearEquivalentEasing }, 66 { width: '100px' } ], 67 timing); 68 69 for (const sampleTime of [0, 250, 500, 750, 1000]) { 70 linearAnim.currentTime = sampleTime; 71 equivalentAnim.currentTime = sampleTime; 72 73 assert_equals(getComputedStyle(linearTarget).width, 74 getComputedStyle(equivalentTarget).width, 75 `The 'width' of the animated elements should be equal ` + 76 `at ${sampleTime}ms`); 77 } 78 } 79 }, 'Linear-equivalent cubic-bezier keyframe easing applied to an effect ' + 80 `with a ${params.desc} does not alter the result`); 81 } 82 83 </script> 84 </body>