diff options
author | Steve Block <steveblock@google.com> | 2011-05-06 11:45:16 +0100 |
---|---|---|
committer | Steve Block <steveblock@google.com> | 2011-05-12 13:44:10 +0100 |
commit | cad810f21b803229eb11403f9209855525a25d57 (patch) | |
tree | 29a6fd0279be608e0fe9ffe9841f722f0f4e4269 /Source/WebCore/manual-tests/transitions.html | |
parent | 121b0cf4517156d0ac5111caf9830c51b69bae8f (diff) | |
download | external_webkit-cad810f21b803229eb11403f9209855525a25d57.zip external_webkit-cad810f21b803229eb11403f9209855525a25d57.tar.gz external_webkit-cad810f21b803229eb11403f9209855525a25d57.tar.bz2 |
Merge WebKit at r75315: Initial merge by git.
Change-Id: I570314b346ce101c935ed22a626b48c2af266b84
Diffstat (limited to 'Source/WebCore/manual-tests/transitions.html')
-rw-r--r-- | Source/WebCore/manual-tests/transitions.html | 54 |
1 files changed, 54 insertions, 0 deletions
diff --git a/Source/WebCore/manual-tests/transitions.html b/Source/WebCore/manual-tests/transitions.html new file mode 100644 index 0000000..33a9cff --- /dev/null +++ b/Source/WebCore/manual-tests/transitions.html @@ -0,0 +1,54 @@ +<style> + div { + width: 50px; + height: 50px; + background-color: yellow; + } + + div.green { + width: 100px; + background-color: green; + -webkit-transition-property: background-color; + -webkit-transition-duration: 5s; + } + + div.square { + width: 100px; + height: 100px; + -webkit-transition-property: height; + -webkit-transition-duration: 2s; + } +</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:"green", description:"instantly change into a rectangle and fade from yellow to green over 5 seconds"}, + {className:"", description:"instantly change into a small yellow square"}, + {className:"square", description:"instantly change into a yellow rectangle and then animate into a big yellow square over 2 seconds"}, + {className:"green", description:"instantly change into a yellow rectangle and then animate to a green rectangle over 5 seconds"}, + {className:"", description:"instantly change into a small yellow square"}, + {className:"green", description:"instantly change into a yellow rectangle and fade from yellow to green over 5 seconds"}, + {className:"square", description:"instantly change to a yellow rectangle and then animate into a large yellow square over 2 seconds"}, + {className:"", description:"instantly change into a small yellow 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> |