summaryrefslogtreecommitdiffstats
path: root/Source/WebCore/manual-tests/transitions.html
diff options
context:
space:
mode:
authorSteve Block <steveblock@google.com>2011-05-13 06:44:40 -0700
committerAndroid (Google) Code Review <android-gerrit@google.com>2011-05-13 06:44:40 -0700
commit08014c20784f3db5df3a89b73cce46037b77eb59 (patch)
tree47749210d31e19e6e2f64036fa8fae2ad693476f /Source/WebCore/manual-tests/transitions.html
parent860220379e56aeb66424861ad602b07ee22b4055 (diff)
parent4c3661f7918f8b3f139f824efb7855bedccb4c94 (diff)
downloadexternal_webkit-08014c20784f3db5df3a89b73cce46037b77eb59.zip
external_webkit-08014c20784f3db5df3a89b73cce46037b77eb59.tar.gz
external_webkit-08014c20784f3db5df3a89b73cce46037b77eb59.tar.bz2
Merge changes Ide388898,Ic49f367c,I1158a808,Iacb6ca5d,I2100dd3a,I5c1abe54,Ib0ef9902,I31dbc523,I570314b3
* changes: Merge WebKit at r75315: Update WebKit version Merge WebKit at r75315: Add FrameLoaderClient PageCache stubs Merge WebKit at r75315: Stub out AXObjectCache::remove() Merge WebKit at r75315: Fix ImageBuffer Merge WebKit at r75315: Fix PluginData::initPlugins() Merge WebKit at r75315: Fix conflicts Merge WebKit at r75315: Fix Makefiles Merge WebKit at r75315: Move Android-specific WebCore files to Source Merge WebKit at r75315: Initial merge by git.
Diffstat (limited to 'Source/WebCore/manual-tests/transitions.html')
-rw-r--r--Source/WebCore/manual-tests/transitions.html54
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>