LayoutTests/animations/additive-transform-animations.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style type="text/css">
   6     .box {
   7       height: 100px;
   8       width: 100px;
   9       background-color: blue;
  10     }
  11
  12     #box {
  13       -webkit-animation: anim 2s linear both;
  14     }
  15
  16     @-webkit-keyframes anim {
  17         from { -webkit-transform: rotate(0deg) translate(-100px, 0); }
  18         to   { -webkit-transform: rotate(180deg) translate(300px, 0); }
  19     }
  20
  21     #result {
  22       opacity: 0; /* hide in pixel result */
  23     }
  24   </style>
  25   <script src="resources/animation-test-helpers.js" type="text/javascript"></script>
  26   <script type="text/javascript">
  27     const expectedValues = [
  28       // [time, element-id, property, expected-value, tolerance]
  29       ["anim",  1, "box",  "webkitTransform", [0, 1, -1, 0, 0, 100], 0.002],
  30     ];
  31
  32     const doPixelTest = true;
  33     const disablePauseAnimationAPI = false;
  34     runAnimationTest(expectedValues, null, null, disablePauseAnimationAPI, doPixelTest);
  35   </script>
  36 </head>
  37 <body>
  38
  39 <div class="box" id="box"></div>
  40 <div id="result"></div>
  41
  42 </body>
  43 </html>