third_party/WebKit/LayoutTests/animations/generic-from-to.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 simple animation</title>
   8   <style type="text/css" media="screen">
   9     #box {
  10       position: relative;
  11       left: 100px;
  12       top: 10px;
  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: 100px; }
  22         to   { left: 200px; }
  23     }
  24   </style>
  25   <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
  26   <script type="text/javascript" charset="utf-8">
  27
  28     const expectedValues = [
  29       // [time, element-id, property, expected-value, tolerance]
  30       [0.25, "box", "left", 125, 5],
  31       [0.50, "box", "left", 150, 5],
  32       [0.75, "box", "left", 175, 5],
  33     ];
  34
  35     runAnimationTest(expectedValues);
  36
  37   </script>
  38 </head>
  39 <body>
  40 This test performs an animation of the left property. It animates over 1 second.
  41 It takes 3 snapshots and expects each result to be within a specified range.
  42 <div id="box">
  43 </div>
  44 <div id="result">
  45 </div>
  46 </body>
  47 </html>