[CSS Regions] Selection dragged from a region paints its background
[WebKit-https.git] / ManualTests / animation-with-transition.html
1 <html>
2 <head>
3   <meta http-equiv="Content-type" content="text/html; charset=utf-8">
4   <title>simple-animation</title>
5   <style type="text/css" media="screen">
6     div {
7       position: relative;
8       left: 10px;
9       top: 10px;
10       width: 200px;
11       height: 200px;
12       background-color: #696;
13       -webkit-transition: left 5s, top 5s;
14     }
15     
16     .animate {
17       -webkit-animation-name: simple;
18       -webkit-animation-duration: 2s;
19       -webkit-animation-timing-function: linear;
20       -webkit-animation-fill-mode: backwards;
21     }
22     
23     @-webkit-keyframes simple {
24       50% {
25         left: 300px;
26       }
27       100% {
28         left: 80px;
29       }
30     }
31     
32     
33   </style>
34   <script type="text/javascript" charset="utf-8">
35     
36     function doTransition() {
37       var div = document.querySelector("div");
38       div.style.left = "200px";
39     }
40     
41     function doAnimation() {
42       var div = document.querySelector("div");
43       div.className = "animate";
44     }
45     
46   </script>
47 </head>
48 <body>
49   <p>Testing setting an animation while a transition is running, in the
50     case where the animation synthesizes the initial keyframe</p>
51   <p>
52     Start the transition, then start the animation.</p>
53   <p>
54     <a href="https://bugs.webkit.org/show_bug.cgi?id=41188">https://bugs.webkit.org/show_bug.cgi?id=41188</a>
55   </p>
56   <button onclick="doTransition();">Transition</button>
57   <button onclick="doAnimation();">Set Animation</button>
58 <div></div>
59 </body>
60 </html>