third_party/WebKit/LayoutTests/animations/opacity-transform-animation.html

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