src/third_party/WebKit/LayoutTests/transitions/default-timing-function.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style>
   6     .container {
   7       position: relative;
   8     }
   9
  10     .box {
  11       position: relative;
  12       height: 100px;
  13       width: 100px;
  14       left: 0px;
  15       background-color: green;
  16       -webkit-transition-duration: 1s;
  17     }
  18
  19     #box {
  20       -webkit-transition-property: left;
  21     }
  22
  23     #box.final {
  24       left: 400px;
  25     }
  26
  27     #box2 {
  28       -webkit-transition-property: -webkit-transform;
  29     }
  30
  31     #box2.final {
  32       transform: translateX(400px);
  33     }
  34
  35     #indicator {
  36       position: absolute;
  37       left: 322px;
  38       height: 200px;
  39       background-color: red;
  40     }
  41
  42   </style>
  43   <script src="../animations/resources/animation-test-helpers.js"></script>
  44   <script>
  45
  46     const expectedValues = [
  47       // [time, element-id, property, expected-value, tolerance]
  48       [0.5, 'box', 'left', 322, 5],
  49       [0.5, 'box2', '-webkit-transform.4', 322, 5],
  50     ];
  51
  52     function setupTest()
  53     {
  54       document.getElementById('box').className = 'box final';
  55       document.getElementById('box2').className = 'box final';
  56     }
  57
  58     runTransitionTest(expectedValues, setupTest);
  59   </script>
  60 </head>
  61 <body>
  62
  63   <!-- The pixel result should show a green bar, with no red visible. -->
  64   <div class="container">
  65     <div id="indicator" class="box"></div>
  66
  67     <div id="box" class="box"></div>
  68     <div id="box2" class="box"></div>
  69   </div>
  70
  71   <div id="result"></div>
  72
  73 </body>
  74 </html>