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