transition-timing-function.html (2861B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>transition timing function</title> 6 <link rel="help" href="https://drafts.csswg.org/css-transitions-1/#transition-timing-function-property"> 7 <style> 8 .box { 9 position: relative; 10 left: 0; 11 height: 100px; 12 width: 100px; 13 margin: 10px; 14 background-color: blue; 15 transition: left 1s linear; 16 } 17 .animating > .box { 18 left: 400px; 19 } 20 </style> 21 </head> 22 <script src="/resources/testharness.js"></script> 23 <script src="/resources/testharnessreport.js"></script> 24 <script src="/css/css-transitions/support/helper.js"></script> 25 <script src="/css/css-easing/testcommon.js"></script> 26 <script> 27 window.onload = () => { 28 function verifyPosition(element_id, expected) { 29 const element = document.getElementById(element_id); 30 const actual = Math.round(parseFloat(getComputedStyle(element).left)); 31 assert_equals(actual, expected, `verify ${element_id} left`); 32 } 33 34 function easing(x1, y1, x2, y2) { 35 return Math.round(400 * cubicBezier(x1, y1, x2, y2)(0.5)); 36 } 37 38 function ease() { 39 return easing(0.25, 0.1, 0.25, 1); // 321 40 } 41 42 function easeIn() { 43 return easing(0.42, 0, 1, 1); // 126 44 } 45 46 function easeOut() { 47 return easing(0.0, 0.0, 0.58, 1.0); // 274 48 } 49 50 function easeInOut() { 51 return easing(0.42, 0.0, 0.58, 1.0); // 200 52 } 53 54 promise_test(async t => { 55 // Make sure we have rendered the page before making the style change 56 // to ensure we get transitions. 57 await waitForAnimationFrames(2); 58 promises = []; 59 document.getElementById('container').className = 'animating'; 60 document.getAnimations().forEach(anim => { 61 anim.pause(); 62 anim.currentTime = 500; 63 promises.push(anim.ready); 64 }); 65 await Promise.all(promises).then(() => { 66 assert_equals(promises.length, 6, 'Unexpected animation count'); 67 verifyPosition('box1', 200); // linear easing 68 verifyPosition('box2', ease()); 69 verifyPosition('box3', easeIn()); 70 verifyPosition('box4', easeOut()); 71 verifyPosition('box5', easeInOut()); 72 verifyPosition('box6', 400); 73 }); 74 }, 'Ensure that transition easing functions are properly applied.'); 75 }; 76 </script> 77 <body> 78 <div id="container"> 79 <div id="box1" class="box" style="transition-timing-function: linear;"></div> 80 <div id="box2" class="box" style="transition-timing-function: ease;"></div> 81 <div id="box3" class="box" style="transition-timing-function: ease-in;"></div> 82 <div id="box4" class="box" style="transition-timing-function: ease-out;"></div> 83 <div id="box5" class="box" style="transition-timing-function: ease-in-out;"></div> 84 <div id="box6" class="box" style="transition-timing-function: linear(0, 1, 0);"></div> 85 </div> 86 </body> 87 </html>