third_party/WebKit/LayoutTests/transitions/change-duration-during-transition.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style>
   6     #box {
   7       position: absolute;
   8       height: 100px;
   9       width: 100px;
  10       left: 0px;
  11       background-color: blue;
  12       -webkit-transition-duration: 1s;
  13       -webkit-transition-timing-function: linear;
  14       -webkit-transition-property: left;
  15     }
  16   </style>
  17   <script src="../animations/resources/animation-test-helpers.js" type="text/javascript"></script>
  18   <script>
  19     const expectedValues = [
  20       // [time, element-id, property, expected-value, tolerance]
  21       [0.5, 'box', 'left', 50, 10],
  22       [0.8, 'box', 'left', 0, 0],
  23     ];
  24
  25     function changeDuration() {
  26       box.style.webkitTransitionDuration = "0.1s";
  27     }
  28
  29     function goBack() {
  30       box.style.left = "0px";
  31     }
  32
  33     const callbacks = {
  34       0.1: changeDuration,
  35       0.6: goBack,
  36     }
  37
  38     function setupTest() {
  39       box.style.left = '100px';
  40     }
  41
  42     runTransitionTest(expectedValues, setupTest, callbacks, false, true);
  43   </script>
  44 </head>
  45 <body>
  46   <div id="box"></div>
  47 </body>
  48 </html>