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="animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
  26   <script type="text/javascript" charset="utf-8">
  27
  28     const defaultTolerance = 5;
  29
  30     const expected = [
  31       // [time, property, element-id, expected-value]
  32       [250, "left", "box", 125],
  33       [500, "left", "box", 150],
  34       [750, "left", "box", 175],
  35     ];
  36
  37     function start()
  38     {
  39         setup();
  40         window.setTimeout(function() {
  41             document.getElementById('box').style.display = "none";
  42             cleanup();
  43         }, 900);
  44     }
  45
  46     document.addEventListener('webkitAnimationStart', start, false);
  47
  48   </script>
  49 </head>
  50 <body>
  51 This test performs an animation of the left property. It animates over 1 second.
  52 It takes 3 snapshots and expects each result to be within a specified range.
  53 <div id="box">
  54 </div>
  55 <div id="result">
  56 </div>
  57 </body>
  58 </html>