LayoutTests/animations/missing-from-to.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   2    "http://www.w3.org/TR/html4/loose.dtd">
   3
   4 <html lang="en">
   5 <head>
   6   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   7   <title>Test animation with missing from and to keyframes</title>
   8   <style type="text/css" media="screen">
   9     .box {
  10       position: relative;
  11       left: 10px;
  12       top: 10px;
  13       height: 20px;
  14       width: 20px;
  15       background-color: blue;
  16       -webkit-animation-duration: 2s;
  17       -webkit-animation-timing-function: linear;
  18     }
  19
  20     #box1 {
  21       -webkit-animation-name: anim1;
  22     }
  23     @-webkit-keyframes anim1 {
  24         from { left: 10px; }
  25         40% { left: 30px; }
  26         60% { left: 10px; }
  27         to { left: 20px; }
  28     }
  29
  30     #box2 {
  31       -webkit-animation-name: anim2;
  32       background-color: red;
  33     }
  34     @-webkit-keyframes anim2 {
  35         40% { left: 30px; }
  36         60% { left: 10px; }
  37         to { left: 20px; }
  38     }
  39
  40     #box3 {
  41       left: 20px;
  42       -webkit-animation-name: anim3;
  43       background-color: green;
  44     }
  45     @-webkit-keyframes anim3 {
  46         from { left: 10px; }
  47         40% { left: 30px; }
  48         60% { left: 10px; }
  49     }
  50
  51     #box4 {
  52       -webkit-animation-name: anim4;
  53       background-color: yellow;
  54     }
  55     @-webkit-keyframes anim4 {
  56         40% { left: 30px; }
  57         60% { left: 20px; }
  58     }
  59
  60     #box5 {
  61       -webkit-animation-name: anim5;
  62       background-color: orange;
  63     }
  64     @-webkit-keyframes anim5 {
  65     }
  66
  67     #result {
  68       margin-top: 20px;
  69     }
  70   </style>
  71   <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
  72   <script type="text/javascript" charset="utf-8">
  73
  74     const expectedValues = [
  75       // [animation-name, time, element-id, property, expected-value, tolerance]
  76       ["anim1", 0.4, "box1", "left", 20, 2],
  77       ["anim1", 1.0, "box1", "left", 20, 2],
  78       ["anim1", 1.6, "box1", "left", 15, 2],
  79       ["anim2", 0.4, "box2", "left", 20, 2],
  80       ["anim2", 1.0, "box2", "left", 20, 2],
  81       ["anim2", 1.6, "box2", "left", 15, 2],
  82       ["anim3", 0.4, "box3", "left", 20, 2],
  83       ["anim3", 1.0, "box3", "left", 20, 2],
  84       ["anim3", 1.6, "box3", "left", 15, 2],
  85       ["anim4", 0.4, "box4", "left", 20, 2],
  86       ["anim4", 1.0, "box4", "left", 25, 2],
  87       ["anim4", 1.6, "box4", "left", 15, 2]
  88     ];
  89
  90     runAnimationTest(expectedValues, function() {
  91       if (window.testRunner) {
  92           var box5Element = document.getElementById('box5');
  93           if (internals.pauseAnimationAtTimeOnElement("anim5", 0.1, box5Element))
  94               result += "FAIL - box5 animation was running<br>";
  95           else
  96               result += "PASS - box5 animation was not running<br>";
  97       }
  98     });
  99
 100   </script>
 101 </head>
 102 <body>
 103 This test performs animations of the left property on five boxes over 2 seconds.
 104 Box 1 has all keyframes. Box 2 has a missing "from" keyframe.
 105 Box 3 has a missing "to" keyframe.
 106 Box 4 has both "from" and "to" keyframes missing, but other keyframes which
 107 should trigger the generation of "from" and "to". Box 5 has no keyframes, and
 108 should not animate.
 109 The test takes 3 snapshots each and expects each result to be within a specified range.
 110 <div class="box" id="box1">
 111 </div>
 112 <div class="box" id="box2">
 113 </div>
 114 <div class="box" id="box3">
 115 </div>
 116 <div class="box" id="box4">
 117 </div>
 118 <div class="box" id="box5">
 119 </div>
 120 <div id="result">
 121 </div>
 122 </body>
 123 </html>