LayoutTests/animations/transition-and-animation-1.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 #1</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.5s;
  17         -webkit-animation-timing-function: linear;
  18         -webkit-animation-name: "anim";
  19         -webkit-transition-property: -webkit-transform;
  20         -webkit-transition-duration: 10s;
  21     }
  22     @-webkit-keyframes "anim" {
  23         from { -webkit-transform: translateX(200px); }
  24         to   { -webkit-transform: translateX(300px); }
  25     }
  26     </style>
  27     <script type="text/javascript" charset="utf-8">
  28     if (window.layoutTestController) {
  29         layoutTestController.dumpAsText();
  30         layoutTestController.waitUntilDone();
  31     }
  32
  33     result = "PASS";
  34     const defaultTolerance = 0.2;
  35
  36     function isEqual(actual, desired, tolerance)
  37     {
  38         if (tolerance == undefined || tolerance == 0)
  39             tolerance = defaultTolerance;
  40         var diff = Math.abs(actual - desired);
  41         return diff < tolerance;
  42     }
  43
  44     function snapshot(which)
  45     {
  46         var m = window.getComputedStyle(document.getElementById('box')).webkitTransform;
  47         if (m != "none")
  48             result = "FAIL(was:"+m+", expected:none)";
  49     }
  50
  51     function start()
  52     {
  53         setTimeout("snapshot()", 550);
  54
  55         window.setTimeout(function() {
  56             document.getElementById('result').innerHTML = result;
  57             if (window.layoutTestController)
  58                 layoutTestController.notifyDone();
  59         }, 600);
  60     }
  61
  62     document.addEventListener('webkitAnimationStart', start, false);
  63
  64   </script>
  65 </head>
  66 <body>
  67 This test has a transition and animation on the same property (-webkit-transform). But the transition is never triggered,
  68 so nothing should be moving when the animation finishes.
  69 <div id="box">
  70 </div>
  71 <div id="result">
  72 </div>
  73 </body>
  74 </html>