LayoutTests/animations/big-rotation.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>Testing Rotations > 180 degrees</title>
   8   <style type="text/css" media="screen">
   9     #box {
  10       //position: absolute;
  11       height: 100px;
  12       width: 100px;
  13       background-color: blue;
  14       -webkit-animation-duration: 1.03s;
  15       -webkit-animation-timing-function: linear;
  16       -webkit-animation-name: "rotate";
  17     }
  18     @-webkit-keyframes "rotate" {
  19         from { -webkit-transform: rotate(0); }
  20         to   { -webkit-transform: rotate(558deg); }
  21     }
  22   </style>
  23   <script type="text/javascript" charset="utf-8">
  24     if (window.layoutTestController) {
  25       layoutTestController.dumpAsText();
  26       layoutTestController.waitUntilDone();
  27     }
  28
  29     result = "PASS";
  30     const defaultTolerance = 0.2;
  31     const expected =  [ [ -1,0,0,-1 ],
  32                         [ 1,0,0,1 ],
  33                         [ -1,0,0,-1 ] ];
  34
  35     function isEqual(actual, desired, tolerance)
  36     {
  37         if (tolerance == undefined || tolerance == 0)
  38             tolerance = defaultTolerance;
  39         var diff = Math.abs(actual - desired);
  40         return diff < tolerance;
  41     }
  42
  43     function snapshot(which)
  44     {
  45         if (result != "PASS")
  46             return;
  47
  48         var s = window.getComputedStyle(document.getElementById('box')).webkitTransform;
  49         var a = s.split("(");
  50         var a = a[1].split(",");
  51         for (i = 0; i < 4; ++i)
  52             if (!isEqual(a[i], expected[which][i])) {
  53                 result = "FAIL(property'"+i+"' was:"+a[i]+", expected:"+expected[which][i]+")";
  54                 return;
  55             }
  56     }
  57
  58     function start()
  59     {
  60         setTimeout("snapshot(0)", 333);
  61         setTimeout("snapshot(1)", 667);
  62         setTimeout("snapshot(2)", 1000);
  63
  64         window.setTimeout(function() {
  65             document.getElementById('result').innerHTML = result;
  66             if (window.layoutTestController)
  67                 layoutTestController.notifyDone();
  68         }, 1100);
  69     }
  70
  71     document.addEventListener('webkitAnimationStart', start, false);
  72
  73   </script>
  74 </head>
  75 <body>
  76 <p>
  77 This test shows rotation of > 180 degrees. The box should make one and a half rotations.
  78 <div id="box">
  79 </div>
  80 <div id="result">
  81 </div>
  82 </body>
  83 </html>