third_party/WebKit/LayoutTests/animations/fill-mode.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 simple animation with fill modes</title>
   8   <style type="text/css" media="screen">
   9     .box {
  10       position: relative;
  11       left: 100px;
  12       top: 10px;
  13       height: 100px;
  14       width: 100px;
  15       -webkit-animation-delay: 0.1s;
  16       -webkit-animation-duration: 0.1s;
  17       -webkit-animation-timing-function: linear;
  18       -webkit-animation-name: anim;
  19     }
  20     @-webkit-keyframes anim {
  21         from { left: 200px; }
  22         to   { left: 300px; }
  23     }
  24     #a {
  25       background-color: blue;
  26       -webkit-animation-fill-mode: none;
  27     }
  28     #b {
  29       background-color: red;
  30       -webkit-animation-fill-mode: backwards;
  31     }
  32     #c {
  33       background-color: green;
  34       -webkit-animation-fill-mode: forwards;
  35     }
  36     #d {
  37       background-color: yellow;
  38       -webkit-animation-fill-mode: both;
  39     }
  40     #e {
  41       background-color: #999;
  42       -webkit-animation-fill-mode: both;
  43       -webkit-animation-iteration-count: 2;
  44       -webkit-animation-direction: alternate;
  45     }
  46   </style>
  47   <script type="text/javascript" charset="utf-8">
  48     const numAnims = 5;
  49     var animsFinished = 0;
  50     const allowance = 5;
  51     const expectedValues = [
  52       {id: "a", start: 100, end: 100},
  53       {id: "b", start: 200, end: 100},
  54       {id: "c", start: 100, end: 300},
  55       {id: "d", start: 200, end: 300},
  56       {id: "e", start: 200, end: 200}
  57     ];
  58     var result = "";
  59
  60     if (window.testRunner) {
  61         testRunner.dumpAsText();
  62         testRunner.waitUntilDone();
  63     }
  64
  65     function animationEnded(event) {
  66         if (++animsFinished == numAnims) {
  67             setTimeout(endTest, 0); // this set timeout should be ok in the test environment
  68                                     // since we're just giving style a chance to resolve
  69         }
  70     };
  71
  72     function endTest() {
  73
  74         for (var i=0; i < expectedValues.length; i++) {
  75             var el = document.getElementById(expectedValues[i].id);
  76             var expectedValue = expectedValues[i].end;
  77             var realValue = parseFloat(window.getComputedStyle(el).left);
  78             if (Math.abs(expectedValue - realValue) < allowance) {
  79               result += "PASS";
  80             } else {
  81               result += "FAIL";
  82             }
  83             result += " - end of animation - id: " + expectedValues[i].id + " expected: " + expectedValue + " actual: " + realValue + "<br>";
  84         }
  85         document.getElementById('result').innerHTML = result;
  86
  87         if (window.testRunner)
  88             testRunner.notifyDone();
  89     }
  90
  91     window.onload = function () {
  92         for (var i=0; i < expectedValues.length; i++) {
  93             var el = document.getElementById(expectedValues[i].id);
  94             var expectedValue = expectedValues[i].start;
  95             var realValue = parseFloat(window.getComputedStyle(el).left);
  96             if (Math.abs(expectedValue - realValue) < allowance) {
  97               result += "PASS";
  98             } else {
  99               result += "FAIL";
 100             }
 101             result += " - start of animation - id: " + expectedValues[i].id + " expected: " + expectedValue + " actual: " + realValue + "<br>";
 102         }
 103         document.addEventListener("webkitAnimationEnd", animationEnded, false);
 104     };
 105
 106   </script>
 107 </head>
 108 <body>
 109 This test performs an animation of the left property with four different
 110 fill modes. It animates over 0.1 second with a 0.1 second delay.
 111 It takes snapshots at document load and the end of the animation.
 112 <div id="a" class="box">
 113   None
 114 </div>
 115 <div id="b" class="box">
 116   Backwards
 117 </div>
 118 <div id="c" class="box">
 119   Forwards
 120 </div>
 121 <div id="d" class="box">
 122   Both
 123 </div>
 124 <div id="e" class="box">
 125   Both iterating
 126 </div>
 127 <div id="result">
 128 </div>
 129 </body>
 130 </html>