LayoutTests/animations/change-one-anim.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>Animation using matrix()</title>
   8     <style type="text/css" media="screen">
   9         #box {
  10             position: relative;
  11             height: 200px;
  12             width: 200px;
  13             background-color: #9bb;
  14             -webkit-animation-name: horiz, vert;
  15             -webkit-animation-duration: 1s;
  16             -webkit-animation-iteration-count: infinite;
  17             -webkit-animation-direction: alternate;
  18             -webkit-animation-timing-function: linear;
  19          }
  20
  21          @-webkit-keyframes horiz {
  22             from { left: 0px; }
  23             to { left: 300px; }
  24          }
  25          @-webkit-keyframes vert {
  26             from { top: 0px; }
  27             to { top: 300px; }
  28          }
  29     </style>
  30     <script type="text/javascript" charset="utf-8">
  31         if (window.layoutTestController) {
  32             layoutTestController.dumpAsText();
  33             layoutTestController.waitUntilDone();
  34         }
  35
  36         result = "PASS";
  37         const defaultTolerance = 15;
  38
  39         const expected =  [ 1, 0, 0, 1, 0, 0 ];
  40
  41         function isEqual(actual, desired, tolerance)
  42         {
  43             if (tolerance == undefined || tolerance == 0)
  44                 tolerance = defaultTolerance;
  45             var diff = Math.abs(actual - desired);
  46             return diff < tolerance;
  47         }
  48
  49         function removeAnim()
  50         {
  51             var target = document.getElementById("box");
  52             var left = window.getComputedStyle(target).left;
  53             target.style.webkitAnimationName = "vert";
  54             target.style.left = left;
  55         }
  56
  57         function snapshot()
  58         {
  59             var target = document.getElementById("box");
  60             var left = parseInt(window.getComputedStyle(target).left);
  61             var top = parseInt(window.getComputedStyle(target).top);
  62
  63             if (!isEqual(left, 150)) {
  64                 result = "FAIL('left' was:"+left+", expected:150)";
  65                 return;
  66             }
  67             if (!isEqual(top, 225)) {
  68                 result = "FAIL('top' was:"+top+", expected:225)";
  69                 return;
  70             }
  71         }
  72
  73         function start(event)
  74         {
  75             // We only want to continue for one of the two animations running
  76             if (event.animationName == "horiz")
  77                 return;
  78
  79             setTimeout("removeAnim()", 500);
  80             setTimeout("snapshot()", 750);
  81
  82             window.setTimeout(function() {
  83                 document.getElementById('result').innerHTML = result;
  84                 if (window.layoutTestController)
  85                     layoutTestController.notifyDone();
  86             }, 800);
  87         }
  88
  89         document.addEventListener('webkitAnimationStart', start, false);
  90     </script>
  91 </head>
  92 <body>
  93 This test performs two animations, left and top. It animates over 1 second.
  94 At 0.5 second it removes the left animation and the top animation should continue
  95 from where it left off.
  96 <div id="box">
  97 </div>
  98 <div id="result">
  99 </div>
 100 </body>
 101 </html>