[css-grid] Unprefix CSS Grid Layout properties
[WebKit-https.git] / ManualTests / transitions.html
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>