2008-10-09 Chris Marrin <cmarrin@apple.com>
[WebKit-https.git] / 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>