summaryrefslogtreecommitdiffstats
path: root/WebCore/manual-tests/animation-with-transition.html
diff options
context:
space:
mode:
Diffstat (limited to 'WebCore/manual-tests/animation-with-transition.html')
-rw-r--r--WebCore/manual-tests/animation-with-transition.html60
1 files changed, 60 insertions, 0 deletions
diff --git a/WebCore/manual-tests/animation-with-transition.html b/WebCore/manual-tests/animation-with-transition.html
new file mode 100644
index 0000000..37a7589
--- /dev/null
+++ b/WebCore/manual-tests/animation-with-transition.html
@@ -0,0 +1,60 @@
+<html>
+<head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+ <title>simple-animation</title>
+ <style type="text/css" media="screen">
+ div {
+ position: relative;
+ left: 10px;
+ top: 10px;
+ width: 200px;
+ height: 200px;
+ background-color: #696;
+ -webkit-transition: left 5s, top 5s;
+ }
+
+ .animate {
+ -webkit-animation-name: simple;
+ -webkit-animation-duration: 2s;
+ -webkit-animation-timing-function: linear;
+ -webkit-animation-fill-mode: backwards;
+ }
+
+ @-webkit-keyframes simple {
+ 50% {
+ left: 300px;
+ }
+ 100% {
+ left: 80px;
+ }
+ }
+
+
+ </style>
+ <script type="text/javascript" charset="utf-8">
+
+ function doTransition() {
+ var div = document.querySelector("div");
+ div.style.left = "200px";
+ }
+
+ function doAnimation() {
+ var div = document.querySelector("div");
+ div.className = "animate";
+ }
+
+ </script>
+</head>
+<body>
+ <p>Testing setting an animation while a transition is running, in the
+ case where the animation synthesizes the initial keyframe</p>
+ <p>
+ Start the transition, then start the animation.</p>
+ <p>
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=41188">https://bugs.webkit.org/show_bug.cgi?id=41188</a>
+ </p>
+ <button onclick="doTransition();">Transition</button>
+ <button onclick="doAnimation();">Set Animation</button>
+<div></div>
+</body>
+</html>