transition-duration-003-manual.html (1601B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Transitions Test: transition-duration - 0s(initial value)</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" title="2.2. The 'transition-duration' Property" href="http://www.w3.org/TR/css3-transitions/#transition-duration-property"> 7 <meta name="assert" content="Test checks that the initial value of 'transition-duration' property is '0s' which means the transition is immediate."> 8 <style> 9 div { 10 height: 100px; 11 transition-property: width; 12 transition-timing-function: linear; 13 width: 100px; 14 } 15 #ref1 { 16 background-color: yellow; 17 transition-duration: 2s; 18 } 19 #ref2 { 20 background-color: gray; 21 transition-duration: 0s; 22 } 23 #test { 24 background-color: blue; 25 } 26 </style> 27 <body> 28 <p>Click the 'Start' button below. Test passes if the width of yellow square grows smoothly but the gray and blue grow immediately.</p> 29 <div id="ref1"></div> 30 <div id="ref2"></div> 31 <div id="test"></div> 32 <button>Start</button> 33 <script> 34 (function() { 35 var button = document.querySelector("button"), 36 test = document.querySelector("#test"), 37 ref1 = document.querySelector("#ref1"), 38 ref2 = document.querySelector("#ref2") 39 button.addEventListener("click", function(evt) { 40 test.setAttribute("style", "width: 300px;"); 41 ref1.setAttribute("style", "width: 300px;"); 42 ref2.setAttribute("style", "width: 300px;"); 43 }, false); 44 })(); 45 </script> 46 </body>