third_party/WebKit/LayoutTests/transitions/steps-timing-function.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style>
   6     #box {
   7       height: 100px;
   8       width: 100px;
   9       background-color: blue;
  10       transform: translateX(0px);
  11       -webkit-transition-duration: 1s;
  12       -webkit-transition-timing-function: steps(3, end);
  13       -webkit-transition-property: transform;
  14     }
  15   </style>
  16   <script src="../animations/resources/animation-test-helpers.js"></script>
  17   <script type="text/javascript">
  18
  19     const expectedValues = [
  20       // [time, element-id, property, expected-value, tolerance]
  21       [0.25, "box", "-webkit-transform.4", 0, 5],
  22       [0.5, "box", "-webkit-transform.4", 66, 5],
  23       [0.75, "box", "-webkit-transform.4", 133, 5],
  24     ];
  25
  26     function setupTest()
  27     {
  28       var box = document.getElementById('box');
  29       box.style.webkitTransform = 'translateX(200px)';
  30     }
  31
  32     runTransitionTest(expectedValues, setupTest);
  33   </script>
  34 </head>
  35 <body>
  36
  37 <p>
  38 The box should move horizontally 200px over 1s, in 3 equal increments.
  39 </p>
  40 <div id="box">
  41 </div>
  42 <div id="result">
  43 </div>
  44 </body>
  45 </html>