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