LayoutTests/animations/keyframes-to-missing.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 with 'to' keyframe missing</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     }
  27     </style>
  28     <script type="text/javascript" charset="utf-8">
  29     if (window.layoutTestController) {
  30         layoutTestController.dumpAsText();
  31         layoutTestController.waitUntilDone();
  32     }
  33
  34     result = "PASS";
  35     const defaultTolerance = 0.2;
  36
  37     function isEqual(actual, desired, tolerance)
  38     {
  39         if (tolerance == undefined || tolerance == 0)
  40             tolerance = defaultTolerance;
  41         var diff = Math.abs(actual - desired);
  42         return diff < tolerance;
  43     }
  44
  45     function snapshot(which)
  46     {
  47         if (result != "PASS")
  48             return;
  49
  50         var left = parseInt(window.getComputedStyle(document.getElementById('box')).left);
  51         var expected = 0;
  52         if (!isEqual(left, expected))
  53             result = "FAIL(was:"+left+", expected:"+expected+")";
  54     }
  55
  56     function start()
  57     {
  58         setTimeout("snapshot(0)", 300);
  59         setTimeout("snapshot(1)", 700);
  60
  61         window.setTimeout(function() {
  62             document.getElementById('result').innerHTML = result;
  63             if (window.layoutTestController)
  64                 layoutTestController.notifyDone();
  65         }, 800);
  66     }
  67
  68     window.addEventListener('load', start, false);
  69
  70   </script>
  71 </head>
  72 <body>
  73 This test performs an animation of the left property. The 'to' keyframe is missing so it should not animate
  74 <div id="box">
  75 </div>
  76 <div id="result">
  77 </div>
  78 </body>
  79 </html>