src/third_party/WebKit/LayoutTests/transitions/negative-delay.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <style>
   5     .square {
   6       position: absolute;
   7       background: blue;
   8       width: 20px;
   9       height: 20px;
  10       left: 0px;
  11       -webkit-transition-timing-function: linear;
  12       -webkit-transition-duration: 2s;
  13     }
  14
  15     #square1 {
  16       top: 20px;
  17       -webkit-transition-property: left;
  18       -webkit-transition-delay: -1s;
  19     }
  20     #square2 {
  21       top: 60px;
  22       -webkit-transition-property: left;
  23     }
  24     .moved {
  25       left: 600px;
  26     }
  27
  28     #square3 {
  29       top: 100px;
  30       -webkit-transition-property: transform;
  31       -webkit-transition-delay: -1s;
  32     }
  33     #square4 {
  34       top: 140px;
  35       -webkit-transition-property: transform;
  36     }
  37     .translated {
  38       transform: translateX(600px);
  39     }
  40   </style>
  41
  42   <script src="../animations/resources/animation-test-helpers.js"></script>
  43
  44   <script>
  45     // The delays of squares 1 and 3 are negative, so they should be ahead.
  46     const expectedValues = [
  47       // [time, element-id, property, expected-value, tolerance]
  48       [0.0, "square1", "left", 300, 15],
  49       [0.0, "square2", "left",   0, 15],
  50       [0.5, "square1", "left", 450, 15],
  51       [0.5, "square2", "left", 150, 15],
  52       [0.0, "square3", "-webkit-transform.4", 300, 20],
  53       [0.0, "square4", "-webkit-transform.4",   0, 20],
  54       [0.5, "square3", "-webkit-transform.4", 450, 20],
  55       [0.5, "square4", "-webkit-transform.4", 150, 20],
  56     ];
  57
  58     function setupTest()
  59     {
  60       document.getElementById('square1').className = 'moved square';
  61       document.getElementById('square2').className = 'moved square';
  62       document.getElementById('square3').className = 'translated square';
  63       document.getElementById('square4').className = 'translated square';
  64     }
  65
  66     runTransitionTest(expectedValues, setupTest);
  67   </script>
  68 </head>
  69
  70 <body>
  71
  72 <div class="square" id="square1"></div>
  73 <div class="square" id="square2"></div>
  74 <div class="square" id="square3"></div>
  75 <div class="square" id="square4"></div>
  76
  77 <div id="result">
  78 </div>
  79
  80 </body>
  81 </html>