third_party/WebKit/LayoutTests/animations/animation-properties-in-keyframe-are-ignored.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <style type="text/css" media="screen">
   5     div#target {
   6         -webkit-animation: 4s test;
   7         background-color: red;
   8         position: relative;
   9         width: 100px;
  10         height: 100px;
  11     }
  12     @-webkit-keyframes test {
  13         from {
  14             left: 0px;
  15             -webkit-animation-timing-function: linear;
  16             /* These should be ignored */
  17             -webkit-animation-name: bogus;
  18             -webkit-animation-duration: 10s;
  19             -webkit-animation-iteration-count: 10;
  20             -webkit-animation-direction: reverse;
  21             -webkit-animation-play-state: paused;
  22             -webkit-animation-delay: 10s;
  23             -webkit-animation-fill-mode: forwards;
  24         }
  25         to {
  26             left: 200px;
  27             -webkit-animation-timing-function: linear;
  28             /* These should be ignored */
  29             -webkit-animation-name: bogus;
  30             -webkit-animation-duration: 10s;
  31             -webkit-animation-iteration-count: 10;
  32             -webkit-animation-direction: reverse;
  33             -webkit-animation-play-state: paused;
  34             -webkit-animation-delay: 10s;
  35             -webkit-animation-fill-mode: forwards;
  36         }
  37     }
  38   </style>
  39   <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
  40   <script type="text/javascript" charset="utf-8">
  41
  42     const expectedValues = [
  43       // [time, element-id, property, expected-value, tolerance]
  44       [0, "target", "left", 0, 5],
  45       [1, "target", "left", 50, 5],
  46       [2, "target", "left", 100, 5],
  47       [3, "target", "left", 150, 5],
  48       [4, "target", "left", "auto", 0],
  49       [5, "target", "left", "auto", 0],
  50     ];
  51
  52     runAnimationTest(expectedValues);
  53   </script>
  54 </head>
  55 <body>
  56 <p>Tests that animation properties specified in a keyframe are ignored, with the exception of timing function.</p>
  57 <div id="target"></div>
  58 <div id="result"></div>
  59 </body>
  60 </html>