LayoutTests/animations/multiple-animations.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 multiple concurrent animations</title>
   8   <style type="text/css" media="screen">
   9     #box1 {
  10       position: relative;
  11       left: 10px;
  12       top: 10px;
  13       height: 100px;
  14       width: 100px;
  15       background-color: blue;
  16       -webkit-animation-duration: 2s;
  17       -webkit-animation-timing-function: linear;
  18       -webkit-animation-name: anim1;
  19     }
  20     @-webkit-keyframes anim1 {
  21         from { left: 10px; }
  22         40% { left: 30px; }
  23         60% { left: 10px; }
  24         to   { left: 20px; }
  25     }
  26     #box2 {
  27       position: relative;
  28       left: 10px;
  29       top: 10px;
  30       height: 100px;
  31       width: 100px;
  32       background-color: blue;
  33       -webkit-animation-duration: 2s;
  34       -webkit-animation-timing-function: linear;
  35       -webkit-animation-name: anim2;
  36     }
  37     @-webkit-keyframes anim2 {
  38         from { left: 10px; }
  39         50% { left: 30px; }
  40         to   { left: 20px; }
  41     }
  42   </style>
  43   <script src="animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
  44   <script type="text/javascript" charset="utf-8">
  45
  46     const expectedValues = [
  47       // [animation-name, time, element-id, property, expected-value, tolerance]
  48       ["anim1", 0.4, "box1", "left", 20, 2],
  49       ["anim2", 0.5, "box2", "left", 20, 2],
  50       ["anim2", 1.0, "box2", "left", 30, 2],
  51       ["anim1", 1.2, "box1", "left", 10, 2],
  52       ["anim2", 1.5, "box2", "left", 25, 2],
  53       ["anim1", 1.6, "box1", "left", 15, 2],
  54     ];
  55
  56     runAnimationTest(expectedValues);
  57
  58   </script>
  59 </head>
  60 <body>
  61 This test performs animations of the left property on two boxes over 2 seconds.
  62 It takes 3 snapshots each and expects each result to be within a specified range.
  63 <div id="box1">
  64 </div>
  65 <div id="box2">
  66 </div>
  67 <div id="result">
  68 </div>
  69 </body>
  70 </html>