LayoutTests/animations/keyframes.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: 1s;
  17         -webkit-animation-timing-function: linear;
  18         -webkit-animation-name: "anim";
  19     }
  20     @-webkit-keyframes "anim" {
  21         from { left: 50px; }
  22         20%  { left: 100px; }
  23         40%  { left: 100px; }
  24         60%  { left: 200px; }
  25         80%  { left: 200px; }
  26         to   { left: 300px; }
  27     }
  28     </style>
  29     <script type="text/javascript" charset="utf-8">
  30     if (window.layoutTestController) {
  31         layoutTestController.dumpAsText();
  32         layoutTestController.waitUntilDone();
  33     }
  34
  35     result = "PASS";
  36     const defaultTolerance = 0.2;
  37
  38     function isEqual(actual, desired, tolerance)
  39     {
  40         if (tolerance == undefined || tolerance == 0)
  41             tolerance = defaultTolerance;
  42         var diff = Math.abs(actual - desired);
  43         return diff < tolerance;
  44     }
  45
  46     function snapshot(which)
  47     {
  48         if (result != "PASS")
  49             return;
  50
  51         var left = parseInt(window.getComputedStyle(document.getElementById('box')).left);
  52         var expected = which ? 200 : 100;
  53         if (!isEqual(left, expected))
  54             result = "FAIL(was:"+left+", expected:"+expected+")";
  55     }
  56
  57     function start()
  58     {
  59         setTimeout("snapshot(0)", 300);
  60         setTimeout("snapshot(1)", 700);
  61
  62         window.setTimeout(function() {
  63             document.getElementById('result').innerHTML = result;
  64             if (window.layoutTestController)
  65                 layoutTestController.notifyDone();
  66         }, 800);
  67     }
  68
  69     document.addEventListener('webkitAnimationStart', start, false);
  70
  71   </script>
  72 </head>
  73 <body>
  74 This test performs an animation of the left property. It should stop for 100ms at 100px and 200px
  75 We test for those values 50ms after it has stopped at each position.
  76 <div id="box">
  77 </div>
  78 <div id="result">
  79 </div>
  80 </body>
  81 </html>