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 defaultTolerance = 2;
  47
  48     const expected = [
  49       // [time, property, element-id, expected-value]
  50       [400, "left", "box1", 20],
  51       [500, "left", "box2", 20],
  52       [1000, "left", "box2", 30],
  53       [1200, "left", "box1", 10],
  54       [1500, "left", "box2", 25],
  55       [1600, "left", "box1", 15],
  56     ];
  57
  58     var started = false;
  59
  60     function start()
  61     {
  62         if (started) return;
  63         started = true;
  64         setup();
  65         window.setTimeout(function() {
  66             document.getElementById('box1').style.display = "none";
  67             document.getElementById('box2').style.display = "none";
  68             cleanup();
  69         }, 2100);
  70     }
  71
  72     document.addEventListener('webkitAnimationStart', start, false);
  73
  74   </script>
  75 </head>
  76 <body>
  77 This test performs animations of the left property on two boxes over 2 seconds.
  78 It takes 3 snapshots each and expects each result to be within a specified range.
  79 <div id="box1">
  80 </div>
  81 <div id="box2">
  82 </div>
  83 <div id="result">
  84 </div>
  85 </body>
  86 </html>