third_party/WebKit/LayoutTests/animations/fill-mode-iteration-count-non-integer.html

   1 <!DOCTYPE html>
   2
   3 <html lang="en">
   4 <head>
   5   <title>Test simple animation with fill modes and non integer iteration count</title>
   6   <style type="text/css" media="screen">
   7     .box {
   8       position: relative;
   9       left: 100px;
  10       height: 100px;
  11       width: 100px;
  12       -webkit-animation-delay: 0.1s;
  13       -webkit-animation-duration: 0.1s;
  14       -webkit-animation-timing-function: linear;
  15       -webkit-animation-name: anim;
  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       -webkit-animation-iteration-count: 1.4;
  25     }
  26     #backwards {
  27       background-color: red;
  28       -webkit-animation-fill-mode: backwards;
  29       -webkit-animation-iteration-count: 0.4;
  30     }
  31     #forwards {
  32       background-color: green;
  33       -webkit-animation-fill-mode: forwards;
  34       -webkit-animation-iteration-count: 1.4;
  35     }
  36     #both {
  37       background-color: yellow;
  38       -webkit-animation-fill-mode: both;
  39       -webkit-animation-iteration-count: 1.4;
  40     }
  41     #both_iterating {
  42       background-color: cyan;
  43       -webkit-animation-fill-mode: both;
  44       -webkit-animation-iteration-count: 2.4;
  45       -webkit-animation-direction: alternate;
  46     }
  47     #both_iterating_reverse {
  48       background-color: #999;
  49       -webkit-animation-fill-mode: both;
  50       -webkit-animation-iteration-count: 2.4;
  51       -webkit-animation-direction: alternate-reverse;
  52     }
  53   </style>
  54   <script type="text/javascript" charset="utf-8">
  55     const numAnims = 6;
  56     var animsFinished = 0;
  57     const expectedValues = [
  58       {id: "none",                   start: 100, end: 100},
  59       {id: "backwards",              start: 200, end: 100},
  60       {id: "forwards",               start: 100, end: 240},
  61       {id: "both",                   start: 200, end: 240},
  62       {id: "both_iterating",         start: 200, end: 240},
  63       {id: "both_iterating_reverse", start: 300, end: 260}
  64     ];
  65     var result = "";
  66
  67     if (window.testRunner) {
  68         testRunner.dumpAsText();
  69         testRunner.waitUntilDone();
  70     }
  71
  72     function animationEnded(event) {
  73         if (++animsFinished == numAnims) {
  74             // This call to setTimeout() should be OK in the test environment
  75             // since we're just giving style a chance to resolve.
  76             setTimeout(endTest, 0);
  77         }
  78     };
  79
  80     function log(expected, actual, isStart, id) {
  81         var identifier = (isStart ? 'Start' : 'End') + ' of animation for element \'' + id + '\'';
  82         if (Math.abs(expected - actual) < 5) {
  83             result += 'PASS: ' + identifier + ': Saw something close to ' + expected + '<br>';
  84         } else {
  85             result += 'FAIL: ' + identifier + ': Expected ' + expected + ' but saw ' + actual + '<br>';
  86         }
  87     }
  88
  89     function endTest() {
  90         for (var i=0; i < expectedValues.length; i++) {
  91             var el = document.getElementById(expectedValues[i].id);
  92             var expectedValue = expectedValues[i].end;
  93             var realValue = parseFloat(window.getComputedStyle(el).left);
  94             log(expectedValue, realValue, false, expectedValues[i].id);
  95         }
  96         document.getElementById('result').innerHTML = result;
  97
  98         if (window.testRunner)
  99             testRunner.notifyDone();
 100     }
 101
 102     window.onload = function () {
 103         for (var i=0; i < expectedValues.length; i++) {
 104             var el = document.getElementById(expectedValues[i].id);
 105             var expectedValue = expectedValues[i].start;
 106             var realValue = parseFloat(window.getComputedStyle(el).left);
 107             log(expectedValue, realValue, true, expectedValues[i].id);
 108         }
 109         document.addEventListener("webkitAnimationEnd", animationEnded, false);
 110     };
 111   </script>
 112 </head>
 113 <body>
 114 <div>
 115   This test performs an animation of the left property with four different
 116   fill modes. It animates over 0.1 seconds with a 0.1 second delay. It takes
 117   snapshots at document load and the end of the animation.
 118 </div>
 119 <div id="none" class="box">
 120   None
 121 </div>
 122 <div id="backwards" class="box">
 123   Backwards
 124 </div>
 125 <div id="forwards" class="box">
 126   Forwards
 127 </div>
 128 <div id="both" class="box">
 129   Both
 130 </div>
 131 <div id="both_iterating" class="box">
 132   Both iterating
 133 </div>
 134 <div id="both_iterating_reverse" class="box">
 135   Both iterating reverse
 136 </div>
 137 <div id="result">
 138 </div>
 139 </body>
 140 </html>