LayoutTests/animations/opacity-transform-animation.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <style type="text/css" media="screen">
   5     #box {
   6         position: absolute;
   7         left: 0;
   8         top: 0;
   9         height: 100px;
  10         width: 100px;
  11         background-color: green;
  12         -webkit-animation-name: move;
  13         -webkit-animation-duration: 1s;
  14         -webkit-animation-timing-function: linear;
  15         -webkit-animation-iteration-count: 1;
  16     }
  17
  18     @-webkit-keyframes move {
  19         from {
  20             -webkit-transform: translateX(0) scale(1);
  21             opacity: 0.7;
  22         }
  23         to {
  24             -webkit-transform: translateX(400px) scale(1);
  25             opacity: 1.0;
  26         }
  27     }
  28
  29     #indicator {
  30         position: absolute;
  31         left: 0;
  32         top: 0;
  33         height: 100px;
  34         width: 100px;
  35         left: 200px;
  36         background-color: red;
  37     }
  38
  39     #result {
  40         display: none; /* only the pixel output is valuable */
  41     }
  42   </style>
  43   <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
  44   <script type="text/javascript" charset="utf-8">
  45
  46     const expectedValues = [
  47       // [animation-name, time, element-id, property, expected-value, tolerance]
  48       ["move", 0.5, "box", "webkitTransform.4", 200, 2],
  49     ];
  50
  51     var disablePauseAnimationAPI = false;
  52     var doPixelTest = true;
  53     runAnimationTest(expectedValues, null, null, disablePauseAnimationAPI, doPixelTest);
  54
  55   </script>
  56 </head>
  57 <body>
  58
  59 <!-- In the pixel results, the green square should overlay the red square -->
  60 <div id="indicator"></div>
  61 <div id="box"></div>
  62 <div id="result"></div>
  63
  64 </body>
  65 </html>