third_party/WebKit/LayoutTests/animations/keyframes-invalid-keys.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   2    "http://www.w3.org/TR/html4/loose.dtd">
   3
   4 <html lang="en">
   5 <head>
   6   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   7   <title>Keyframes with invalid keys</title>
   8   <style type="text/css" media="screen">
   9     @-webkit-keyframes anim {
  10         50% { left: 3px; }
  11
  12         /* Out-of-range percentage values */
  13         -10% { left: 100px; }
  14         -10%, from { left: 100px; }
  15         from, 110% { left: 100px; }
  16         110% { left: 100px; }
  17
  18         /* Invalid keys (numbers and identifiers) */
  19         0, from { left: 100px; }
  20         fromto { left: 100px; }
  21         60%, unknown { left: 100px; }
  22         100 { left: 100px; }
  23     }
  24     #box {
  25         position: absolute;
  26         left: 3px;
  27         top: 100px;
  28         height: 100px;
  29         width: 100px;
  30         background-color: blue;
  31         -webkit-animation-duration: 1s;
  32         -webkit-animation-timing-function: linear;
  33         -webkit-animation-name: anim;
  34     }
  35
  36     </style>
  37     <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
  38     <script type="text/javascript" charset="utf-8">
  39
  40     const expectedValues = [
  41       // [time, element-id, property, expected-value, tolerance]
  42       [0.2, "box", "left", 3, 1],
  43       [0.8, "box", "left", 3, 1],
  44     ];
  45
  46     runAnimationTest(expectedValues);
  47
  48   </script>
  49 </head>
  50 <body>
  51 This test performs an animation of the left property. It should always remain 3px, unless there are
  52 errors during parsing, resulting in other values in keyframes with bad keys.
  53 Four of the keyframes contain invalid keys, and should be discarded altogether
  54 ("If a keyframe selector specifies negative percentage values or values higher than 100%, then the keyframe will be ignored", see <a href="http://www.w3.org/TR/css3-animations/#keyframes">http://www.w3.org/TR/css3-animations/#keyframes</a>).
  55 <div id="box">
  56 </div>
  57 <div id="result">
  58 </div>
  59 </body>
  60 </html>