src/third_party/WebKit/LayoutTests/animations/combo-transform-translate+scale.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>Combined transform translate() scale()</title>
   8   <style type="text/css" media="screen">
   9     #box {
  10       height: 100px;
  11       width: 100px;
  12       background-color: blue;
  13       -webkit-animation-duration: 1s;
  14       -webkit-animation-timing-function: linear;
  15       -webkit-animation-name: anim;
  16     }
  17     @-webkit-keyframes anim {
  18         from { transform: translate(0,0) scale(1,1); }
  19         to   { transform: translate(100px, 200px) scale(2,4); }
  20     }
  21   </style>
  22   <script type="text/javascript" charset="utf-8">
  23     if (window.testRunner) {
  24       testRunner.dumpAsText();
  25       testRunner.waitUntilDone();
  26     }
  27
  28     result = "";
  29
  30     const expected =  [ [ 1.25,0,0,1.75,25,50 ],
  31                         [ 1.5,0,0,2.5,50,100 ] ];
  32     const tolerance = [ 0.2,0.2,0.2,0.3,8,15 ];
  33     const prop = [ "a", "b", "c", "d", "e", "f" ];
  34
  35     function isEqual(actual, desired, tolerance)
  36     {
  37         var diff = Math.abs(actual - desired);
  38         return diff <= tolerance;
  39     }
  40
  41     var numSnapshots = 0;
  42
  43     function snapshot(which)
  44     {
  45         var t = new WebKitCSSMatrix(window.getComputedStyle(document.getElementById('box')).webkitTransform);
  46         for (i = 0; i < 6; ++i) {
  47             if (!isEqual(t[prop[i]], expected[which][i], tolerance[i]))
  48                 result += "FAIL('"+prop[i]+"' was:"+t[prop[i]]+", expected:"+expected[which][i]+")";
  49         }
  50
  51         numSnapshots++;
  52         if (numSnapshots == 2) {
  53             document.getElementById('result').innerHTML = result || "PASS";
  54             if (window.testRunner)
  55                 testRunner.notifyDone();
  56         }
  57     }
  58
  59     function start()
  60     {
  61         setTimeout("snapshot(0)", 250);
  62         setTimeout("snapshot(1)", 500);
  63     }
  64
  65     document.addEventListener('webkitAnimationStart', start, false);
  66
  67   </script>
  68 </head>
  69 <body>
  70 This test performs an animation of the translate() and scale() operators. It animates over 1 seconds.
  71 At 0.25 and 0.5 seconds it takes a snapshot and expects the result to be within range.
  72 <div id="box">
  73 </div>
  74 <div id="result">
  75 </div>
  76 </body>
  77 </html>