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