LayoutTests/animations/missing-values-first-keyframe.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <style type="text/css" media="screen">
   5     body {
   6       margin: 0;
   7     }
   8
   9     .box {
  10       position: relative;
  11       width: 100px;
  12       height: 100px;
  13       left: 0;
  14       background-color: green;
  15     }
  16
  17     .indicator {
  18       position: absolute;
  19       width: 100px;
  20       height: 100px;
  21       left: 100px;
  22       background-color: red;
  23     }
  24     #indicator1 {
  25       top: 0;
  26     }
  27     #indicator2 {
  28       top: 100px;
  29     }
  30
  31     #box1 {
  32       left: 200px;
  33       -webkit-animation: move-left 2s linear;
  34     }
  35
  36     #box2 {
  37       -webkit-transform: translateX(200px);
  38       -webkit-animation: move-transform 2s linear;
  39     }
  40
  41     @-webkit-keyframes move-left {
  42       0% {
  43         opacity: 1;
  44       }
  45       25% {
  46         opacity: 1;
  47       }
  48       50% {
  49         left: 0;
  50         opacity: 1;
  51       }
  52       100% {
  53         left: 0;
  54         opacity: 0;
  55       }
  56     }
  57
  58     @-webkit-keyframes move-transform {
  59       0% {
  60         opacity: 1;
  61       }
  62       25% {
  63         opacity: 1;
  64       }
  65       50% {
  66         -webkit-transform: translateX(0);
  67         opacity: 1;
  68       }
  69       100% {
  70         -webkit-transform: translateX(0);
  71         opacity: 0;
  72       }
  73     }
  74
  75     #result {
  76       visibility: hidden; /* hide from pixel results */
  77     }
  78   </style>
  79   <script src="resources/animation-test-helpers.js" type="text/javascript"></script>
  80   <script type="text/javascript">
  81
  82     const expectedValues = [
  83       ["move-left", 0.5, "box1", "left", 100, 15],
  84       ["move-transform", 0.5, "box2", "webkitTransform.4", 100, 15],
  85     ];
  86
  87     var doPixelTest = true;
  88     var disablePauseAPI = false;
  89     runAnimationTest(expectedValues, null, undefined, disablePauseAPI, doPixelTest);
  90   </script>
  91 </head>
  92 <body>
  93   <!-- In the pixel result, you should see two vertically adjacent green squares. There should be no red.
  94   Test is only reliable when run in DRT. -->
  95   <div class="indicator" id="indicator1"></div>
  96   <div class="indicator" id="indicator2"></div>
  97
  98   <div class="box" id="box1"></div>
  99   <div class="box" id="box2"></div>
 100
 101   <div id="result"></div>
 102 </body>
 103 </html>