linear-timing-functions-output.html (3914B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <meta name="assert" content="This test checks the output of linear timing functions" /> 4 <title>Tests for the output of linear timing functions</title> 5 <link rel="help" href="https://drafts.csswg.org/css-easing-2/#the-linear-easing-function"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="support/util.js"></script> 9 <script src="testcommon.js"></script> 10 <body> 11 <div id="log"></div> 12 <script> 13 'use strict'; 14 15 function assert_style_left_at(animation, time, expected_y) { 16 animation.currentTime = time; 17 assert_approx_equals(pxToNum(getComputedStyle(animation.effect.target).left), 18 expected_y * 100, 19 0.01, 20 'The left of the animation should be approximately ' + 21 expected_y * 100 + ' at ' + time + 'ms'); 22 } 23 24 function assert_animations_equal_at(actual_animation, expected_animation, time) { 25 actual_animation.currentTime = time; 26 var actual_left = pxToNum(getComputedStyle(actual_animation.effect.target).left); 27 expected_animation.currentTime = time; 28 var expected_left = pxToNum(getComputedStyle(expected_animation.effect.target).left); 29 assert_approx_equals(actual_left, 30 expected_left, 31 0.01, 32 'The left of the animation should be approximately ' + 33 expected_left + ' at ' + time + 'ms'); 34 } 35 36 function create_animated_div(t, easing_function) { 37 var target = createDiv(t); 38 target.style.position = 'absolute'; 39 return target.animate( 40 [ { left: '0px' }, 41 { left: '100px' } ], 42 { duration: 1000, 43 fill: 'forwards', 44 easing: easing_function }); 45 } 46 47 test(function(t) { 48 var anim = create_animated_div(t, 'linear(0, 1.5, 1)'); 49 50 assert_style_left_at(anim, 0, 0.0); 51 assert_style_left_at(anim, 250, 0.75); 52 assert_style_left_at(anim, 500, 1.5); 53 assert_style_left_at(anim, 750, 1.25); 54 assert_style_left_at(anim, 1000, 1.00); 55 }, 'linear function easing with output greater than 1'); 56 57 test(function(t) { 58 var anim = create_animated_div(t, 'linear(1, -0.5, 0)'); 59 60 assert_style_left_at(anim, 0, 1.0); 61 assert_style_left_at(anim, 250, 0.25); 62 assert_style_left_at(anim, 500, -0.5); 63 assert_style_left_at(anim, 750, -0.25); 64 assert_style_left_at(anim, 1000, 0.00); 65 }, 'linear function easing with output less than 1'); 66 67 test(function(t) { 68 var anim = create_animated_div(t, 'linear(0.2 0% 20%, 0.4 20% 40%, 0.6 40% 60%, 0.8 60% 80%, 1.0 80% 100%)'); 69 var equiv = create_animated_div(t, 'steps(5, jump-start)'); 70 71 assert_animations_equal_at(anim, equiv, 0); 72 assert_animations_equal_at(anim, equiv, 200); 73 assert_animations_equal_at(anim, equiv, 400); 74 assert_animations_equal_at(anim, equiv, 600); 75 assert_animations_equal_at(anim, equiv, 800); 76 assert_animations_equal_at(anim, equiv, 1000); 77 }, 'linear function easing, steps equivalent'); 78 79 test(function(t) { 80 var anim = create_animated_div(t, 'linear(0, 0.1 -10%, 1)'); 81 var equiv = create_animated_div(t, 'linear(0, 0.1 0%, 1)'); 82 83 assert_animations_equal_at(anim, equiv, 0); 84 assert_animations_equal_at(anim, equiv, 100); 85 assert_animations_equal_at(anim, equiv, 550); 86 assert_animations_equal_at(anim, equiv, 1000); 87 }, 'linear function easing, input value being unspecified in the first entry implies zero'); 88 89 test(function(t) { 90 var anim = create_animated_div(t, 'linear(0, 0.9 110%, 1)'); 91 var equiv = create_animated_div(t, 'linear(0, 0.9 110%, 1 110%)'); 92 93 assert_animations_equal_at(anim, equiv, 0); 94 assert_animations_equal_at(anim, equiv, 450); 95 assert_animations_equal_at(anim, equiv, 900); 96 assert_animations_equal_at(anim, equiv, 950); 97 assert_animations_equal_at(anim, equiv, 1000); 98 }, 'linear function easing, input value being unspecified in the last entry implies max input value'); 99 </script> 100 </body>