LayoutTests/animations/missing-keyframe-properties-repeating.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <style type="text/css" media="screen">
   5     #box1 {
   6       position: relative;
   7       height: 100px;
   8       width: 100px;
   9       left: 0;
  10       background-color: blue;
  11       margin: 0;
  12       -webkit-animation-duration: 2s;
  13       -webkit-animation-timing-function: linear;
  14       -webkit-animation-iteration-count: 2;
  15       -webkit-animation-direction: alternate;
  16       -webkit-animation-name: move;
  17     }
  18     @-webkit-keyframes move {
  19         from {
  20           opacity: 1;
  21         }
  22         50% {
  23           opacity: 1;
  24           left: 100px;
  25         }
  26         to {
  27           opacity: 1;
  28         }
  29     }
  30
  31     /* Test reversing animation with missing values */
  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       // [animation-name, time, element-id, property, expected-value, tolerance]
  39       ["move", 1, "box1", "left", 100, 15],
  40       ["move", 2, "box1", "left", 0, 15],
  41       ["move", 3, "box1", "left", 100, 15],
  42     ];
  43
  44     runAnimationTest(expectedValues);
  45   </script>
  46 </head>
  47 <body>
  48 <div id="box1"></div>
  49 <div id="result">
  50 </div>
  51 </body>
  52 </html>