LayoutTests/animations/transition-and-animation-2.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>Transition/Animation Test #2</title>
   8   <style type="text/css" media="screen">
   9     #box {
  10         position: absolute;
  11         left: 0;
  12         top: 100px;
  13         height: 100px;
  14         width: 100px;
  15         background-color: blue;
  16         -webkit-animation-duration: 0.3s;
  17         -webkit-animation-timing-function: linear;
  18         -webkit-animation-name: "anim";
  19         -webkit-transition-property: -webkit-transform;
  20         -webkit-transition-duration: 10s;
  21         -webkit-transition-timing-function: linear;
  22     }
  23     @-webkit-keyframes "anim" {
  24         from { -webkit-transform: translate(0,100px) }
  25         to   { -webkit-transform: translate(400px, 100px) }
  26     }
  27     </style>
  28     <script type="text/javascript" charset="utf-8">
  29     if (window.layoutTestController) {
  30         layoutTestController.dumpAsText();
  31         layoutTestController.waitUntilDone();
  32     }
  33
  34     result = "PASS";
  35     const defaultTolerance = 0.1;
  36
  37     function isEqual(actual, desired, tolerance)
  38     {
  39         if (tolerance == undefined || tolerance == 0)
  40             tolerance = defaultTolerance;
  41         var diff = Math.abs(actual - desired);
  42         return diff < tolerance;
  43     }
  44
  45     function snapshot()
  46     {
  47         var m = window.getComputedStyle(document.getElementById('box')).webkitTransform;
  48         var a = m.split("(");
  49         a = a[1].split(",");
  50
  51         if (!isEqual(parseFloat(a[5]), 0))
  52             result = "FAIL(was:"+a[5]+", expected:0)";
  53     }
  54
  55     function start()
  56     {
  57         document.getElementById("box").style.webkitTransform = "translateX(400px)";
  58
  59         setTimeout("snapshot()", 400);
  60
  61         window.setTimeout(function() {
  62             document.getElementById('result').innerHTML = result;
  63             if (window.layoutTestController)
  64                 layoutTestController.notifyDone();
  65         }, 500);
  66     }
  67
  68     document.addEventListener('webkitAnimationStart', start, false);
  69
  70   </script>
  71 </head>
  72 <body>
  73 This test has a transition and animation on the same property (-webkit-transform).
  74 The animation starts and then the transition is triggered. The transition should start
  75 at the position before the animation started (the unanimated position), which is (0,0). If it
  76 starts from the start point of the animation (0,100) then there is an error
  77 <div id="box">
  78 </div>
  79 <div id="result">
  80 </div>
  81 </body>
  82 </html>