LayoutTests/animations/keyframes-iteration-count-non-integer.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>Keyframes test</title>
   8   <style type="text/css" media="screen">
   9     #box {
  10         position: absolute;
  11         left: 0;
  12         top: 100px;
  13         height: 100px;
  14         width: 100px;
  15         background-color: blue;
  16         -webkit-animation-duration: 2s;
  17         -webkit-animation-timing-function: linear;
  18         -webkit-animation-name: "anim";
  19         -webkit-animation-iteration-count: 0.3;
  20     }
  21     @-webkit-keyframes "anim" {
  22         from { left: 50px; }
  23         20%  { left: 100px; }
  24         40%  { left: 100px; }
  25         60%  { left: 200px; }
  26         80%  { left: 200px; }
  27         to   { left: 300px; }
  28     }
  29     </style>
  30     <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
  31     <script type="text/javascript" charset="utf-8">
  32
  33     if (window.layoutTestController) {
  34         layoutTestController.dumpAsText();
  35         layoutTestController.waitUntilDone();
  36     }
  37
  38     document.addEventListener("webkitAnimationEnd", function(event){
  39         var result;
  40         if (event.elapsedTime < 1)
  41             result = "PASS end of animation";
  42         else
  43             result = "FAIL end of animation";
  44         document.getElementById('result').innerHTML = result;
  45
  46         if (window.layoutTestController)
  47             layoutTestController.notifyDone();
  48     }, false);
  49
  50   </script>
  51 </head>
  52 <body>
  53 This test performs an animation of the left property with a non integer iteration count.
  54 <div id="box">
  55 </div>
  56 <div id="result">
  57 </div>
  58 </body>
  59 </html>