third_party/WebKit/ManualTests/animation/transitions-and-paused-animations.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   2    "http://www.w3.org/TR/html4/loose.dtd">
   3
   4 <html lang="en">
   5 <head>
   6   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   7   <title>Transitions and paused animations</title>
   8   <style type="text/css" media="screen">
   9
  10     .container {
  11       height: 200px;
  12       width: 200px;
  13       border: 1px solid black;
  14       -webkit-transition: -webkit-transform 0.5s;
  15     }
  16
  17     .moved {
  18       transform: translateX(100px);
  19
  20     }
  21     .box {
  22       position: relative;
  23       height: 100px;
  24       width: 100px;
  25       margin: 50px;
  26       background-color: blue;
  27       transform: translateZ(0);
  28       -webkit-animation: fade 1s infinite linear alternate;
  29     }
  30
  31     .moved .box {
  32       -webkit-animation-play-state: paused;
  33     }
  34
  35     @-webkit-keyframes fade {
  36       from { transform: rotate(-20deg); }
  37       to   { transform: rotate(20deg);   }
  38     }
  39   </style>
  40   <script type="text/javascript" charset="utf-8">
  41
  42     function runTest()
  43     {
  44       var box = document.querySelectorAll('.box')[0];
  45       var container = document.querySelectorAll('.container')[0];
  46
  47       window.setTimeout(function() {
  48         container.className = 'container';
  49       }, 250);
  50
  51       window.setTimeout(function() {
  52         container.className = 'container moved';
  53       }, 1500);
  54
  55       window.setTimeout(function() {
  56         container.className = 'container';
  57       }, 3000);
  58     }
  59
  60     window.addEventListener('load', runTest, false)
  61   </script>
  62 </head>
  63 <body>
  64
  65 <p>Box should animate smoothly left, then right then left again, and not jump at the end.</p>
  66 <div class="container moved">
  67   <div class="box"></div>
  68 </div>
  69
  70 </body>
  71 </html>