src/third_party/WebKit/LayoutTests/animations/simultaneous-start-transform.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 simultaneous starting of two animations</title>
   8   <style type="text/css" media="screen">
   9     .box {
  10       position: absolute;
  11       top: 40px;
  12       height: 100px;
  13       width: 100px;
  14       background-color: blue;
  15       -webkit-animation-duration: 10s;
  16       -webkit-animation-timing-function: linear;
  17       -webkit-animation-name: anim;
  18     }
  19     @-webkit-keyframes anim {
  20         from { transform: rotate(0deg); }
  21         to   { transform: rotate(360deg); }
  22     }
  23     #box1 {
  24         left: 40px;
  25         background-color: blue;
  26     }
  27     #box2 {
  28         left: 160px;
  29         background-color: red;
  30     }
  31   </style>
  32   <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
  33   <script type="text/javascript" charset="utf-8">
  34
  35     const expectedValues = [
  36       // [time, element-id, property, expected-value, tolerance]
  37       [2, "box1", "webkitTransform", [ 0.309017, 0.951057 ], 0.05],
  38       [2, "box2", "webkitTransform", [ 0.309017, 0.951057 ], 0.05],
  39       [2, ["box1", "box2"], "webkitTransform", "", 0],
  40       [5, "box1", "webkitTransform", [ -1, 0 ], 0.05],
  41       [5, "box2", "webkitTransform", [ -1, 0 ], 0.05],
  42       [5, ["box1", "box2"], "webkitTransform", "", 0],
  43       [8, "box1", "webkitTransform", [ 0.309017, -0.951057 ], 0.05],
  44       [8, "box2", "webkitTransform", [ 0.309017, -0.951057 ], 0.05],
  45       [8, ["box1", "box2"], "webkitTransform", "", 0],
  46     ];
  47
  48     runAnimationTest(expectedValues);
  49
  50   </script>
  51 </head>
  52 <body>
  53 This test performs an animation of the transform property. It animates over 10 seconds.
  54 It takes 3 snapshots and expects each result to be within a specified range.
  55 <div id="box1" class="box">
  56 </div>
  57 <div id="box2" class="box">
  58 </div>
  59 <div id="result" style="position:absolute; top:150px">
  60 </div>
  61 </body>
  62 </html>