LayoutTests/animations/fill-mode-multiple-keyframes.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: 30px;
  14       width: 200px;
  15       -webkit-animation-delay: 0.1s;
  16       -webkit-animation-duration: 0.1s;
  17       -webkit-animation-timing-function: linear;
  18     }
  19
  20     .two-keyframes {
  21       -webkit-animation-name: anim1;
  22     }
  23
  24     .three-keyframes {
  25       -webkit-animation-name: anim2;
  26     }
  27
  28     @-webkit-keyframes anim1 {
  29         from { left: 200px; }
  30         to   { left: 300px; }
  31     }
  32     @-webkit-keyframes anim2 {
  33         from { left: 200px; }
  34         50% { left: 250px; }
  35         to   { left: 300px; }
  36     }
  37
  38     #a, #f {
  39       background-color: blue;
  40       -webkit-animation-fill-mode: none;
  41     }
  42     #b, #g {
  43       background-color: red;
  44       -webkit-animation-fill-mode: backwards;
  45     }
  46     #c, #h {
  47       background-color: green;
  48       -webkit-animation-fill-mode: forwards;
  49     }
  50     #d, #i {
  51       background-color: yellow;
  52       -webkit-animation-fill-mode: both;
  53     }
  54     #e, #j {
  55       background-color: #999;
  56       -webkit-animation-fill-mode: both;
  57       -webkit-animation-iteration-count: 2;
  58       -webkit-animation-direction: alternate;
  59     }
  60   </style>
  61   <script type="text/javascript" charset="utf-8">
  62     const numAnims = 10;
  63     var animsFinished = 0;
  64     const allowance = 5;
  65     const expectedValues = [
  66       {id: "a", start: 100, end: 100},
  67       {id: "b", start: 200, end: 100},
  68       {id: "c", start: 100, end: 300},
  69       {id: "d", start: 200, end: 300},
  70       {id: "e", start: 200, end: 200},
  71       {id: "f", start: 100, end: 100},
  72       {id: "g", start: 200, end: 100},
  73       {id: "h", start: 100, end: 300},
  74       {id: "i", start: 200, end: 300},
  75       {id: "j", start: 200, end: 200}
  76     ];
  77     var result = "";
  78
  79     if (window.layoutTestController) {
  80         layoutTestController.dumpAsText();
  81         layoutTestController.waitUntilDone();
  82     }
  83
  84     function animationEnded(event) {
  85         if (++animsFinished == numAnims) {
  86             setTimeout(endTest, 0); // this set timeout should be ok in the test environment
  87                                     // since we're just giving style a chance to resolve
  88         }
  89     };
  90
  91     function endTest() {
  92
  93         for (var i=0; i < expectedValues.length; i++) {
  94             var el = document.getElementById(expectedValues[i].id);
  95             var expectedValue = expectedValues[i].end;
  96             var realValue = window.getComputedStyle(el).getPropertyCSSValue("left").getFloatValue(CSSPrimitiveValue.CSS_NUMBER);
  97             if (Math.abs(expectedValue - realValue) < allowance) {
  98               result += "PASS";
  99             } else {
 100               result += "FAIL";
 101             }
 102             result += " - end of animation - id: " + expectedValues[i].id + " expected: " + expectedValue + " actual: " + realValue + "<br>";
 103         }
 104         document.getElementById('result').innerHTML = result;
 105
 106         if (window.layoutTestController)
 107             layoutTestController.notifyDone();
 108     }
 109
 110     window.onload = function () {
 111         for (var i=0; i < expectedValues.length; i++) {
 112             var el = document.getElementById(expectedValues[i].id);
 113             var expectedValue = expectedValues[i].start;
 114             var realValue = window.getComputedStyle(el).getPropertyCSSValue("left").getFloatValue(CSSPrimitiveValue.CSS_NUMBER);
 115             if (Math.abs(expectedValue - realValue) < allowance) {
 116               result += "PASS";
 117             } else {
 118               result += "FAIL";
 119             }
 120             result += " - start of animation - id: " + expectedValues[i].id + " expected: " + expectedValue + " actual: " + realValue + "<br>";
 121         }
 122         document.addEventListener("webkitAnimationEnd", animationEnded, false);
 123     };
 124
 125   </script>
 126 </head>
 127 <body>
 128 This test performs an animation of the left property with four different
 129 fill modes on two sets of objects. The first set has animations with
 130 only from and to keyframes. The second set has animations with from, to and
 131 a third keyframe at 50%. It animates over 0.1 second with a 0.1 second delay.
 132 It takes snapshots at document load and the end of the animation.
 133
 134 <div id="a" class="box two-keyframes">
 135   None - 2 keyframes
 136 </div>
 137 <div id="b" class="box two-keyframes">
 138   Backwards - 2 keyframes
 139 </div>
 140 <div id="c" class="box two-keyframes">
 141   Forwards - 2 keyframes
 142 </div>
 143 <div id="d" class="box two-keyframes">
 144   Both - 2 keyframes
 145 </div>
 146 <div id="e" class="box two-keyframes">
 147   Both iterating - 2 keyframes
 148 </div>
 149
 150 <div id="f" class="box three-keyframes">
 151   None - 3 keyframes
 152 </div>
 153 <div id="g" class="box three-keyframes">
 154   Backwards - 3 keyframes
 155 </div>
 156 <div id="h" class="box three-keyframes">
 157   Forwards - 3 keyframes
 158 </div>
 159 <div id="i" class="box three-keyframes">
 160   Both - 3 keyframes
 161 </div>
 162 <div id="j" class="box three-keyframes">
 163   Both iterating - 3 keyframes
 164 </div>
 165
 166 <div id="result">
 167 </div>
 168 </body>
 169 </html>