Home | History | Annotate | Download | only in ManualTests
      1 <style>
      2     div {
      3         width: 50px;
      4         height: 50px;
      5         background-color: yellow;
      6     }
      7 
      8     div.green {
      9         width: 100px;
     10         background-color: green;
     11         -webkit-transition-property: background-color;
     12         -webkit-transition-duration: 5s;
     13     }
     14 
     15     div.square {
     16         width: 100px;
     17         height: 100px;
     18         -webkit-transition-property: height;
     19         -webkit-transition-duration: 2s;
     20     }
     21 </style>
     22 <p id="instructions">
     23     When you click the Change button, the shape will
     24     <span id="description"></span>.
     25     <button style="display: block;" onclick="transition()">Change</button>
     26 </p>
     27 <div id="target"></div>
     28 <script>
     29     var state = 0;
     30     var transitions = [
     31         {className:"green", description:"instantly change into a rectangle and fade from yellow to green over 5 seconds"},
     32         {className:"", description:"instantly change into a small yellow square"},
     33         {className:"square", description:"instantly change into a yellow rectangle and then animate into a big yellow square over 2 seconds"},
     34         {className:"green", description:"instantly change into a yellow rectangle and then animate to a green rectangle over 5 seconds"},
     35         {className:"", description:"instantly change into a small yellow square"},
     36         {className:"green", description:"instantly change into a yellow rectangle and fade from yellow to green over 5 seconds"},
     37         {className:"square", description:"instantly change to a yellow rectangle and then animate into a large yellow square over 2 seconds"},
     38         {className:"", description:"instantly change into a small yellow square"}
     39     ];
     40 
     41     document.getElementById("description").innerText = transitions[0].description;
     42 
     43     function transition()
     44     {
     45         var target = document.getElementById("target");
     46         target.className = transitions[state].className;
     47         state++;
     48         if (state < transitions.length)
     49             document.getElementById("description").innerText = transitions[state].description;
     50         else {
     51             document.getElementById("instructions").innerText = "Done.";
     52         }
     53     }
     54 </script>
     55