LayoutTests/animations/longhand-timing-function.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5     <style type="text/css" media="screen">
   6         .box {
   7             position: relative;
   8             height: 100px;
   9             width: 100px;
  10             margin: 20px;
  11             background-color: blue;
  12         }
  13
  14         #movers.moved > .box {
  15             -webkit-animation: move 1s linear;
  16         }
  17
  18         #movers > #test {
  19             -webkit-animation-iteration-count: 1;
  20         }
  21
  22         @-webkit-keyframes move {
  23             from { left: 0px;   }
  24             to   { left: 400px; }
  25         }
  26     </style>
  27     <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
  28     <script type="text/javascript" charset="utf-8">
  29         if (window.layoutTestController)
  30             layoutTestController.waitUntilDone();
  31
  32           const expectedValues = [
  33             // [animation-name, time, element-id, property, expected-value, tolerance]
  34             ["move", 0.5, "control", "left", 200, 10],
  35             ["move", 0.5, "test", "left", 200, 10],
  36           ];
  37
  38         function setupTest()
  39         {
  40             document.getElementById('movers').className = 'moved';
  41             runAnimationTest(expectedValues);
  42         }
  43
  44         window.addEventListener('load', function() {
  45             window.setTimeout(setupTest, 0);
  46         }, false);
  47     </script>
  48 </head>
  49 <body>
  50     <p>Animations should both use a linear timing function.</p>
  51     <div id="movers">
  52         <div id="control" class="box"></div>
  53         <div id="test" class="box"></div>
  54     </div>
  55     <div id="result"></div>
  56 </body>
  57 </html>