third_party/WebKit/LayoutTests/animations/fill-mode-missing-from-to-keyframes.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 missing keyframes with fill modes</title>
   8   <style type="text/css" media="screen">
   9     .box {
  10       position: relative;
  11       left: 100px;
  12       top: 10px;
  13       height: 30px;
  14       width: 200px;
  15       -webkit-animation-delay: 0.1s;
  16       -webkit-animation-duration: 0.1s;
  17       -webkit-animation-timing-function: linear;
  18     }
  19     @-webkit-keyframes anim1 {
  20         from { left: 200px; }
  21         50% { left: 250px; }
  22         to   { left: 300px; }
  23     }
  24     @-webkit-keyframes anim2 {
  25         50% { left: 250px; }
  26         to   { left: 300px; }
  27     }
  28     @-webkit-keyframes anim3 {
  29         from { left: 200px; }
  30         50% { left: 250px; }
  31     }
  32     @-webkit-keyframes anim4 {
  33         50% { left: 250px; }
  34     }
  35
  36     #a {
  37       background-color: blue;
  38       -webkit-animation-fill-mode: none;
  39       -webkit-animation-name: anim1;
  40     }
  41     #b {
  42       background-color: red;
  43       -webkit-animation-fill-mode: backwards;
  44       -webkit-animation-name: anim1;
  45     }
  46     #c {
  47       background-color: green;
  48       -webkit-animation-fill-mode: forwards;
  49       -webkit-animation-name: anim1;
  50     }
  51     #d {
  52       background-color: yellow;
  53       -webkit-animation-fill-mode: both;
  54       -webkit-animation-name: anim1;
  55     }
  56     #e {
  57       background-color: #999;
  58       -webkit-animation-fill-mode: both;
  59       -webkit-animation-iteration-count: 2;
  60       -webkit-animation-direction: alternate;
  61       -webkit-animation-name: anim1;
  62     }
  63
  64     #f {
  65       background-color: blue;
  66       -webkit-animation-fill-mode: none;
  67       -webkit-animation-name: anim2;
  68     }
  69     #g {
  70       background-color: red;
  71       -webkit-animation-fill-mode: backwards;
  72       -webkit-animation-name: anim2;
  73     }
  74     #h {
  75       background-color: green;
  76       -webkit-animation-fill-mode: forwards;
  77       -webkit-animation-name: anim2;
  78     }
  79     #i {
  80       background-color: yellow;
  81       -webkit-animation-fill-mode: both;
  82       -webkit-animation-name: anim2;
  83     }
  84     #j {
  85       background-color: #999;
  86       -webkit-animation-fill-mode: both;
  87       -webkit-animation-iteration-count: 2;
  88       -webkit-animation-direction: alternate;
  89       -webkit-animation-name: anim2;
  90     }
  91
  92   </style>
  93   <script type="text/javascript" charset="utf-8">
  94     const numAnims = 10;
  95     var animsFinished = 0;
  96     const allowance = 5;
  97     const expectedValues = [
  98       {id: "a", start: 100, end: 100},
  99       {id: "b", start: 200, end: 100},
 100       {id: "c", start: 100, end: 300},
 101       {id: "d", start: 200, end: 300},
 102       {id: "e", start: 200, end: 200}
 103     ];
 104     var result = "";
 105
 106     if (window.testRunner) {
 107         testRunner.dumpAsText();
 108         testRunner.waitUntilDone();
 109     }
 110
 111     function animationEnded(event) {
 112         if (++animsFinished == numAnims) {
 113             setTimeout(endTest, 0); // this set timeout should be ok in the test environment
 114                                     // since we're just giving style a chance to resolve
 115         }
 116     };
 117
 118     function endTest() {
 119
 120         for (var i=0; i < expectedValues.length; i++) {
 121             var el = document.getElementById(expectedValues[i].id);
 122             var expectedValue = expectedValues[i].end;
 123             var realValue = parseFloat(window.getComputedStyle(el).left);
 124             if (Math.abs(expectedValue - realValue) < allowance) {
 125               result += "PASS";
 126             } else {
 127               result += "FAIL";
 128             }
 129             result += " - end of animation - id: " + expectedValues[i].id + " expected: " + expectedValue + " actual: " + realValue + "<br>";
 130         }
 131         document.getElementById('result').innerHTML = result;
 132
 133         if (window.testRunner)
 134             testRunner.notifyDone();
 135     }
 136
 137     window.onload = function () {
 138         for (var i=0; i < expectedValues.length; i++) {
 139             var el = document.getElementById(expectedValues[i].id);
 140             var expectedValue = expectedValues[i].start;
 141             var realValue = parseFloat(window.getComputedStyle(el).left);
 142             if (Math.abs(expectedValue - realValue) < allowance) {
 143               result += "PASS";
 144             } else {
 145               result += "FAIL";
 146             }
 147             result += " - start of animation - id: " + expectedValues[i].id + " expected: " + expectedValue + " actual: " + realValue + "<br>";
 148         }
 149         document.addEventListener("webkitAnimationEnd", animationEnded, false);
 150     };
 151
 152   </script>
 153 </head>
 154 <body>
 155 This test performs an animation of the left property with four different
 156 fill modes. It animates over 0.1 second with a 0.1 second delay.
 157 It takes snapshots at document load and the end of the animation.
 158
 159 <div id="a" class="box">
 160   None - from/to present
 161 </div>
 162 <div id="b" class="box">
 163   Backwards - from/to present
 164 </div>
 165 <div id="c" class="box">
 166   Forwards - from/to present
 167 </div>
 168 <div id="d" class="box">
 169   Both - from/to present
 170 </div>
 171 <div id="e" class="box">
 172   Both iterating - from/to present
 173 </div>
 174
 175 <div id="f" class="box">
 176   None - from missing
 177 </div>
 178 <div id="g" class="box">
 179   Backwards - from missing
 180 </div>
 181 <div id="h" class="box">
 182   Forwards - from missing
 183 </div>
 184 <div id="i" class="box">
 185   Both - from missing
 186 </div>
 187 <div id="j" class="box">
 188   Both iterating - from missing
 189 </div>
 190
 191 <div id="result">
 192 </div>
 193 </body>
 194 </html>