diff options
author | The Android Open Source Project <initial-contribution@android.com> | 2009-03-03 19:30:52 -0800 |
---|---|---|
committer | The Android Open Source Project <initial-contribution@android.com> | 2009-03-03 19:30:52 -0800 |
commit | 8e35f3cfc7fba1d1c829dc557ebad6409cbe16a2 (patch) | |
tree | 11425ea0b299d6fb89c6d3618a22d97d5bf68d0f /WebCore/manual-tests/transitions2.html | |
parent | 648161bb0edfc3d43db63caed5cc5213bc6cb78f (diff) | |
download | external_webkit-8e35f3cfc7fba1d1c829dc557ebad6409cbe16a2.zip external_webkit-8e35f3cfc7fba1d1c829dc557ebad6409cbe16a2.tar.gz external_webkit-8e35f3cfc7fba1d1c829dc557ebad6409cbe16a2.tar.bz2 |
auto import from //depot/cupcake/@135843
Diffstat (limited to 'WebCore/manual-tests/transitions2.html')
-rw-r--r-- | WebCore/manual-tests/transitions2.html | 52 |
1 files changed, 52 insertions, 0 deletions
diff --git a/WebCore/manual-tests/transitions2.html b/WebCore/manual-tests/transitions2.html new file mode 100644 index 0000000..6515a79 --- /dev/null +++ b/WebCore/manual-tests/transitions2.html @@ -0,0 +1,52 @@ +<style> + div { + width: 50px; + height: 50px; + background-color: green; + } + + div.square { + width: 100px; + height: 100px; + -webkit-transition-property: height; + -webkit-transition-duration: 2s; + } + + div.rectangle { + width: 100px; + height: 200px; + -webkit-transition-property: width, height; + -webkit-transition-duration: 5s; + } +</style> +<p id="instructions"> + When you click the Change button, the shape will + <span id="description"></span>. + <button style="display: block;" onclick="transition()">Change</button> +</p> +<div id="target"></div> +<script> + var state = 0; + var transitions = [ + {className:"rectangle", description:"animate to a large rectangle over 5 seconds."}, + {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."}, + {className:"", description:"instantly change to a small square"}, + {className:"square", description:"instantly change into a small rectangle and then animate into a large square over 2 seconds"}, + {className:"rectangle", description:"animate to a large rectangle over 5 seconds"}, + {className:"", description:"instantly change to a small square"} + ]; + + document.getElementById("description").innerText = transitions[0].description; + + function transition() + { + var target = document.getElementById("target"); + target.className = transitions[state].className; + state++; + if (state < transitions.length) + document.getElementById("description").innerText = transitions[state].description; + else { + document.getElementById("instructions").innerText = "Done."; + } + } +</script> |