third_party/WebKit/LayoutTests/animations/play-state-initially-paused.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <style type="text/css">
   5     .target {
   6       position: relative;
   7       height: 100px;
   8       width: 100px;
   9       background-color: red;
  10       left: 0px;
  11       margin-bottom: 10px;
  12       -webkit-animation: test 0.8s linear forwards;
  13       -webkit-animation-play-state: paused;
  14       animation: test 0.8s linear forwards;
  15       animation-play-state: paused;
  16     }
  17     .running {
  18       -webkit-animation-play-state: running;
  19       animation-play-state: running;
  20     }
  21     #animation1 {
  22       -webkit-animation-delay: -0.2s;
  23       animation-delay: -0.2s;
  24     }
  25     #animation2 {
  26       -webkit-animation-delay: 0s;
  27       animation-delay: 0s;
  28     }
  29     #animation3 {
  30       -webkit-animation-delay: 0.2s;
  31       animation-delay: 0.2s;
  32     }
  33     @-webkit-keyframes test {
  34         from { left: 100px; }
  35         to   { left: 300px; }
  36     }
  37     @keyframes test {
  38         from { left: 100px; }
  39         to   { left: 300px; }
  40     }
  41   </style>
  42   <script src="resources/animation-test-helpers.js" type="text/javascript"></script>
  43   <script type="text/javascript">
  44     const expectedValues = [
  45       // [time, element-id, property, expected-value, tolerance]
  46       [0.0, "animation1", "left", 150, 0],
  47       [0.3, "animation1", "left", 150, 0],
  48       [0.5, "animation1", "left", 175, 15],
  49       [0.6, "animation1", "left", 200, 15],
  50       [0.8, "animation1", "left", 250, 15],
  51       [1.0, "animation1", "left", 300, 15],
  52       [1.2, "animation1", "left", 300, 0],
  53
  54       [0.0, "animation2", "left", 100, 0],
  55       [0.3, "animation2", "left", 100, 0],
  56       [0.5, "animation2", "left", 125, 15],
  57       [0.6, "animation2", "left", 150, 15],
  58       [0.8, "animation2", "left", 200, 15],
  59       [1.0, "animation2", "left", 250, 15],
  60       [1.2, "animation2", "left", 300, 15],
  61       [1.4, "animation2", "left", 300, 0],
  62
  63       [0.0, "animation3", "left", 0, 0],
  64       [0.5, "animation3", "left", 0, 0],
  65       [0.7, "animation3", "left", 125, 15],
  66       [0.8, "animation3", "left", 150, 15],
  67       [1.0, "animation3", "left", 200, 15],
  68       [1.2, "animation3", "left", 250, 15],
  69       [1.4, "animation3", "left", 300, 15],
  70       [1.6, "animation3", "left", 300, 0],
  71     ];
  72
  73     function run() {
  74       var targets = document.getElementsByClassName('target');
  75       for (var i = 0; i < targets.length; ++i) {
  76         targets[i].classList.add('running');
  77       }
  78     }
  79
  80     var disablePauseAnimationAPI = true;
  81     runAnimationTest(expectedValues, {0.4: run}, null, disablePauseAnimationAPI);
  82   </script>
  83 </head>
  84 <body>
  85   <p>This tests that an animation which is initially paused produces the correct output when first created, and can be unpaused.</p>
  86   <div class="target" id="animation1"></div>
  87   <div class="target" id="animation2"></div>
  88   <div class="target" id="animation3"></div>
  89   <div id="result"></div>
  90 </body>
  91 </html>