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

   1 <html>
   2 <head>
   3   <style>
   4     .box {
   5       position: relative;
   6       left: 0;
   7       height: 100px;
   8       width: 100px;
   9       margin: 10px;
  10       background-color: blue;
  11       -webkit-transition: left 1s linear;
  12     }
  13     .animating > .box {
  14       left: 400px;
  15     }
  16   </style>
  17   <script src="../animations/resources/animation-test-helpers.js"></script>
  18   <script>
  19     const expectedValues = [
  20       // [time, element-id, property, expected-value, tolerance]
  21       [0.5, "box1", "left", 200, 4],
  22       [0.5, "box2", "left", 322, 4],
  23       [0.5, "box3", "left", 126, 4],
  24       [0.5, "box4", "left", 273, 4],
  25       [0.5, "box5", "left", 200, 4],
  26     ];
  27
  28     function setupTest()
  29     {
  30       document.getElementById('container').className = 'animating';
  31     }
  32
  33     runTransitionTest(expectedValues, setupTest);
  34   </script>
  35 </head>
  36 <body>
  37
  38 <div id="container">
  39   <div id="box1" class="box" style="-webkit-transition-timing-function: linear;"></div>
  40   <div id="box2" class="box" style="-webkit-transition-timing-function: ease;"></div>
  41   <div id="box3" class="box" style="-webkit-transition-timing-function: ease-in;"></div>
  42   <div id="box4" class="box" style="-webkit-transition-timing-function: ease-out;"></div>
  43   <div id="box5" class="box" style="-webkit-transition-timing-function: ease-in-out;"></div>
  44 </div>
  45
  46 <div id="result"></div>
  47
  48 </body>
  49 </html>