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       background-color: green;
  15       -webkit-transition-duration: 1s;
  16     }
  17
  18     #box {
  19       -webkit-transition-property: left;
  20     }
  21
  22     #box.final {
  23       left: 400px;
  24     }
  25
  26     #box2 {
  27       -webkit-transition-property: -webkit-transform;
  28     }
  29
  30     #box2.final {
  31       -webkit-transform: translateX(400px);
  32     }
  33
  34     #indicator {
  35       position: absolute;
  36       left: 322px;
  37       height: 200px;
  38       background-color: red;
  39     }
  40
  41   </style>
  42   <script src="resources/transition-test-helpers.js"></script>
  43   <script>
  44
  45     const expectedValues = [
  46       // [time, element-id, property, expected-value, tolerance]
  47       [0.5, 'box', 'left', 322, 5],
  48       [0.5, 'box2', '-webkit-transform.4', 322, 5],
  49     ];
  50
  51     function setupTest()
  52     {
  53       document.getElementById('box').className = 'box final';
  54       document.getElementById('box2').className = 'box final';
  55     }
  56
  57     var doPixelTest = true;
  58     runTransitionTest(expectedValues, setupTest, usePauseAPI, doPixelTest);
  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>