transition-timing-function-010-manual.html (1024B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Transitions Test: transition-timing-function - steps(2)</title> 4 <link rel="author" title="Intel" href="http://www.intel.com"> 5 <link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> 6 <link rel="help" href="https://www.w3.org/TR/css-transitions-1/#transition-timing-function-property"> 7 <meta name="assert" content="Test checks that the first parameter of 'steps()' function specifies the number of intervals."> 8 <style> 9 div { 10 background-color: blue; 11 height: 100px; 12 transition-duration: 1s; 13 transition-property: width; 14 transition-timing-function: steps(2); 15 width: 100px; 16 } 17 </style> 18 <body> 19 <p>Click the blue square. Test passes if the width of blue square grows <strong>twice</strong>.</p> 20 <div></div> 21 <script> 22 (function() { 23 var div = document.querySelector("div"); 24 div.addEventListener("click", function(evt) { 25 div.setAttribute("style", "width: 300px"); 26 }, false); 27 })(); 28 </script> 29 </body>