LayoutTests/animations/negative-delay.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   2         "http://www.w3.org/TR/html4/strict.dtd">
   3 <html>
   4 <head>
   5   <title>For Bug 26150 - Negative values for animation-delay are ignored</title>
   6   <style type="text/css">
   7     .square {
   8       background: blue;
   9       width: 20px;
  10       height: 20px;
  11       position: absolute;
  12       -webkit-animation-duration: 2s;
  13       -webkit-animation-iteration-count: 1;
  14       -webkit-animation-timing-function: linear;
  15     }
  16
  17     .move {
  18       -webkit-animation-name: square-move;
  19     }
  20
  21     .translate {
  22       -webkit-animation-name: square-translate;
  23     }
  24
  25     @-webkit-keyframes square-move {
  26       0%    { left: 0px; }
  27       100%  { left: 600px; }
  28     }
  29
  30     @-webkit-keyframes square-translate {
  31       0%    { -webkit-transform: translateX(0); }
  32       100%  { -webkit-transform: translateX(600px); }
  33     }
  34
  35     #square1 {
  36       top: 20px;
  37       left: 20px;
  38       -webkit-animation-delay: -1s;
  39     }
  40
  41     #square2 {
  42       top: 60px;
  43       left: 20px;
  44     }
  45
  46     #square3 {
  47       top: 100px;
  48       left: 20px;
  49       -webkit-animation-delay: -1s;
  50     }
  51
  52     #square4 {
  53       top: 140px;
  54       left: 20px;
  55     }
  56   </style>
  57
  58   <script src="animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
  59
  60   <script>
  61     // The delay of square1 is negative so square1 should be in ahead of square2.
  62     const expectedValues = [
  63       // [animation-name, time, element-id, property, expected-value, tolerance]
  64       ["square-move", 0, "square1", "left", 300, 15],
  65       ["square-move", 0, "square2", "left", 0, 15],
  66       ["square-move", 0.5, "square1", "left", 450, 15],
  67       ["square-move", 0.5, "square2", "left", 150, 15],
  68       ["square-translate", 0, "square3", "webkitTransform.4", 300, 20],
  69       ["square-translate", 0, "square4", "webkitTransform.4", 0, 20],
  70       ["square-translate", 0.5, "square3", "webkitTransform.4", 450, 20],
  71       ["square-translate", 0.5, "square4", "webkitTransform.4", 150, 20],
  72     ];
  73
  74     runAnimationTest(expectedValues);
  75   </script>
  76 </head>
  77
  78 <body>
  79
  80 <div class="square move" id="square1"></div>
  81 <div class="square move" id="square2"></div>
  82 <div class="square translate" id="square3"></div>
  83 <div class="square translate" id="square4"></div>
  84
  85 <div id="result">
  86 </div>
  87
  88 </body>
  89 </html>