LayoutTests/animations/animation-direction-reverse-fill-mode.html

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