src/third_party/WebKit/LayoutTests/animations/missing-from-to-transforms.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>Test animation with missing from and to keyframes</title>
   8   <style type="text/css" media="screen">
   9     .box {
  10       position: relative;
  11       left: 10px;
  12       top: 10px;
  13       height: 20px;
  14       width: 20px;
  15       transform: translateX(10px);
  16       background-color: blue;
  17       -webkit-animation-duration: 2s;
  18       -webkit-animation-timing-function: linear;
  19     }
  20
  21     #box1 {
  22       -webkit-animation-name: anim1;
  23     }
  24     @-webkit-keyframes anim1 {
  25       from { transform: translateX(10px); }
  26       40% { transform: translateX(30px); }
  27       60% { transform: translateX(10px); }
  28       to { transform: translateX(20px); }
  29     }
  30
  31     #box2 {
  32       -webkit-animation-name: anim2;
  33       background-color: red;
  34     }
  35     @-webkit-keyframes anim2 {
  36       40% { transform: translateX(30px); }
  37       60% { transform: translateX(10px); }
  38       to { transform: translateX(20px); }
  39     }
  40
  41     #box3 {
  42       transform: translateX(20px);
  43       -webkit-animation-name: anim3;
  44       background-color: green;
  45     }
  46     @-webkit-keyframes anim3 {
  47       from { transform: translateX(10px); }
  48       40% { transform: translateX(30px); }
  49       60% { transform: translateX(10px); }
  50     }
  51
  52     #box4 {
  53       -webkit-animation-name: anim4;
  54       background-color: yellow;
  55     }
  56     @-webkit-keyframes anim4 {
  57       40% { transform: translateX(30px); }
  58       60% { transform: translateX(20px); }
  59     }
  60
  61     #result {
  62       margin-top: 20px;
  63     }
  64   </style>
  65   <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
  66   <script type="text/javascript" charset="utf-8">
  67
  68     const expectedValues = [
  69       // [time, element-id, property, expected-value, tolerance]
  70       [0.4, "box1", "webkitTransform.4", 20, 2],
  71       [1.0, "box1", "webkitTransform.4", 20, 2],
  72       [1.6, "box1", "webkitTransform.4", 15, 2],
  73       [0.4, "box2", "webkitTransform.4", 20, 2],
  74       [1.0, "box2", "webkitTransform.4", 20, 2],
  75       [1.6, "box2", "webkitTransform.4", 15, 2],
  76       [0.4, "box3", "webkitTransform.4", 20, 2],
  77       [1.0, "box3", "webkitTransform.4", 20, 2],
  78       [1.6, "box3", "webkitTransform.4", 15, 2],
  79       [0.4, "box4", "webkitTransform.4", 20, 2],
  80       [1.0, "box4", "webkitTransform.4", 25, 2],
  81       [1.6, "box4", "webkitTransform.4", 15, 2]
  82     ];
  83
  84     runAnimationTest(expectedValues);
  85
  86   </script>
  87 </head>
  88 <body>
  89 This test performs animations of the transform property on four boxes over 2 seconds.
  90 Box 1 has all keyframes. Box 2 has a missing "from" keyframe.
  91 Box 3 has a missing "to" keyframe.
  92 Box 4 has both "from" and "to" keyframes missing, but other keyframes which
  93 should trigger the generation of "from" and "to". Box 5 has no keyframes, and
  94 should not animate.
  95 The test takes 3 snapshots each and expects each result to be within a specified range.
  96 <div class="box" id="box1">
  97 </div>
  98 <div class="box" id="box2">
  99 </div>
 100 <div class="box" id="box3">
 101 </div>
 102 <div class="box" id="box4">
 103 </div>
 104 <div id="result">
 105 </div>
 106 </body>
 107 </html>