LayoutTests/animations/multiple-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>Test animation with multiple keyframes</title>
   8   <style type="text/css" media="screen">
   9     #box {
  10       position: relative;
  11       left: 10px;
  12       top: 10px;
  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     }
  20     @-webkit-keyframes anim {
  21         from { left: 10px; }
  22         40% { left: 30px; }
  23         60% { left: 10px; }
  24         to   { left: 20px; }
  25     }
  26   </style>
  27   <script src="animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
  28   <script type="text/javascript" charset="utf-8">
  29
  30     const defaultTolerance = 2;
  31
  32     const expected = [
  33       // [time, property, element-id, expected-value]
  34       [400, "left", "box", 20],
  35       [1200, "left", "box", 10],
  36       [1600, "left", "box", 15],
  37     ];
  38
  39     function start()
  40     {
  41         setup();
  42         window.setTimeout(function() {
  43             document.getElementById('box').style.display = "none";
  44             cleanup();
  45         }, 2100);
  46     }
  47
  48     document.addEventListener('webkitAnimationStart', start, false);
  49
  50   </script>
  51 </head>
  52 <body>
  53 This test performs a keyframed animation of the left property. It animates over 2 seconds.
  54 It takes 3 snapshots and expects each result to be within a specified range.
  55 <div id="box">
  56 </div>
  57 <div id="result">
  58 </div>
  59 </body>
  60 </html>