Web Inspector: AXI: linkified refs to #document and #text are not usually navigable...
[WebKit-https.git] / ManualTests / transitions2.html
1 <style>
2     div {
3         width: 50px;
4         height: 50px;
5         background-color: green;
6     }
7
8     div.square {
9         width: 100px;
10         height: 100px;
11         -webkit-transition-property: height;
12         -webkit-transition-duration: 2s;
13     }
14     
15     div.rectangle {
16         width: 100px;
17         height: 200px;
18         -webkit-transition-property: width, height;
19         -webkit-transition-duration: 5s;
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:"rectangle", description:"animate to a large rectangle over 5 seconds."},
32         {className:"square", description:"animate to a square over 2 seconds.  Try clicking before the first animation finishes and make sure the width doesn't do an ugly jump."},
33         {className:"", description:"instantly change to a small square"},
34         {className:"square", description:"instantly change into a small rectangle and then animate into a large square over 2 seconds"},
35         {className:"rectangle", description:"animate to a large rectangle over 5 seconds"},
36         {className:"", description:"instantly change to a small square"}
37     ];
38
39     document.getElementById("description").innerText = transitions[0].description;
40
41     function transition()
42     {
43         var target = document.getElementById("target");
44         target.className = transitions[state].className;
45         state++;
46         if (state < transitions.length)
47             document.getElementById("description").innerText = transitions[state].description;
48         else {
49             document.getElementById("instructions").innerText = "Done.";
50         }
51     }
52 </script>